{"id":1337,"date":"2019-06-18T17:50:30","date_gmt":"2019-06-18T17:50:30","guid":{"rendered":"http:\/\/maquetando.com\/?p=1337"},"modified":"2019-06-18T17:53:42","modified_gmt":"2019-06-18T17:53:42","slug":"utiliza-designmode-editar-sitio-tiempo-real-directamente-desde-navegador","status":"publish","type":"post","link":"https:\/\/orpot.com\/blog\/utiliza-designmode-editar-sitio-tiempo-real-directamente-desde-navegador\/","title":{"rendered":"Utiliza el \u00abdesignMode\u00bb para editar un sitio en tiempo real directamente desde el navegador."},"content":{"rendered":"<p>Imagina una forma de hacer el todo texto de un sitio web \u00abeditable\u00bb claro que lo podr\u00edamos hacer con contentEditable en cada elemento pero\u00a0 eso puede ser posible con una linea de c\u00f3digo que debes pegar en la consola del navegador , es de verdadera ayuda cuando necesitamos probar textos sin estar modificando el c\u00f3digo fuente, tambi\u00e9n podemos obtener esos cambios\u00a0 con un poco de javascript y podr\u00edamos actualizar el mismo c\u00f3digo directamente desde el browser, algo como lo que hace medium.com.<\/p>\n<p>Es muy \u00fatil cuando :<\/p>\n<ul>\n<li>Requieres mostrar a\u00a0 un cliente el cambio rapido en un texto.<\/li>\n<li>Editar un sitio web para que tu dise\u00f1ador sepa lo que quieres<\/li>\n<li>Haz que tu cuenta bancaria parezca que tiene 100 millones de d\u00f3lares en ella.<\/li>\n<\/ul>\n<p>Descubr\u00ed este truco hace a\u00f1os pero no era soportado por la mayor\u00eda de navegadores,\u00a0 hoy lo he probado con Edge,Firefox,Chrome y Opera funciona y te\u00a0 permite realizar ediciones s\u00faper r\u00e1pidas de cualquier p\u00e1gina web en tiempo real.<\/p>\n<p>Esto es lo que har\u00e1s:<\/p>\n<ul>\n<li>Abres las herramientas de desarrollador<\/li>\n<li>Buscas la pesta\u00f1a \u00abconsole\u00bb<\/li>\n<li>Pegas esta linea :\u00a0 document.designMode=&#8217;on&#8217;<\/li>\n<li>Observas la magia.<\/li>\n<\/ul>\n<p>Tambi\u00e9n puedes hacerlo con Javascript directamente en el c\u00f3digo de la pagina a editar, es muy f\u00e1cil.<\/p>\n<p>Int\u00e9ntalo. Funciona en cualquier p\u00e1gina web, incluso en esta.<\/p>\n<div style=\"width: 638px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-1337-1\" width=\"638\" height=\"360\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"http:\/\/maquetando.com\/wp-content\/uploads\/2019\/06\/designMode.mp4?_=1\" \/><a href=\"http:\/\/maquetando.com\/wp-content\/uploads\/2019\/06\/designMode.mp4\">http:\/\/maquetando.com\/wp-content\/uploads\/2019\/06\/designMode.mp4<\/a><\/video><\/div>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Imagina una forma de hacer el todo texto de un sitio web \u00abeditable\u00bb claro que&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1339,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,2],"tags":[158,157,159],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1337"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=1337"}],"version-history":[{"count":5,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1337\/revisions"}],"predecessor-version":[{"id":1344,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1337\/revisions\/1344"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media\/1339"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=1337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=1337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=1337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}