Deprecated: Creation of dynamic property wpdb::$categories is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/wp-db.php on line 760

Deprecated: Creation of dynamic property wpdb::$post2cat is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/wp-db.php on line 760

Deprecated: Creation of dynamic property wpdb::$link2cat is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/wp-db.php on line 760

Deprecated: Using ${var} in strings is deprecated, use {$var} instead in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/comment-template.php on line 1745

Deprecated: wp_getimagesize(): Implicitly marking parameter $image_info as nullable is deprecated, the explicit nullable type must be used instead in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/media.php on line 5180

Deprecated: Creation of dynamic property POMO_FileReader::$is_overloaded is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/pomo/streams.php on line 26

Deprecated: Creation of dynamic property POMO_FileReader::$_pos is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/pomo/streams.php on line 29

Deprecated: Creation of dynamic property POMO_FileReader::$_f is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/pomo/streams.php on line 160

Deprecated: Creation of dynamic property MO::$_gettext_select_plural_form is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/pomo/translations.php on line 293



Deprecated: Creation of dynamic property WP_Block_Type::$skip_inner_blocks is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-block-type.php on line 357

Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/wp-db.php:760) 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-includes/wp-db.php:760) 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-includes/wp-db.php:760) 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-includes/wp-db.php:760) 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-includes/wp-db.php:760) 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-includes/wp-db.php:760) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719

Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378

Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379

Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380

Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381

Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382

Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383

Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378

Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379

Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380

Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381

Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382

Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383

Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378

Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379

Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380

Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381

Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382

Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383

Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378

Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379

Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380

Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381

Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382

Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383

Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/wp-db.php:760) 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-includes/wp-db.php:760) 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}]}}