Deprecated: Return type of Requests_Cookie_Jar::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 63

Deprecated: Return type of Requests_Cookie_Jar::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 73

Deprecated: Return type of Requests_Cookie_Jar::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 89

Deprecated: Return type of Requests_Cookie_Jar::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 102

Deprecated: Return type of Requests_Cookie_Jar::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 111

Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 40

Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 51

Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 68

Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 82

Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 91

Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719

Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719

Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719

Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719

Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719

Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719

Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719

Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719
{"id":529,"date":"2015-01-26T20:15:01","date_gmt":"2015-01-26T18:15:01","guid":{"rendered":"https:\/\/www.pcpolis.es\/blog\/?p=529"},"modified":"2017-09-10T12:12:09","modified_gmt":"2017-09-10T10:12:09","slug":"web-adaptable-responsive","status":"publish","type":"post","link":"https:\/\/www.pcpolis.es\/blog\/css\/web-adaptable-responsive\/","title":{"rendered":"Web adaptable ( Responsive )"},"content":{"rendered":"<p><img loading=\"lazy\" class=\"size-full wp-image-532 alignnone\" style=\"border: 0px none;\" title=\"responsive\" src=\"https:\/\/www.pcpolis.es\/blog\/wp-content\/upLoads\/responsive.jpg\" alt=\"responsive\" width=\"500\" height=\"332\" srcset=\"https:\/\/www.pcpolis.es\/blog\/wp-content\/upLoads\/responsive.jpg 500w, https:\/\/www.pcpolis.es\/blog\/wp-content\/upLoads\/responsive-300x199.jpg 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<h3>01 Introducci\u00f3n<\/h3>\n<p>La aparici\u00f3n de dispositivos cada vez m\u00e1s peque\u00f1os con acceso a internet ha traido consigo la necesidad de adaptar las Webs, utilizando el c\u00f3digo que en los \u00faltimos tiempos ha surgido para cubrir esta necesidad. Estoy hablando de HTML5, CSS3 y, como no, del siempre \u00fatil del lado del cliente JavaScript. He resumido los pasos, pero abajo tienes el videotutorial que me ha servido de gu\u00eda.<\/p>\n<h3>02 Pasos para hacer la web adaptable ( responsive design )<\/h3>\n<p style=\"padding-left: 30px;\"><strong>HTML<\/strong><\/p>\n<p style=\"padding-left: 30px;\">Lo primero es colocar en la cabecera html (head) la etiqueta de nombre \u00ab<a title=\"Etiqueta viewport\" href=\"https:\/\/developer.mozilla.org\/es\/docs\/M%C3%B3vil\/Viewport_meta_tag\" target=\"_blank\">viewport<\/a>\u00ab,\u00a0 (todo el d\u00f3digo est\u00e1 abajo), que permitir\u00e1 definir la \u00abventana\u00bb correcta, dependiendo del dispositivo. Tambi\u00e9n habr\u00e1 que agregar el c\u00f3digo de la capa que contendr\u00e1 un men\u00fa alternativo para resoluciones peque\u00f1as, se puede colocar justo antes de la capa que contiene el men\u00fa actual.<\/p>\n<p style=\"padding-left: 30px;\">Si usamos <a title=\"font aweson\" href=\"http:\/\/fortawesome.github.io\/Font-Awesome\/\" target=\"_blank\">Font-aweson<\/a> para el icono, agregar en la cabecera (head) el enlace a la hoja de estilos de Font-aweson. Previamente se deben haber descargado y  situado estos ficheros en la web.<\/p>\n<p style=\"padding-left: 30px;\"><strong>CSS<\/strong><\/p>\n<p style=\"padding-left: 30px;\">Incluir las Media Queries en la hoja de estilos, con las  modificaciones necesarias.  Lo que intentamos conseguir es lo siguiente:  cuando un dispositivo tenga una resoluci\u00f3n inferior a 500 pixeles , por  ejemplo,  se ocultar\u00e1 o desplazar\u00e1 el men\u00fa actual y se mostrar\u00e1 la  nueva capa, mucho m\u00e1s simple, que incluye el texto e iconos  identificativos. Al pulsar sobre el icono, aparecer\u00e1n todos los  elementos del men\u00fa que ten\u00edamos previamente, pero adaptados a las nuevas  medidas. Esto lo conseguimos con Javascript, espec\u00edficamente con su  librer\u00eda jquery.<\/p>\n<p style=\"padding-left: 30px;\"><strong>JQuery<\/strong><\/p>\n<p style=\"padding-left: 30px;\">Agregar el c\u00f3digo javascrip necesario para cargar la biblioteca Jquery y  el archivo menu_responsive.js, con las funciones que permitir\u00e1n alternar entre men\u00fas. Este c\u00f3digo se coloca justo antes del cierre de la equiqueta html body.<\/p>\n<h3>03 Conclusi\u00f3n<\/h3>\n<p>A continuaci\u00f3n tienes el c\u00f3digo para un ejemplo sencillo de Men\u00fa adaptable, pero es s\u00f3lo una referencia que deber\u00e1s sustituir seg\u00fan tus propias necesidades. Por ejemplo, en el caso de este blog, como todos los enlaces eat\u00e1n dentro de la columna derecha, la he considerado como la capa de men\u00fa.<\/p>\n<p>Recuerda que las etiquetas de los iconos tambi\u00e9n deben llevar sus propias clases seg\u00fan las intrucciones que encontrar\u00e1s en la p\u00e1gina de Font Awesome.<\/p>\n<h5>Fuentes \/ Recursos<\/h5>\n<p><a href=\"http:\/\/fortawesome.github.io\/Font-Awesome\/\" target=\"_blank\">Font aweson &gt;<\/a> |<a href=\"https:\/\/www.youtube.com\/watch?v=EB4BG3QZn3o\" target=\"_blank\"> videotutorial &gt;<\/a> | <a href=\"https:\/\/www.youtube.com\/watch?v=fA1NW-T1QXc\" target=\"_blank\">videotutorial\u00a0 (ingl\u00e9s)&gt;<\/a> | <a href=\"http:\/\/www.w3schools.com\/cssref\/css3_pr_mediaquery.asp\" target=\"_blank\">Media queries<\/a> | <a href=\"http:\/\/www.w3schools.com\/cssref\/pr_pos_clip.asp\" target=\"_blank\">CSS clip Property<\/a> (para recortar im\u00e1genes) |<\/p>\n<h6>Ver C\u00f3digo <a title=\"Pulse para ver el c\u00f3digo\" onclick=\"return hide('mostrar_ocultar');\" href=\"#\">(+\/-)<\/a><\/h6>\n<div id=\"mostrar_ocultar\">\n<h2>HTML<\/h2>\n<pre class=\"brush:xhtml\">Menu adaptable (responsive)\r\n<!--Colocar dentro de la etiqueta html <head>-->\r\n\r\n<!--Colocar dentro de la etiqueta <body>-->\r\n<div class=\"menu_bar\"><a class=\"btn_menu\" href=\"#\"><em class=\"fa fa-bars\"><\/em>Men\u00fa<\/a><\/div>\r\n<ul>\r\n\t<li><a href=\"#\"><em class=\"fa fa-home\"><\/em>Inicio<\/a><\/li>\r\n\t<li><a href=\"#\"><em class=\"fa fa-briefcase\"><\/em>Trabajos<\/a><\/li>\r\n\t<li><a href=\"#\"><em class=\"fa fa-line-chart\"><\/em>Proyectos<\/a><\/li>\r\n\t<li><a href=\"#\"><em class=\"fa fa-cubes\"><\/em>Servicios<\/a><\/li>\r\n\t<li><a href=\"#\"><em class=\"fa fa-envelope\"><\/em>Contactar<\/a><\/li>\r\n<\/ul>\r\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at sapien tempor, placerat augue sit amet, luctus odio. Morbi tempor sem quis arcu lacinia, sit amet finibus magna venenatis. Nam ac sem et sem vulputate semper. Curabitur justo tellus, pretium at consequat vel, fermentum in arcu. Integer sit amet mi in turpis maximus egestas. Donec ornare pharetra ultrices. Cras tristique non nunc eget condimentum. Ut neque orci, elementum id mattis non, pellentesque quis lectus. Aliquam at risus metus. Mauris eleifend nunc non tellus blandit luctus. Phasellus consectetur rutrum dolor, non interdum arcu vulputate non. Donec interdum sagittis vestibulum. Proin facilisis porta diam, in condimentum risus maximus a. Phasellus lorem dolor, lacinia sit amet sagittis in, commodo in urna.\r\n\r\n<!--Colocar antes del cierre de la etiqueta <\/body> -->\r\n<script src=\"http:\/\/code.jquery.com\/jquery-latest.js\"><!--mce:0--><\/script>\r\n<script src=\"menu_responsive.js\"><!--mce:1--><\/script><\/pre>\n<h2>CSS<\/h2>\n<pre class=\"brush:xhtml\">\/* estilos.css *\/\r\n\r\n* {\r\n\tmargin:0;\r\n\tpadding:0;\r\n}\r\n\r\nbody\t{\r\n\tbackgrond:#fffffa;\r\n}\r\n\r\np\t{\r\n\tmargin-bottom:1em;\r\n}\r\n\r\nsection\t{\r\n\twidth:90%;\r\n\tmin-width:320px;\r\n\tmargin:0 auto;\r\n\tpadding-top:40px;\r\n}\r\n\r\nheader\t{\r\n\twidth:100%;\r\n}\r\n\r\nheader nav\t{\r\n\tleft:-100%;\r\n\twidth:90%;\r\n\tmax-width:1000px;\r\n\tmargin:20px auto;\r\n\tbackground:#024956;\r\n\toverflow:hidden;\r\n}\r\n\r\n.menu_bar {\r\n\tdisplay:none;\r\n}\r\n\r\nul\t{\r\n\toverflow:hidden;\r\n}\r\n\r\nul li {\r\n\tlist-style:none;\r\n\tfloat:left;\r\n\toverflow:hidden;\r\n}\r\n\r\nul li a {\r\n\tfont:Arial, Helvetica, sans-serif;\r\n\tfont-size:18px;\r\n\tcolor:#CCCCFF;\r\n\ttext-decoration:none;\r\n\tpadding:20px;\r\n\tdisplay:block;\r\n}\r\n\r\nul li a:hover {\r\n\tbackground: #037e8c;\r\n}\r\n\r\nul li a i {\r\n\tpadding-right:7px;\r\n}\r\n\r\n@media screen and (max-width:720px) {\r\n\theader nav {\r\n\twidth:80%;\r\n\theight:100%;\r\n\tmargin: 65px 0 0;\r\n\tposition:fixed;\r\n\t}\r\n\r\n\theader nav li\t{\r\n\t\tdisplay:block;\r\n\t\tfloat:none;\r\n\t\tborder-bottom:1px solid rgba(255,255,255, .3);\r\n\t}\r\n\r\n\t.menu_bar {\r\n\t\tdisplay:block;\r\n\t\tposition:fixed;\r\n\t\twidth:100%;\r\n\t\tbackground:#037e8c;\r\n\t}\r\n\r\n\t.menu_bar .btn_menu {\r\n\t\tdisplay:block;\r\n\t\tpadding:20px;\r\n\t\tbackground: #037e8c;\r\n\t\tcolor:#FFFFFF;\r\n\t\ttext-decoration:none;\r\n\t\tfont-weight:bold;\r\n\t\ttext-transform: uppercase;\r\n\t\tfont-family:Arial, Helvetica, sans-serif;\r\n\t\tfont-size:22px;\r\n\t\tbox-sizing:border-box;\r\n\t\tletter-spacing: 0.5em;\r\n\t}\r\n\r\n\t.menu_bar .btn_menu i\t{\r\n\tfloat: right;\r\n\tfont-size:32px;\r\n\t}\r\n\r\n\tsection {\r\n\tpadding-top: 75px; \/*Para que el texto no quede oculto tras fijar el men\u00fa*\/\r\n\t}\r\n}<\/pre>\n<h2>JQuery<\/h2>\n<pre class=\"brush:xhtml\">\/\/ menu_responsive.js\r\n\r\n$(document).ready(main);\r\n\r\nvar contador = 1 ;\r\n\r\nfunction main(){\r\n\t$('.menu_bar').click(function(){\r\n\t\t\/\/$('nav').toggle(); opci\u00f3n simple, sin variable contador\r\n\t\tif(contador == 1){\r\n\t\t\t$('nav').animate({\r\n\t\t\tleft: '0'\r\n\t\t\t});\r\n\t\t\tcontador = 0;\r\n\t\t} else {\r\n\t\t\tcontador = 1;\r\n\t\t\t$('nav').animate({\r\n\t\t\t\tleft: '-100%'\r\n\t\t\t});\r\n\t\t}\r\n\t});\r\n}<\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>01 Introducci\u00f3n La aparici\u00f3n de dispositivos cada vez m\u00e1s peque\u00f1os con acceso a internet ha traido consigo la necesidad de adaptar las Webs, utilizando el c\u00f3digo que en los \u00faltimos tiempos ha surgido para cubrir esta necesidad. Estoy hablando de HTML5, CSS3 y, como no, del siempre \u00fatil del lado del cliente JavaScript. He resumido [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[15,19],"tags":[],"_links":{"self":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/529"}],"collection":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/comments?post=529"}],"version-history":[{"count":68,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/529\/revisions"}],"predecessor-version":[{"id":573,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/529\/revisions\/573"}],"wp:attachment":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/media?parent=529"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/categories?post=529"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/tags?post=529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}