Dise\u00f1ar una p\u00e1gina web es un trabajo laborioso que necesita de un amplio abanico de conocimientos y en donde se han de tomar desde el principio decisiones muy importantes que afectar\u00e1n al desarrollo del proyecto. Durante este proceso es probable que se utilicen t\u00e9rminos o expresiones con las que puede que no estemos familiarizados.
\nEn aras de facilitar la comunicaci\u00f3n con los responsables del desarrollo de nuestra p\u00e1gina web, hemos preparado una peque\u00f1a gu\u00eda con los conceptos m\u00e1s habituales que escucharemos al tratar con un dise\u00f1ador web.<\/p>\n
Dado que todas las expresiones vienen del ingl\u00e9s, trataremos de incluir su traducci\u00f3n al castellano, aunque utilizaremos ambas terminolog\u00edas indistintamente.<\/p>\n
Cuando nos referimos a un dise\u00f1o a medida<\/a>, estamos hablando de un proyecto que tiene unos requisitos tan concretos que necesita que la p\u00e1gina sea \u201cmontada desde cero\u201d. Esto permite una flexibilidad ilimitada a cambio de un mayor coste de tiempo y dinero de desarrollo.<\/p>\n El sistema de gesti\u00f3n de contenido m\u00e1s popular del mercado, y una de las m\u00e1s potentes herramientas del dise\u00f1o web. A diferencia del dise\u00f1o a medida, si utilizamos WordPress en nuestro sitio web no es necesario partir de cero. Con miles de plantillas de dsie\u00f1o que elegir como base para nuestra p\u00e1gina e infinidad de plugins de funcionalidades que a\u00f1adir a nuestro sitio web de forma r\u00e1pida y relativamente sencilla, WordPress es una de las alternativas m\u00e1s econ\u00f3micas de cara a plantearnos un proyecto web.<\/p>\n Un plugin es un programa externo de WordPress que nos permite a\u00f1adir funcionalidades adicionales a nuestra web. Los m\u00e1s habituales son los formularios de contacto o las plataformas de e-commerce. Un e-commerce es una tienda online de cualquier tipo. Dada la gran cantidad de funcionalidades que requiere un e-commerce para funcionar, lo m\u00e1s habitual es utilizar los plugins que WordPress tiene disponibles.<\/p>\n La p\u00e1gina principal y la primera a la que accede el usuario al entrar en nuestra web. Es el punto de inicio de la navegaci\u00f3n, desde donde podemos acceder al resto del contenido. La cabecera es, como su propio nombre indica, la parte superior de nuestra p\u00e1gina web. Por contraste, el footer es la secci\u00f3n al final de nuestra p\u00e1gina web. Pero que su posici\u00f3n no nos lleve a enga\u00f1o, tambi\u00e9n es muy importante prestarle atenci\u00f3n ya que nos permite \u201crescatar\u201d a los usuarios que hayan acabado haciendo scroll hasta el final de una de nuestras p\u00e1ginas. En el footer podemos incluir informaci\u00f3n relevante para redirigir su b\u00fasqueda, como enlaces a otras secciones de la web, o quiz\u00e1s informaci\u00f3n de contacto, lo que podr\u00eda asegurar una venta.<\/p>\n Cuando un dise\u00f1ador web se refiere a la versi\u00f3n de escritorio de una web, est\u00e1 haciendo el \u00e9nfasis en la versi\u00f3n de nuestra web que se visualiza en un ordenador de sobremesa o en un port\u00e1til. Actualmente la inmensa mayor\u00eda de los usuarios realizan su navegaci\u00f3n online a trav\u00e9s de dispositivos m\u00f3viles o tablets pero no por ello debemos descuidar nuestra versi\u00f3n de escritorio.<\/p>\n El dise\u00f1o responsive o simplemente responsive de una web se refiere a las versiones optimizadas para la navegaci\u00f3n en dispositivos m\u00f3viles, ya sean tablets o smartphones. La plantilla de dise\u00f1o gr\u00e1fico que nuestro dise\u00f1ador web utilizar\u00e1 para maquetar nuestra p\u00e1gina. Es un boceto esquem\u00e1tico de qu\u00e9 aspecto, navegaci\u00f3n y jerarqu\u00edas de informaci\u00f3n tendr\u00e1 nuestra p\u00e1gina web. El proceso de pasar un layout a un entorno web.<\/p>\n Imaginemos que el dise\u00f1o web es como construir una casa. En este caso, el c\u00f3digo HTML ser\u00edan los cimientos y estructura b\u00e1sica de nuestra p\u00e1gina. Continuando con la met\u00e1fora de la casa, el c\u00f3digo CSS ser\u00edan los detalles visuales que diferencian una casa en obras de un hogar. Proporci\u00f3n y espacio entre los elementos, colores, fuentes o animaciones, por poner algunos ejemplos.<\/p>\n Una media query es una regla de CSS que nos permite modificar el c\u00f3digo de nuestra web para que se adapte a las diferentes medidas de los dispositivos que puedan usar nuestros usuarios, haciendo que nuestra web sea responsive. Aunque hay una enorme variedad de lenguajes de programaci\u00f3n, Javascript (Js) o Jquery son dos de los m\u00e1s habituales. Su funci\u00f3n es a\u00f1adir la funcionalidad a nuestro espacio web. Botones que abren, ocultan o expanden contenido, sliders, carruseles o lightboxes. Si se mueve y reacciona a nuestras acciones, suele ser programaci\u00f3n Js. Dise\u00f1ar una p\u00e1gina web es un trabajo laborioso que necesita de un amplio abanico de conocimientos y en donde se han de tomar desde el […]<\/p>\n","protected":false},"author":9,"featured_media":12190,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[166],"tags":[],"_links":{"self":[{"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/posts\/12189"}],"collection":[{"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/comments?post=12189"}],"version-history":[{"count":5,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/posts\/12189\/revisions"}],"predecessor-version":[{"id":12195,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/posts\/12189\/revisions\/12195"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/media\/12190"}],"wp:attachment":[{"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/media?parent=12189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/categories?post=12189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/tags?post=12189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\u2022 WordPress<\/a>:<\/strong><\/h4>\n
\u2022 Plugin:<\/strong><\/h4>\n
\nExiste una variedad casi infinita de plugins en el mercado, algunos gratuitos y otros de pago.<\/p>\n\u2022 E- Commerce \/ comercio electr\u00f3nico<\/a>:<\/strong><\/h4>\n
\u2022 Home \/ P\u00e1gina de inicio:<\/strong><\/h4>\n
\nEl home de una p\u00e1gina web se trabaja con especial mimo ya que es la primera impresi\u00f3n que los usuarios tendr\u00e1n de nuestra web.<\/p>\n\u2022 Header \/ Cabecera:<\/strong><\/h5>\n
\nTradicionalmente hac\u00eda referencia al espacio que se reservaba para colocar el logo y el men\u00fa de nuestra web, pero cada vez m\u00e1s se utiliza tambi\u00e9n para referirse a la primera secci\u00f3n del home de nuestro sitio web. Como ya hemos comentado, si el home es la p\u00e1gina m\u00e1s importante de nuestra web, la cabecera es la parte m\u00e1s importante de nuestro home.<\/p>\n\u2022 Footer \/ Pie de p\u00e1gina:<\/strong><\/h5>\n
\u2022 Desktop \/ Escritorio:<\/strong><\/h5>\n
\u2022 Responsive:<\/strong><\/h5>\n
\nLas limitaciones de espacio de las pantalla de estos dispositivos con respecto al dise\u00f1o de la versi\u00f3n de escritorio provocar\u00e1 variaciones en el aspecto de nuestro sitio web.
\nNo podemos esperar que un elemento se vea exactamente igual en desktop que en responsive, todo debe de adaptarse al espacio en el que se encuentra.<\/p>\n\u2022 Layout \/ Plantilla:<\/strong><\/h5>\n
\nDise\u00f1ar un layout detallado y concreto es una de las partes m\u00e1s importantes del dise\u00f1o web, ya que permite ahorrar una gran cantidad de tiempo invirtiendo relativamente muy poco de nuestro presupuesto, dado que realizar cambios sobre una plantilla gr\u00e1fica es mucho m\u00e1s r\u00e1pido y sencillo que realizar cambios sobre nuestro sitio web una vez hayamos empezado la maquetaci\u00f3n.<\/p>\n\u2022 Maquetaci\u00f3n web:<\/strong><\/h5>\n
\u2022 HTML:<\/strong><\/h5>\n
\nMuy importante resaltar que el c\u00f3digo HTML no define el tama\u00f1o final de los elementos que componen una p\u00e1gina, solamente se refiere al orden del contenido.<\/p>\n\u2022 CSS:<\/strong><\/h5>\n
\u2022 Media Query:<\/strong><\/h5>\n
\nLas media querys m\u00e1s habituales son:
\n– Superwide o panor\u00e1mico. Para pantallas de 2k o superior.
\n– Desktop o escritorio.
\n– Tablet.
\n– Mobile.
\nComo podemos apreciar, estas media querys son muy vagas en su definici\u00f3n. La raz\u00f3n es que no se puede adaptar una p\u00e1gina web a las especificaciones concretas de cada modelo de tablet o smartphone, as\u00ed que se utilizan unas medidas gen\u00e9ricas.<\/p>\n\u2022 JS o JQuery:<\/strong><\/h5>\n
\nExisten una gran cantidad de t\u00e9rminos y expresiones espec\u00edficas del dise\u00f1o web, pero de momento os dejamos las m\u00e1s b\u00e1sicas y frecuentes. Esperamos que con este repaso, hayamos podido mejorar la comunicaci\u00f3n entre el cliente y los equipos de dise\u00f1o web.<\/p>\n","protected":false},"excerpt":{"rendered":"