{"id":7988,"date":"2017-09-21T17:02:42","date_gmt":"2017-09-21T17:02:42","guid":{"rendered":"http:\/\/disenoweb.mx\/?p=3589"},"modified":"2017-09-21T17:02:42","modified_gmt":"2017-09-21T17:02:42","slug":"atributos-globales","status":"publish","type":"post","link":"https:\/\/disenoweb.mx\/blog\/atributos-globales\/","title":{"rendered":"Atributos Globales"},"content":{"rendered":"\n<h1>Atributos Globales<\/h1>\n<figure id=\"attachment_3534\" aria-describedby=\"caption-attachment-3534\" style=\"width: 255px\" class=\"wp-caption alignnone\"><img data-opt-id=226175603  fetchpriority=\"high\" decoding=\"async\" class=\"size-medium wp-image-3534\" src=\"https:\/\/mlniuewdmffl.i.optimole.com\/w:255\/h:300\/q:mauto\/f:best\/http:\/\/disenoweb.mx\/wp-content\/uploads\/2017\/08\/diseno-creativo-255x300.png\" alt=\"Atributos Globales Atributos Globales Atributos Globales diseno creativo 255x300\" width=\"255\" height=\"300\" title=\"diseno-creativo-255x300 diseno-creativo-255x300\"><figcaption id=\"caption-attachment-3534\" class=\"wp-caption-text\">Atributos Globales<\/figcaption><\/figure>\n<p><a href=\"http:\/\/disenoweb.mx\"><strong><em>Atributos Globales <\/em><\/strong><\/a>\u00a0tambi\u00e9n incluye nuevos atributos globales que pueden ser asignados a cualquier elemento. Son los siguientes:<\/p>\n<h5>ACCESSKEY<\/h5>\n<p>El atributo accesskey permite a los desarrolladores especificar un atajo de teclado que permite activar un elemento a asignarle el foco. Este atributo ya exist\u00eda en HTML 4, aunque ha sido utilizado en muy pocas ocasiones. Como<strong><em>\u00a0 Atributos Globales \u00a0<\/em>\u00a0<\/strong>est\u00e1 pensado para aplicaciones, y algunos usuarios siguen prefiriendo los atajos de teclado, este atributo no ha sido eliminado, y ahora est\u00e1 disponible para cualquier elemento.<br>\nPara evitar conflictos con otros atajos de teclado, o con los propios del navegador\u00a0<em>crear una pagina web<\/em>, ahora esta etiqueta permite asignar alternativas en este atributo. Un ejemplo incluido en la especificaci\u00f3n:<br>\n&lt;input type=\u201dsearch\u201d name=\u201dq\u201d accesskey=\u201ds 0\u2033&gt;<\/p>\n<p>Esto quiere decir que este elemento es accesible a trav\u00e9s de dos atajos de teclado, a trav\u00e9s de la tecla s o a trav\u00e9s de la tecla 0 (en ese orden).<\/p>\n<h5>CONTENTEDITABLE<\/h5>\n<p>Inventado por Microsoft, e implementado por el resto de los navegadores, la etiqueta contenteditable es ahora parte de la especificaci\u00f3n oficial.<br>\nLa introducci\u00f3n de esta etiqueta significa principalmente dos cosas:<\/p>\n<ul>\n<li>Primero, los usuarios pueden editar los contenidos de un elemento que incluya esta etiqueta. Este elemento debe ser seleccionable y el navegador debe proporcionar una marca que indique la posici\u00f3n actual del cursor.<\/li>\n<li>\u00a0segundo, es posible cambiar el formato del texto del contenido, a\u00f1adiendo negritas, cambiar la fuente, a\u00f1adir listas, etc\u00a0<em>sitio web<\/em>.<\/li>\n<\/ul>\n<p>Este atributo es de tipo booleano, por lo que su valor puede ser true o false. Al acceder desde JavaScript a este atributo, hay que tener en cuenta su notaci\u00f3n lowerCamelCase, siendo el nombre de la propiedad del DOM contentEditable. Adem\u00e1s, existe otra propiedad llamada isContentEditable, que indica si el elemento es editable o no\u00a0<em>como hacer una pagina web.<\/em><\/p>\n<p>Finalmente, el contenido que ha sido seleccionado por el usuario, puede ser objeto de modificaciones, como hemos comentado antes. A trav\u00e9s del comando element.execCommand() es posible indicar el tipo de modificaci\u00f3n (poner en negrita, copiar, cambiar la fuente\u2026), siempre que el documento se haya indicado como editable\u00a0<em>dise\u00f1o de pagina web<\/em>.<br>\ndocument.designMode = \u2018on\u2019;<br>\nSi se desea almacenar los cambios realizados en el contenido, es necesario enviarlo al servidor. No existe ning\u00fan API o m\u00e9todo en JavaScript que nos posibilite esta acci\u00f3n, por lo que debemos utilizar alg\u00fan tipo de tecnolog\u00eda tipo AJAX.<\/p>\n<h5>DATA-* (CUSTOM DATA ATTRIBUTES) HTML<\/h5>\n<p>5 permite crear atributos personalizados para los elementos. Estos atributos son utilizados para pasar informaci\u00f3n a JavaScript <strong><em>Atributos Globales\u00a0<\/em><\/strong>. Como veremos en el cap\u00edtulo correspondiente, hasta ahora se utilizaba el atributo class para de alguna manera almacenar informaci\u00f3n asociada con elementos, pero esto cambia radicalmente con estos atributos\u00a0<em>diseno de pagina web<\/em>.<\/p>\n<p>&lt;ul id=\u201dvegetable-seeds\u201d&gt;<\/p>\n<p>&lt;li data-spacing=\u201d10cm\u201d data-sowing-time=\u201dMarch to June\u201d&gt;Carrots&lt;\/li&gt;<\/p>\n<p>&lt;li data-spacing=\u201d30cm\u201d data-sowing-time=\u201dFebruary to March\u201d&gt;Celery&lt;\/li&gt;<\/p>\n<p>&lt;li data-spacing=\u201d3cm\u201d data-sowing-time=\u201dMarch to September\u201d&gt;Radishes&lt;\/li&gt;<\/p>\n<p>&lt;\/ul&gt;<\/p>\n<h5>\u00a0DRAGGABLE<\/h5>\n<p>Este atributo indica que el elemento indicado puede ser arrastable. Lo veremos en el cap\u00edtulo correspondiente<strong><em>\u00a0Atributos Globales\u00a0<\/em><\/strong><\/p>\n<h2><strong><em>Atributos Globales<\/em><\/strong><\/h2>\n<p><a href=\"https:\/\/www.facebook.com\/disenopaginaweb%C2%A0\">#AtributosGlobales<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Atributos Globales Atributos Globales \u00a0tambi\u00e9n incluye nuevos atributos globales que pueden ser asignados a cualquier elemento. Son los siguientes: ACCESSKEY El atributo accesskey permite a los desarrolladores especificar un atajo de teclado que permite activar un elemento a asignarle el foco. Este atributo ya exist\u00eda en HTML 4, aunque ha sido utilizado en muy pocas &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"ast-button\" href=\"https:\/\/disenoweb.mx\/blog\/atributos-globales\/\"> <span class=\"screen-reader-text\">Atributos Globales<\/span> Leer m\u00e1s \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":810,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","_joinchat":[],"footnotes":""},"categories":[1189,55],"tags":[754,64,717,48,128],"class_list":["post-7988","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo-web","category-diseno-web","tag-atributos-globales","tag-como-hacer-una-pagina-web","tag-crear-pagina-web","tag-diseno-de-pagina-web","tag-sitio-web"],"_links":{"self":[{"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/posts\/7988","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/comments?post=7988"}],"version-history":[{"count":0,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/posts\/7988\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/media?parent=7988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/categories?post=7988"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/tags?post=7988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}