{"id":5948,"date":"2016-04-12T11:24:02","date_gmt":"2016-04-12T09:24:02","guid":{"rendered":"http:\/\/giusseppe.net\/blog\/?p=5948"},"modified":"2016-04-12T11:26:13","modified_gmt":"2016-04-12T09:26:13","slug":"laconsulta-giusseppe-net","status":"publish","type":"post","link":"https:\/\/www.giusseppe.net\/blog\/archivo\/2016\/04\/12\/laconsulta-giusseppe-net\/","title":{"rendered":"laconsulta.giusseppe.net"},"content":{"rendered":"

\"laconsulta\"<\/a><\/p>\n

Por fin he terminado (quedar\u00e1 alg\u00fan fleco) el dise\u00f1o y\/o programaci\u00f3n de la web del proyecto La Consulta: Caso 30<\/a>.<\/p>\n

He logrado que sea visible en todo tipo de dispositivos<\/strong> optimizando su visionado en todos ellos, as\u00ed como en medios paginables (impresoras), haciendo incluso posible su impresi\u00f3n p\u00e1gina a p\u00e1gina sin separaci\u00f3n de p\u00e1rrafos o bloques de preguntas y respuestas.<\/p>\n

El color elegido para el men\u00fa superior de la versi\u00f3n m\u00f3vil (para pantallas de menos de 750 p\u00edxeles) ha sido casual y no causal, dado que lo encontr\u00e9 en un ejemplo y me gust\u00f3. Lo mantuve porque creo que los m\u00f3viles tienen cierta necesidad de color que, sin embargo, en las pantallas de ordenador resulta saturante.<\/p>\n

En lugar de la utilizaci\u00f3n de una imagen para el famoso icono \u00abhamburguesa<\/a>\u00ab, prefer\u00ed utilizar una letra griega (Xi) en may\u00fasculas, muy en consonancia con el resto del proyecto: Ξ<\/strong>.<\/p>\n

Otro tema que me tuvo muy perturbado era el de usar un dise\u00f1o que el posicionamiento de Google no viese mal (maldito SEO<\/a>), lo que conllevaba dejar de utilizar, entre otras cosas, mis amados frames y framesets<\/a>, \u00f3ptimos para men\u00fas y pies de p\u00e1gina o para ventanas laterales fijas, pero que dado el desarrollo del posicionamiento en pantalla mediante CSS parecen obsoletos, casi como yo.<\/p>\n

As\u00ed que prescind\u00ed de ellos, pero hab\u00eda algo que no me gustaba de esta nueva forma y era el tener que repetir \u00abc\u00f3digo\u00bb HTML en cada uno de los ficheros o p\u00e1ginas est\u00e1ticas de las que est\u00e1 compuesta la web en cuesti\u00f3n.<\/p>\n

No quer\u00eda pasar por la utilizaci\u00f3n de JavaScript (por dar soporte a los usuarios m\u00e1s paranoicos posibles) y baraj\u00e9 la opci\u00f3n de usar PHP o, incluso, alg\u00fan tipo de aplicaci\u00f3n en el servidor, pero me parec\u00eda realmente matar moscas a ca\u00f1onazos<\/em>. Termin\u00e9 optando por una soluci\u00f3n de compromiso que, no obstante, me resulta interesante:<\/p>\n

\r\n<!-- Men\u00fa superior -->\t\r\n<noscript>\r\n  <iframe id=\"cabecera\" src=\"topmenu.html\"><\/iframe>\r\n<\/noscript>\r\n<script type=\"text\/javascript\">\r\n  creaheader(); \/\/ Crea men\u00fa - top (logo-header y nav)\r\n<\/script><\/pre>\n
Naturalmente, la secci\u00f3n correspondiente al footer<\/em>, est\u00e1 resuelta de la misma manera.<\/p>\n
La funci\u00f3n creaheader<\/strong>() est\u00e1 definida en un archivo llamado laconsulta.js en el siguiente fragmento:<\/p>\n
\/\/ Funciones para crear men\u00fa navegador de la p\u00e1gina web\r\n\r\n\/\/ Funci\u00f3n que crea un men\u00fa de cabecera\r\nfunction creanav() {\r\n  var text= '<nav>' +\r\n    '<ul>' +\r\n      '<li class=\"submenu\"><a href=\"genesis.html\">G\u00e9nesis<\/a>' +\r\n      '<ul class=\"children\">' +\r\n        '<li><a href=\"genesis.html\">a<\/a><\/li>' +\r\n        '<li><a href=\"laconsulta.html\">b<\/a><\/li>' +\r\n        '<li><a href=\"origen.html\">c<\/a><\/li>' +\r\n      '<\/ul><\/li>' +\r\n      '<li class=\"submenu\"><a href=\"exodo.html\">\u00c9xodo<\/a>' +\r\n      '<ul class=\"children\">' +\r\n        '<li><a href=\"exodo.html\">x<\/a><\/li>' +\r\n        '<li><a href=\"exodoexit.html\">&omega;<\/a><\/li>' +\r\n      '<\/ul><\/li>' +\r\n      '<li class=\"submenu\"><a href=\"levitico.html\">Lev\u00edtico<\/a>' +\r\n      '<ul class=\"children\">' +\r\n        '<li><a href=\"levitico.html\">&alpha;<\/a><\/li>' +\r\n        '<li><a href=\"leviticodetalle.html\">&beta;<\/a><\/li>' +\r\n        '<li><a href=\"leviticopeaton.html\">&gamma;<\/a><\/li>' +\r\n        '<li><a href=\"leviticoinversion.html\">&delta;<\/a><\/li>' +\r\n      '<\/ul><\/li>' +\r\n      '<li class=\"submenu\"><a href=\"numeros.html\">N\u00fameros<\/a>' +\r\n\t'<ul class=\"children\">' +\r\n        '<li><a href=\"numeros.html\">1<\/a><\/li>' +\r\n        '<li><a href=\"numerosh.html\">e<\/a><\/li>' +\r\n        '<li><a href=\"numeroslibro.html\">&pi;<\/a><\/li>' +\r\n        '<li><a href=\"numerosapp.html\">i<\/a><\/li>' +\r\n      '<\/ul><\/li>' +\r\n      '<li class=\"submenu\"><a href=\"deuteronomio.html\">Deuteronomio<\/a>' +\r\n      '<ul class=\"children\">' +\r\n        '<li><a href=\"deuteronomio.html\">&#1488;<\/a><\/li>' +\r\n        '<li><a href=\"garbanzosfoto.html\">&#1489;<\/a><\/li>' +\r\n        '<li><a href=\"garbanzosvideo.html\">&#1490;<\/a><\/li>' +\r\n        '<li><a href=\"garbanzospresupuesto.html\">&#1491;<\/a><\/li>' +\r\n      '<\/ul><\/li>' +\r\n      '<\/ul>' +\r\n    '<\/nav>';\r\n  document.write(text);\r\n}\r\n\r\n\/\/ Funci\u00f3n que crea un logo-header lateral superior\r\nfunction crealogoheader() {\r\n  var text='<a id=\"logo-header\" href=\"index.html\">' +\r\n\t'<span class=\"site-name\">La Consulta Caso 30<\/span>' +\r\n\t'<span class=\"site-desc\">Giusseppe Dom\u00ednguez<\/span>' +\r\n  '<\/a> ';\r\n  document.write(text);\r\n}\r\n\/\/ Funci\u00f3n que crea un men\u00fa superior para m\u00f3viles\r\nfunction creamenubar() {\r\n  var text='<div class=\"menu_bar\">' +\r\n\t'<a href=\"#\" class=\"bt-menu\"><span>&Xi;<\/span>La Consulta Caso 30<\/a>' +\r\n  '<\/div>';\r\n  document.write(text);\r\n}\r\n\/\/ Funci\u00f3n que crea el header superior (men\u00fa top)\r\nfunction creaheader() {\r\n  document.write('<header>');\r\n  crealogoheader();\r\n  creamenubar();\r\n  creanav();\r\n  document.write('<\/header>');\r\n}\r\n<\/pre>\n
Y ya que estoy emocion\u00e1ndome con esto de mostrar c\u00f3digos, mostrar\u00e9 tambi\u00e9n el que uso para organizar los diferentes bloques de reglas de estilo CSS3, un gen\u00e9rico consulta.css que incluye cuando procede los distintos archivos css (para pantallas de PC, para m\u00f3viles, para impresoras):<\/p>\n
\/************************************************\r\nArchivo consulta.css para aplicar estilos de manera particular\r\nen los distintos medios de la web http:\/\/laconsulta.giusseppe.net\r\n************************************************\/\r\n@viewport {\r\n    zoom: 1.0;\r\n    width: device-width;\r\n}\r\n@import url(\"consultamovil.css\") only screen and (max-width: 750px);\r\n@import url(\"consultascr.css\") only screen and (min-width: 750px);\r\n@import url(\"consultaprint.css\") only print;\r\n<\/pre>\n
Estoy especialmente orgulloso de haber sido tan detallista como para que la impresi\u00f3n de algo tan complejo como esos \u00abacordeones\u00bb de preguntas y respuestas pueda ser realizada sin la ruptura de los bloques en p\u00e1ginas separadas, mediante la inclusi\u00f3n en el fichero acordeon.css<\/strong> de las siguientes l\u00edneas que evitan esa medida que habr\u00eda ocurrido de manera autom\u00e1tica:<\/p>\n
@media print {\r\n  .acordeon input { display: none; }\r\n  .acordeon label {\r\n    display: block;\r\n    color: white;\r\n    background: #666;\r\n  }\r\n  .pregunta-respuesta {\r\n    page-break-inside: avoid;\r\n  }\r\n}\r\n<\/pre>\n
Ahora s\u00e9 que ser\u00e1 una web poco visitada y que la obsesi\u00f3n por el posicionamiento SEO es absurda y ni hablar de las man\u00edas que vengo habiendo demostrado y mostrado durante este desarrollo, pero he aprendido bastante en el proceso y alguna de esas cosas ser\u00e1 reutilizada en un futuro no muy lejano cuando tenga que remodelar la web de la Asociaci\u00f3n Cultural Clave 53<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Por fin he terminado (quedar\u00e1 alg\u00fan fleco) el dise\u00f1o y\/o programaci\u00f3n de la web del proyecto La Consulta: Caso 30. He logrado que sea visible en todo tipo de dispositivos optimizando su visionado en todos ellos, as\u00ed como en medios paginables (impresoras), haciendo incluso posible su impresi\u00f3n p\u00e1gina a p\u00e1gina sin separaci\u00f3n de p\u00e1rrafos o … Read morelaconsulta.giusseppe.net<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[199,128,110],"tags":[83,67,112,204,76,98,181,87,130,105],"class_list":["post-5948","post","type-post","status-publish","format-standard","hentry","category-la-consulta","category-proyectos","category-tecnologia-opinion","tag-aida","tag-creatividad","tag-giusseppe","tag-html","tag-informatica","tag-internet","tag-jaime-vallaure","tag-modo-de-vida","tag-proyectos-2","tag-tecnologia"],"_links":{"self":[{"href":"https:\/\/www.giusseppe.net\/blog\/wp-json\/wp\/v2\/posts\/5948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.giusseppe.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.giusseppe.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.giusseppe.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.giusseppe.net\/blog\/wp-json\/wp\/v2\/comments?post=5948"}],"version-history":[{"count":4,"href":"https:\/\/www.giusseppe.net\/blog\/wp-json\/wp\/v2\/posts\/5948\/revisions"}],"predecessor-version":[{"id":5953,"href":"https:\/\/www.giusseppe.net\/blog\/wp-json\/wp\/v2\/posts\/5948\/revisions\/5953"}],"wp:attachment":[{"href":"https:\/\/www.giusseppe.net\/blog\/wp-json\/wp\/v2\/media?parent=5948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.giusseppe.net\/blog\/wp-json\/wp\/v2\/categories?post=5948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.giusseppe.net\/blog\/wp-json\/wp\/v2\/tags?post=5948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}