{"id":1737,"date":"2019-11-19T18:22:01","date_gmt":"2019-11-19T23:22:01","guid":{"rendered":"https:\/\/e-lexia.com\/blog\/?p=1737"},"modified":"2024-11-01T11:31:40","modified_gmt":"2024-11-01T16:31:40","slug":"cuanto-toma-crear-sitio-web","status":"publish","type":"post","link":"https:\/\/e-lexia.com\/blog\/cuanto-toma-crear-sitio-web\/","title":{"rendered":"Un sitio web no se dise\u00f1a en un mes"},"content":{"rendered":"<p>A mediados de la d\u00e9cada del 2000, cuando estaba tomando forma e-Lexia.com, una de las preguntas m\u00e1s frecuentes que me llegaban era: \u00bf<strong>cu\u00e1nto cuesta crear una p\u00e1gina web?<\/strong> Acto seguido, el cuestionario lanzaba esta otra perla: <strong>\u00bfcu\u00e1nto demora crearla?<\/strong><\/p>\n<p>En un af\u00e1n por ser did\u00e1ctico con el cliente, trataba de explicar que el dise\u00f1o y la producci\u00f3n de un sitio web dependen de diferentes factores, y por ende establecer un precio \u201ca vuelo de p\u00e1jaro\u201d era irresponsable. Y a\u00fan hoy respondo lo mismo.<\/p>\n<p>Al final, la respuesta a estas dos preguntas es \u201cdepende\u201d. Pero, como dice Jarabe de Palo, \u00bfde qu\u00e9 depende?<\/p>\n<p><!-- Google Adsense --><\/p>\n<div class=\"adsense\">\n  <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7923590131153633\" crossorigin=\"anonymous\"><\/script><br \/>\n  <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-7923590131153633\" data-ad-slot=\"5345374831\"><\/ins><br \/>\n  <script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>\n<\/div>\n<h2>Usted quiere una p\u00e1gina o un sitio web<\/h2>\n<p>Con algo de paciencia, lo primero que tratamos de conocer es el alcance del proyecto: la pregunta inicial hace referencia a una p\u00e1gina web, pero en e-Lexia.com abordamos la solicitud como un sitio web.<\/p>\n<p>Y no es que seamos ambiciosos o ventajosos, sino que procuramos dejar claro cualquier aspecto desde el principio.<\/p>\n<p>Tengamos presente que la p\u00e1gina web es un \u00fanico recurso (hipertextual y multimedia, s\u00ed) que se puede conectar con otras unidades de informaci\u00f3n que no hacen parte del proyecto actual.<\/p>\n<p>Por su parte, <strong>el sitio web se entiende como una colecci\u00f3n de p\u00e1ginas web<\/strong> que se conectan entre ellas y hacen parte del mismo proceso de dise\u00f1o y producci\u00f3n.<\/p>\n<p>Para ampliar la explicaci\u00f3n: es diferente el dise\u00f1o de la portada a la maquetaci\u00f3n de un libro que supera las 200 p\u00e1ginas. Un escenario es una p\u00e1gina y otro diferente es un sitio web que agrupa 200 p\u00e1ginas.<\/p>\n<p>En el siguiente video profundizo en el tema:<\/p>\n<div class=\"marco-yt\">\n<div class=\"video-yt\">\n<iframe loading=\"lazy\" title=\"\u00bfQu\u00e9 es una p\u00e1gina web? \u00bfQu\u00e9 es un sitio web? \u00bfQu\u00e9 es un portal web? | [ECD]\" width=\"774\" height=\"435\" src=\"https:\/\/www.youtube.com\/embed\/vSmAMZCVW_E?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div>\n<\/div>\n<p class=\"youtube-video\"><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/logo-youtube.png\">En el <a href=\"https:\/\/www.youtube.com\/@escuela-digital?sub_confirmation=1\" target=\"_blank\" rel=\"noopener\">canal YouTube \u00abEscuela Digital\u00bb<\/a> puedes encontrar m\u00e1s videos sobre el tema.<\/p>\n<p>Ya est\u00e1 la primera variable del \u201cdepende\u201d.<\/p>\n<h2>Y qu\u00e9 hay de los contenidos web<\/h2>\n<p>Lo que sigue es aclarar qu\u00e9 contenidos presentara el sitio web.<\/p>\n<p>En e-Lexia.com contamos con la capacidad de producir contenidos in\u00e9ditos y optimizados para entornos electr\u00f3nicos. <a href=\"http:\/\/e-lexia.com\/comunicacion-corporativa.html\" rel=\"noopener noreferrer\" target=\"_blank\">Esta es una de las l\u00edneas de trabajo<\/a>. Sin embargo, algunos clientes mencionan tener toda la informaci\u00f3n y, seg\u00fan ellos, lo \u00fanico que hace falta es \u00abcopiar \/ pegar\u00bb.<\/p>\n<p>En el mejor escenario, esta situaci\u00f3n beneficia el proyecto, pues la fase de contenidos es la m\u00e1s extensa en cualquier proyecto comunicativo. Pero \u00bfser\u00e1 que la informaci\u00f3n est\u00e1 optimizada para el medio? En algunos casos no.<\/p>\n<p>Hay que considerar el hecho que gestionar contenidos, independiente del medio, exige validaciones y ajustes, en temas como la narrativa, el formato, la extensi\u00f3n y la organizaci\u00f3n.<\/p>\n<p>Ahora, escribir para la web no es el mismo ejercicio que exige un medio de comunicaci\u00f3n impreso o audiovisual. No es que sea m\u00e1s f\u00e1cil o dif\u00edcil, simplemente es diferente. Por ejemplo, en la web se considera como hito las caracter\u00edsticas de <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/indexacion-web\/\" rel=\"noopener\" target=\"_blank\">indexaci\u00f3n<\/a> (o SEO) que posee un recurso.<\/p>\n<p>As\u00ed, el hecho que una empresa tenga la informaci\u00f3n lista para publicaci\u00f3n no es garant\u00eda que todo est\u00e9 en orden. <strong>Siempre es necesario dar una revisi\u00f3n<\/strong>. Y esto toma tiempo.<\/p>\n<h2>La experiencia de uso<\/h2>\n<p>Superado el asunto del alcance y los contenidos se aborda el proceso de la arquitectura de la informaci\u00f3n.<\/p>\n<p>Para P\u00e9rez-Montoro (2010) en su libro \u201cArquitectura de la informaci\u00f3n en entornos web\u201d, este concepto es:<\/p>\n<blockquote><p>Disciplina encargada de estructurar, organizar y etiquetar los elementos que conforman los entornos informacionales, para facilitar de esta manera la localizaci\u00f3n (o el acceso) de la informaci\u00f3n contenida en ellos y mejorar, as\u00ed, su utilidad y su aprovechamiento por parte de los usuarios.<\/p><\/blockquote>\n<p>En palabras sencillas, la arquitectura de la informaci\u00f3n se ocupa de crear:<\/p>\n<ul>\n<li>Los sistemas de navegaci\u00f3n, tanto funcionales como no funcionales.<\/li>\n<li>Los sistemas de organizaci\u00f3n de contenidos, entendidos como las categor\u00edas que agrupar\u00e1n datos comunes.<\/li>\n<li>Los sistemas de etiquetado, que se refiere a la folksonom\u00eda o utilizaci\u00f3n de palabras claves para asociar contenidos similares a trav\u00e9s de perspectivas de navegaci\u00f3n.<\/li>\n<li>Los sistemas de b\u00fasqueda, que pueden ser reactivos (dependen de una acci\u00f3n expl\u00edcita del usuario) y proactivos (ofrecen informaci\u00f3n sin que el usuario tenga que solicitarla).<\/li>\n<\/ul>\n<p>As\u00ed pues, la arquitectura de la informaci\u00f3n se refiere a las bases, a los cimientos del sitio web. Una falla en este tema puede afectar la experiencia de uso por parte del usuario y producir errores de comprensi\u00f3n sem\u00e1ntica en sistemas de recuperaci\u00f3n e indexaci\u00f3n de recursos en l\u00ednea.<\/p>\n<p>Esta tarea requiere cuidado y tiempo. La arquitectura no es, como me dir\u00eda uno de los concejales electos de la ciudad Medell\u00edn (Colombia) cuando me solicitaba definir la estructura de un <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/aula-virtual\/\" rel=\"noopener\" target=\"_blank\">aula virtual<\/a>:<\/p>\n<blockquote><p>\u201cNo se enrede. Yo le entrego la clave del aula virtual del director administrativo, que es estudiante virtual de una universidad mexicana. Usted ingresa y mira cu\u00e1les son los enlaces, y listo: eso que dice all\u00e1, pues lo hacemos ac\u00e1\u201d.<\/p><\/blockquote>\n<p><!-- ASESOR COMUNICATIVO --><\/p>\n<div class=\"destacado-asesor\">\n<div class=\"destacado-asesor__imagen\">\n    <a href=\"https:\/\/e-lexia.com\/contacto.html\"><br \/>\n      <img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2023\/01\/asesor-comunicativo-juancadotcom.png\" alt=\"Juan Carlos Morales S., asesor en comunicaci\u00f3n digital\"><br \/>\n    <\/a>\n   <\/div>\n<div class=\"destacado-asesor__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/contacto.html\">\u00bfNecesitas asesor\u00eda en comunicaci\u00f3n digital?<\/a><\/h2>\n<p>Dise\u00f1a y optimiza tus proyectos en comunicaci\u00f3n digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.<br \/>\n      <a class=\"cta-asesor\" href=\"https:\/\/e-lexia.com\/contacto.html\">Conversemos<\/a>\n     <\/p>\n<\/p><\/div>\n<\/div>\n<h2>Bonito e incluyente<\/h2>\n<p>Uno de los componentes del proyecto que mayor atenci\u00f3n obtiene del cliente es la apariencia del sitio web. Y es casi necesario, pues aqu\u00ed entra en juego la marca y el mensaje que se quiere transmitir.<\/p>\n<p>Los caminos son dos: crear una interfaz propia, que responda a todas las necesidades (y sue\u00f1os) del cliente, o adaptar un recurso (libre o comercial) que supla el mayor n\u00famero de expectativas funcionales.<\/p>\n<p>\u00bfQu\u00e9 exige la definici\u00f3n de la interfaz o \u2018<em>look and feel<\/em>\u2019? Aqu\u00ed algunas consideraciones:<\/p>\n<ul>\n<li>La disposici\u00f3n de los elementos, desde la cuadricula general (<em>grid<\/em>) hasta la flotaci\u00f3n de las im\u00e1genes sobre el texto.<\/li>\n<li>La definici\u00f3n de la paleta de colores web, pues los colores para impresos (base del manual de identidad de algunas marcas) no necesariamente funcionan correctamente en pantalla.<\/li>\n<li>La selecci\u00f3n de la iconograf\u00eda, que sirve como atributos de comprensi\u00f3n y navegaci\u00f3n.<\/li>\n<li>El dise\u00f1o de diferentes consultas de medios, para permitir una experiencia visual coherente en diferentes tipos de pantallas.<\/li>\n<\/ul>\n<p>A prop\u00f3sito, en mi canal YouTube compart\u00ed una sesi\u00f3n sobre qu\u00e9 es el <em><a href=\"https:\/\/e-lexia.com\/diccionario-tic\/responsive-web-design\/\" rel=\"noopener\" target=\"_blank\">Responsive Web Design<\/a><\/em> y, a trav\u00e9s de un ejemplo, c\u00f3mo lograrlo:<\/p>\n<div class=\"marco-yt\">\n<div class=\"video-yt\">\n<iframe loading=\"lazy\" title=\"Responsive Web Design. Primeros pasos en la t\u00e9cnica de dise\u00f1o digital | [EPW]\" width=\"774\" height=\"435\" src=\"https:\/\/www.youtube.com\/embed\/WM_rkfebaEo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div>\n<\/div>\n<p class=\"youtube-video\"><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/logo-youtube.png\">En el <a href=\"https:\/\/www.youtube.com\/@escuela-digital?sub_confirmation=1\" target=\"_blank\" rel=\"noopener\">canal YouTube \u00abEscuela Digital\u00bb<\/a> puedes encontrar m\u00e1s videos sobre el tema.<\/p>\n<p>Luego de lo bonito viene lo incluyente.<\/p>\n<p>Esta cualidad se refiere al esfuerzo en <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/accesibilidad-web\/\" rel=\"noopener\" target=\"_blank\">producci\u00f3n accesible<\/a>, es decir, a las caracter\u00edsticas del sitio web y sus contenidos para permitir que personas en condiciones tecnol\u00f3gicas y f\u00edsicas especiales puedan tener una experiencia igual a los usuarios regulares.<\/p>\n<p>\u00bfC\u00f3mo se logra esto? Una gu\u00eda fundamental son las \u00ab<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/\" rel=\"noopener noreferrer\" target=\"_blank\">Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1<\/a>\u00ab, establecidas por el Consorcio World Wide Web (W3C). Estas establecen tres niveles de desarrollo (A, AA, AAA) y solo lograr el primer nivel toma tiempo, mucho tiempo\u2026 m\u00e1s de un mes.<\/p>\n<h2>Conclusi\u00f3n<\/h2>\n<p>S\u00ed, es posible hacer un sitio web en un mes, pues -como se mencion\u00f3 al inicio- todo depende. Pero, por la experiencia de e-Lexia.com, la mayor\u00eda de este tipo de proyectos toman m\u00e1s de 30 d\u00edas.<\/p>\n<p>La misma conclusi\u00f3n va por el lado del precio. Dar una estimaci\u00f3n \u201ca vuelo de p\u00e1jaro\u201d es irresponsable. Es necesario definir alcances, establecer criterios de producci\u00f3n, conocer la audiencia, programar periodos de prueba y ajuste; etc\u00e9tera.<\/p>\n<p>En este texto se mencionaron algunos elementos, y de manera superficial, pero la producci\u00f3n web es todo un universo: redes sociales, servicios de <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/georreferenciacion\/\" rel=\"noopener\" target=\"_blank\">georreferenciaci\u00f3n<\/a>, elementos interactivos, funciones transaccionales, en fin.<\/p>\n<p>Como dicta el refr\u00e1n: \u201cEs mejor colorado un minuto y no p\u00e1lido toda la vida\u201d.<\/p>\n<div class=\"destacado-libro\">\n<div class=\"destacado-libro__imagen\">\n  <a href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\"><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2021\/04\/libro-prodccion-contenidos-web.jpg\" alt=\"Producci\u00f3n de contenidos web. Libro gratuito. Autor: Juan Carlos Morales S.\"><\/a>\n <\/div>\n<div class=\"destacado-libro__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\">Producci\u00f3n de contenidos web<\/a><\/h2>\n<p>  Descarga este libro electr\u00f3nico de acceso libre, donde se presentan recomendaciones de producci\u00f3n multimedia.<br \/>\n  <a class=\"cta-libro\" href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\">Obtener una copia<\/a>\n <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A mediados de la d\u00e9cada del 2000, cuando estaba tomando forma e-Lexia.com, una de las preguntas m\u00e1s frecuentes que me llegaban era: \u00bfcu\u00e1nto cuesta crear una p\u00e1gina web? Acto seguido, el cuestionario lanzaba esta otra perla: \u00bfcu\u00e1nto demora crearla? En un af\u00e1n por ser did\u00e1ctico con el cliente, trataba de&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1593,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[10,66],"class_list":["post-1737","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-produccion-web","tag-critica","tag-hipermedia","has-post-thumbnail-archive"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/comments?post=1737"}],"version-history":[{"count":0,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1737\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media\/1593"}],"wp:attachment":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media?parent=1737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/categories?post=1737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/tags?post=1737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}