Inscríbete en nuestro Máster Gratuito en Marketing Digital

100% en línea
80+ Horas
Horario Flexible
Con certificado
2M+ Alumnos
Blog opt in

Categoría:
Autor: Jorge Rivero
Fecha: 23/12/2021

Diseño y Desarrollo Web: Diseña, estructura y posiciona tu web.

El desarrollo web inicio con World Wide Web (www), uno de los protocolos de comunicación entre computadoras a nivel mundial, el cual esta manejado por dominios para no tener que operar varias IP sino que cada conexión tiene una IP única. Existe un consorcio que regula la web llamado W3C (World Wide Web Consortium)

El diseño de la web está orientado más a la apariencia, organización, contenido, y otros. El diseño se ha extendido a lo largo de los años y va desde la idea preconcebida de lo que será tu web hasta el resultado final que sería el SEO o posicionamiento web.

¿El diseño y desarrollo web van de la mano?

Antes, el desarrollo estaba un poco más alejado del diseño ya que se trataba solo de codificación y hacer de la apariencia algo funcional para que todo el mundo pudiera verla, pero ahora el diseño y desarrollo web se engloban.

¿Cuales son las herramientas que constituyen el diseño y desarrollo web?

DISEÑO Y USABILIDAD

Los sitios web deben ser diseñados para que las personas puedan acceder a toda la información que se proporciona y no debe tener dificultad. Con esto hablamos de usabilidad y de 2 características fundamentales que son:

Interfaz de usuario

Diseño sencillo, amigable, coherente con toda la web o con la tendencia actual. Un diseño que mejore la interacción del usuario facilitando la navegación del mismo.

Experiencia de usuario

Si la interfaz del usuario es buena, la experiencia también lo será. En ella engloba la confiabilidad, presencia en redes sociales, información de calidad, continua y respetuosa. Que en cuestión de segundos los usuarios puedan comprender como está distribuida tu información, y para ello debes utilizar aplicaciones fáciles y un menú directo y simple; una respuesta rápida a dudas o preguntas que desee conocer el usuario, ya sea por correo electrónico, chat de vivo, facebook u otro; y si se trata de empresas de comercio electrónico eso debe ser fundamental.

HOSTING Y DOMINIO

Hosting

El Hosting es un servidor en línea que te permite publicar tu sitio web y tus aplicaciones de internet. Normalmente debes registrarte en una página que preste el servicio para que puedas  alquilar un espacio en un servidor. Este servidor te permitirá almacenar todos los archivos y datos de tu web.

El servidor funciona ininterrumpidamente y está disponible las 24 horas. El proveedor del Hosting será responsable del mantenimiento, la seguridad y de que todo funcione perfectamente.

El servicio dependerá de los requerimientos e incluirá:

  • Correos electrónicos corporativos, por ejemplo: info@com y puedes clasificarlos de acuerdo a tus requerimientos, es decir, si quieres que los correos los reciban el personal de administración, técnico, vendedores o cualquier otro.
  • Capacidad del sitio web (para subir y cargar archivos)
  • Cantidad de transferencia de información.
  • Tipo de servidor.
  • cPanel (acceso por tu cuenta al panel de control, administración de archivos, imágenes, uso del disco duro, métricas, seguridad, software, otros)
  • Manejadores de contenido, otros.

Dominio

El Dominio te va a permitir que el manejo de IPs  sea más fácil, ya que para tener que ingresar a un sitio web tendrías que recordar el montón de números que expresa la IP. Es más práctico recordar por ejemplo: www.neetwork.com que recordar:

diseño y desarrollo web

El dominio esta desglosado de la siguiente manera:

diseño y desarrollo web

  1. Protocolo: http, https (como se transfiere la información)
  2. Subdominio: “www”
  3. Dominio: como se llamará tu web, por ejemplo: neetwork
  4. Extensión o terminación: “.com”. La extensión también puede aumentarse con el código del país. También existe el “.net” “.org”
  5. Carpeta: donde va almacenada la información
  6. Página
  7. Etiquetas

FRONT-END y BACK-END

Frontend: CSS, HTML, Javascript: lo que todos pueden visualizar al ingresar a la web.

Backend: PHP, .Net, ExpressionEngine: las tecnologías que maneja tu web por debajo, hablamos de manejadores de contenido, la parte administrativa.

A cualquier sitio web que ingreses estarás accediendo al Frontend: es decir, lo que ves cuando accedes a www.neetwork.com, por ejemplo. Es como la portada, la parte visual donde tendrás el acceso al menú, paginas, buscador y a todo lo que se haga en la web, como un inicio.

Además, podrás tener acceso y ver como se trabaja, por ejemplo, al ingresar a una página web y darle clic derecho en la opción “ver código fuente de la página”, podrás visualizar toda la codificación, la parte del navegador y como está estructurado el sitio web. Es información de acceso total y libre.

Ahora bien, cuando se habla de Backend, se habla de la parte administrativa del sitio web, como podría ser “Wordpress” por ejemplo; donde puedes generar nuevos contenidos, entradas, páginas, administrar plugins, SEO, acceso al tema de la web (códigos), cual sea el que estés utilizando (PHP, javascript).

Es decir, tienes acceso al servidor el cual te va a permitir controlar las diferentes tecnologías, por ejemplo, como lenguaje de programación, bases de datos, otros.

ESTRUCTURA DEL CONTENIDO

No existe un guión o estructura especial para incluir el contenido en tu web, ya que, cada página es única y singular. Siguiendo la mayoría de los parámetros que utilizan casi el 90% de los sitios webs del mundo tendrías:

Home/Land page (inicio)

El cual permite ingresar a la página principal del sitio. Donde se puede visualizar fragmentos de las demás páginas (como un intro o presentación fundamental), sin embargo, también se puede acceder directamente a cada categoría si así lo desea el usuario.

About Us (“acerca de”, “nosotros”, “quiénes somos”)

Es opcional y hará referencia acerca de la institución, organización, quienes trabajan en ella, historia, objetivos organigrama, misión, visión, etc. A pesar de que no es obligatoria genera confianza en los usuarios saber quién o quiénes están detrás de cada cosa.

Services (servicios o productos):

Dependerá de lo que se ofrezca. Al ingresar, les será más fácil a los usuarios poder visualizar la cartera de productos o servicios con especificaciones. La mayoría de las empresas de comercio electrónico incluyen todos tus servicios en el menú principal, y el resto de la información desglosado en un menú en la parte inferior. Y el botón de inicio se convierte en el logo de la empresa.

Pages (Páginas):

Si es un sitio de web de ecología, por ejemplo, una de las páginas podría ser las leyes, normativas, decretos u otros. La cantidad de páginas depende del tema y lo que necesites plasmar.

Blog:

Es algo que ayuda bastante para el posicionamiento web, especialmente para aquellos sitios web informativos, o que quieren incluir contenido, también te puede ayudar a ofertar tus productos o servicios si creas un artículo descriptivo por ejemplo.

Contact (Contacto):

Con esta página se ofrece una dinámica de intercomunicación con los usuarios. Puede ser mostrar un formulario, correo electrónico, teléfono, chat en vivo, ubicación o dirección, redes sociales, lo que sea necesario para que se puedan comunicar.

Sing Up (Inicio de Sesión):

Con esta opción se les ofrece a los usuarios la posibilidad de ingresar a contenido exclusivo, es decir, contenido solamente para las personas que han iniciado sesión. Es un beneficio porque eso  demuestra que las personas que se hayan suscrito o iniciado sesión serán recurrentes con el sitio web.

Página de política de privacidad/cookies:

Básicamente se trata de ser transparentes con los usuarios. Se refiere a aceptar o no el uso de cookies.

diseño y desarrollo web

 

WEB SEMÁNTICA

Desde el inicio de la aparición de los sitios web, han habido unas tendencias o formas de cómo se ha mostrado el contenido, sino también de la estructura visual.

  • Web 1.0: en la web 1.0 los sitios webs eran sólo lectura, poca gente creaba contenido, la información generada era solo por web máster o editores, los usuarios eran receptores de información, solo leían, el comercio electrónico era básico, las páginas eran estáticas, la actualización del sitio era poco frecuente y no eran intuitivos (era difícil de manejar).
  • Web 2.0: los sitios web ya eran de lectura y escritura, intercambio de conocimientos (foros y comentarios), los usuarios leían y escribían, había más integración con las redes sociales, los usuarios compartían la información y se convertían en los protagonistas, los sitios webs eran más intuitivos y más livianos.
  • Web 3.0: se busca crear una web con contenido semántico, inteligencia artificial, gestión avanzada de contenido, interactivo, los sitios ya son multifuentes de información, el comercio electrónico es integrador y la experiencia de usuarios es agradable, son intuitivos y accesibles.

IDE- EDITORES

Existe una diferencia entre ellos. En cuanto al IDE, se refiere al entorno de desarrollo integrado y  los editores serían algo más simple.

Editores: Es decir, cuando quieras editar códigos o hacer cualquier aplicación/programar, e incluso hacer en HTML o CSS, trabajar en Javascript o cualquiera, necesitas algo que te facilite el trabajo. Pudieras utilizar un block de notas para ello, pero los colores te ayudarán muchísimo si utilizas los editores.

Los editores son livianos, el peso no es exclusivo para una sola tecnología. Son cómodos y fáciles de utilizar, son intuitivos y para cuando quieras hacer un sitio web tendrás que depender de algunos de ellos.

Los más usados son:

  • Sublime Text
  • Notepad++
  • Atom
  • Brackets
  • Visual Studio Code
  • Dreamweaver

Los IDE son muchos más pesados, a veces suelen ser para una tecnología específica, por ejemplo, si quieres IDES para programar en Javascript,  podrás contar con:

  • NetBeans
  • Eclipse
  • Visual Studio
  • JetBrain
  • QtCreator
  • CodeLite

HERRAMIENTAS PARA DESARROLLAR UNA WEB

 

HTML y HTML 5 PARA DISEÑO Y DESARROLLO WEB

En sí HTML tiene varias versiones y el que se está utilizando más frecuentemente es el HTML 5. Es lo mismo, solo que la versión HTML 5 tiene nuevas etiquetas y permite a la vez el manejo de otros elementos muchos más fluidos como animaciones, y más.

Por ejemplo:

  • Metadatos
  • Encabezados
  • Párrafos
  • Imágenes
  • Audios
  • Videos
  • Enlaces y anclas
  • Listas
  • Formularios
  • Tablas

CSS

Es el complemento perfecto para HTML, y ayuda a determinar la apariencia de tu web. Así como HTML, CSS también tiene una nueva versión: CSS 3, la cual, la mayoría de las páginas en la actualidad, te proporciona muchos elementos que te permiten acomodar toda tu información.

  • Selectores
  • Unidades de medida
  • Colores de títulos/formas/otros
  • define la anchura de tu contenido en la web
  • Bordes
  • Márgenes
  • Espacios internos
  • Fuentes
  • Texto

 

PHP Y  MYSQL

Para poder manejar una base de datos, normalmente necesitarás un lenguaje de programación. Uno de los más eficientes para el desarrollo web es PHP, y para la administración de base de datos se utiliza MYSQL.

PHP es el que se encarga de enviar los datos, gestionarlo y recuperarlos.

Cuando quieras controlar la cantidad de registros de usuarios en tu web así como enviar formularios de ingreso o contacto, siempre estará mediado por PHP. Si tu web tiene formularios de registro en el que el usuario tenga que agregar por ejemplo, un correo y contraseña, la información suministrada por tu usuario se almacenará en tu base de datos.

De igual forma, cuando ingresas a tu manejador de contenido podrás visualizar todos los datos de PHP, desde la cantidad de visitas, estadísticas, entre otros. Incluso el buscador de tu web, indagara información en la base de datos para suministrarle al usuario respuesta específica o relacionada a su búsqueda.

JAVASCRIPT

Si quieres que tu página web tenga un grado de interactividad y dinamismo, Javascript te proporciona las herramientas.

Por ejemplo, en muchas ocasiones al cargar una página web, notas como cierta información se muestra con movimiento/animación. En estos casos, las webs utilizan sliders que te permiten cambiar de imagen/fondo, letra u otro de manera simultánea.

FRAMEWORKS Y LIBRERÍAS

Cuando hablamos de estas librerías se hace notar el hecho que en cada uno de los elementos como HTML, CSS, Javascript, PHP, tendrás ayudas adicionales, por ejemplo:

  • HTML: Bootstrap, Foundation
  • CCS: Less, Sass
  • Javascript: Jquery, AngularJS
  • PHP: Laravel, Symfony

Si trabajas en HTML y quieres crear sitios web responsive, es decir, sitios web adaptables a todos los dispositivos, puedes optar por: Bootstraps, el cual le permite a tu sitio web ajustarse a cualquier tamaño desde escritorios, tablets y teléfonos.

Con esto, evitas codificar tanto con HTML, ya que, los slider, títulos entre otros vienen pre codificados, es decir, vienen listos, solo de insertar texto.

Si quieres hacer un formulario de contacto, y trabajas con PHP, podrías enlazar Laravel, y solamente tendrías que importar los archivos.

MANEJADORES DE CONTENIDO O CMS

Existen una especie de frameworks, es decir, unas plataformas que ya están hechas y tienen todo listo para que tú puedas hacer tu sitio web. Los manejadores de contenido te van a posibilitar una estructura previa y dependerá de cual utilices. Los más usados son: WordPress, Moodle, Joamla, Drupal, PrestaShop.

WordPress es el más utilizado en la actualidad, y realmente hace casi todo. Tu solamente necesitarías hacer un par de configuraciones, que van desde descargar el manejador de contenido desde su página, instalación, creación de usuario para poder tener acceso a todo y al ingresar podrás observar que no tuviste que utilizar HTML, Javascript, CSS, o PHP.

Con este frameworks puedes crear contenido, páginas, medios (imágenes, audios, videos), entre otras funciones.

DISEÑO RESPONSIVE

Los sitios webs actualmente deben ser adaptables a todos los dispositivos, desde teléfonos inteligentes, computadoras de escritorio, laptops, tablets, etc. La mayoría de los usuarios, aproximadamente el 60%, acceden a los sitios webs desde su teléfono móvil.

Lo ideal es que tu página web tenga todos sus elementos bien posicionados para que puedan redimensionarse y adaptarse al ancho de cada dispositivo, de esta manera, les garantizas a tus usuarios una mejor experiencia.

diseño y desarrollo web

El diseño responsive se caracteriza por:

  • Los Layouts (contenidos) e imágenes son fluidos y livianos.
  • Reduce el tiempo de desarrollo.
  • Evita los contenidos duplicados.
  • El contenido puede ser compartido de manera más natural y rápida.
  • El diseño responsive es imprescindible para tu SEO.
  • Te ayuda a mejorar tu branding, ya que le demuestras a tus usuarios que tú marca, empresa, etc está actualizada y adaptada a la nueva era.
  • Si tu página web les ofrece a los usuarios facilidad de búsqueda, detalles y manejo de información de forma adecuada, será más fácil que puedan adquirir tus productos y/o servicios.

Elementos a considerar para que tu sitio web sea responsive

  • Evita los efectos: algunos efectos de movimiento u otro pueden ser ideales si se visualiza tu página web desde un ordenador pero considera si se verá acorde en los demás dispositivos, para ello, haz una comprobación multi dispositivo-plataforma.
  • Carga de página:

Las páginas webs no deben estar sobre cargada de elementos adicionales que hagan más lento el sitio web, y para verificar si está pesada al cargar o no,  puedes ingresar en esta dirección: PageSpeed Insights

Al incluir la dirección de tu sitio web automáticamente te informará cuales son los elementos que están ocasionando una carga lenta en tu web, cual deberías mejorar, optimizar o reducir. Te refleja valores de optimización tanto para dispositivos móviles como para ordenadores.

Lo ideal sería que tu sitio web este 100% optimizado, sin embargo, si los índices están dentro del 50% y 89% estarás más que satisfecho. Además, podrás visualizar específicamente cuales son las opciones a evaluar.

  • Diseño de letras o tipografía: las letras deben ser legibles para todos los dispositivos, es decir, que no sean demasiado grandes y que tampoco sea necesario hacer zoom para leer la información.
  • Multimedia: las imágenes y videos deben tener un formato específico, con proporción lógica en función del dispositivo, además, es casi obligatorio que sean livianos para que la carga sea rápida.
  • Usabilidad: La experiencia de usuario debe ser lo más excelente posible, es decir, los botones, menús y otros elementos que agregues deben ser de fácil acceso y mostrar información específica y puntual.

 

POSICIONAMIENTO WEB (SEO)

SEO: Search Engine Optimization o en español: Optimización para motores de búsqueda. Se trata de una optimización que se le hace generalmente a los sitios webs para que puedan ser posicionados entre los primeros puestos en los buscadores como: Google, Yandex, Bing, otros. En la actualidad, Google es uno de los principales buscadores y es el más utilizado.

El SEO generalmente se enfoca en los resultados de búsqueda orgánicos, es decir, que no son pagados.

Aspectos importantes a considerar del SEO

 

La autoridad y la relevancia:

La primera se trata de la popularidad que tenga tu sitio web, se basa en la experiencia del usuario y lo valioso de tu contenido, mientras más se comparta tu información y los usuarios permanezcan más tiempo en tu sitio web, los motores de búsqueda le darán autoridad a tu página. En cuanto a la relevancia, es la relación que existe entre una búsqueda específica y tu página web.

SEO on Page y Off Page

El SEO on Page está relacionado a todas las optimizaciones que puedas hacer dentro de la web, desde la experiencia del usuario, optimización orgánica, tiempo de carga y otras. Se realiza con el propósito de mostrarle a los motores de búsqueda que tu web está optimizada y tu contenido también.

El SEO off page, se enfoca en los factores externos que puedas hacer fuera de tu web pero que ayuden a ganar relevancia en los buscadores.

Por ejemplo:

  • Las relaciones públicas: presencia en redes sociales, menciones en medios locales u otros.
  • Construcción de hipervínculos (backlinks): se refiere a la cantidad y calidad de enlaces presentes en otros sitios webs pero que direccionen a tu sitio o a algún contenido específico de tu web.

Palabras claves

Son fundamentales al momento de querer posicionarte y son las responsables de promover el intercambio de información entre los usuarios y las páginas webs. De hecho, con ellas puedes conocer lo que las personas están buscando y comenzar desde allí.

Por ejemplo, si escribes en tu buscador la palabra: “Panales solares”, los motores búsquedas organizan la información y te muestran toda la información referente y las relacionadas a esa palabra:

diseño y desarrollo web

Existen 3 tipos de palabras claves:

Head Tails: son las que sólo contienen una, o máximo dos palabras en su composición. Son usadas por la mayoría de los sitios web, son más competitivas y por ende es más difícil posicionarse con ellas. Por ejemplo: “Paneles Solares”

Middle tails: son de mediana composición, pueden tener de dos, tres o hasta cuatro palabras y son consideradas cadenas cortas de palabras de uso frecuente. Son más específicas y susceptibles de lograr los primeros resultados de los buscadores. Por ejemplo: “Como instalar paneles solares”

Long tails: están formadas por variar palabras en consecuencia. Son las encargadas de filtrar más específicamente la información y aunque su búsqueda es menor, ofrece precisa e inmedianta, además, son las más indicadas para alcanzarel posicionamiento, por ejemplo: “Como instalar paneles solares paso a paso”.

Diferencia entre SEO y SEM

Se podría decir que lo diferencia es el dinero, ¿Te preguntarás por qué?

Porque el SEO se basa en posicionamiento totalmente orgánico, que no es pagado, es decir, debes mostrar buen contenido y que sea totalmente original, incluir  palabras claves con bastante relevancia de búsqueda, títulos y descripciones para llamar la atención de los usuarios, etiquetas, URLs descriptivas, enlaces internos y externos, imágenes y/o videos de calidad, entre otros.

Sin embargo, trabajar con SEO Orgánico es proyectarse a mediano o largo plazo, ya que no obtienes un resultado inmediato.

Por su parte, SEM (Search Engine Marketing), se trata de campañas publicitarias que son pagadas y se desarrollan mediante anuncios que se muestran en las primeras posiciones de los buscadores. Esto quiere decir que esa página web ha logrado posicionamiento gracias a dicha publicidad. El resultado es casi inmediato.

Por ejemplo, si buscamos la palabra: “Hosting en España” en Google.com nos aparecerán los siguientes resultados:

diseño y desarrollo web

¿Por qué es importante el SEO?

Actualmente se le da prioridad a los sitios webs que tienen sus páginas optimizadas y donde se suba contenido relevante, novedoso y actualizado para los usuarios. En base a esa información tu página web obtendrá su Page Rank.

Además, mientras mejores posiciones ocupes obtendrás más visitas, conseguirás potenciales clientes, podrás ofrecer servicio de publicidad a empresas o productos relacionados también con tu web, y tu sitio será más visible para personas que están buscando tú marca, producto o servicio.

 

Neetwork Business School es la escuela de negocios digitales más grande de hispanoamérica. ¡Más de 5.000.000 de alumnos se han inscrito desde el 2017! Nuestro campus cuenta con más de 60 cursos y certificaciones (y contando). Inscríbete y lleva tus habilidades a otro nivel.
© 2024 Neetwork Online Business School B.V. Todos los derechos reservados.
crossmenu