DISEÑO WEB

El diseño Web consiste en el proceso de realizar páginas web, el cual involucra varios aspectos desde la creación de la plantilla, la implementación del contenido y el diseño gráfico del sitio.

Con el auge de las innovaciones tecnológicas y el acceso a Internet, esta profesión ha ido ganando gran popularidad en los últimos años, siendo una de las profesiones más buscadas y más rentables tanto en Latino América como en el Viejo Continente.

Si te apasiona el Diseño Web, y quieres perfeccionar tus conocimientos y habilidades, en la Biblioteca del Saber vamos a estar escribiendo una serie de artículos, relacionados con esta temática. Y no importa si es primera vez que te estas adentrando a este mundillo, pues has llegado al lugar correcto.

diseno web

Los diseñadores Web, utilizan principalmente HTML (HyperText Markup Language), es decir, Lenguaje de Marcas de Hipertexto, que podría ser traducido como Lenguaje de Formato de Documentos para Hipertexto y CSS (Cascading Style Sheets). Mientras otros usan un WYSIWYG, acrónimo de What You See Is What You Get (en español, "lo que ves es lo que obtienes")], ejemplo de ellos son los editores Adobe Dreamweaver o Microsoft Front Page. Este tipo de editores proveen una interfaz visual para diseñar la maquetación del sitio web y el software automáticamente genera el HTML y el CSS.

Otra forma muy popular de diseñar sitios webs es con el uso de CMS (son las siglas de Content Management System), o lo que viene a ser un sistema de gestión de contenidos para páginas web, tales como: WordPress o Joomla.

No te preocupes si es primera vez que ves estos términos, o no los entiendes, ya que en artículos y vídeos posteriores explicaremos a fondo cada uno de ellos.

Por donde comenzar para ser un Diseñador Web.

Para ser un diseñador web, se requiere de conocimientos y habilidades que toman tiempo aprender, pero una vez que logras dominarla, todo empieza a tomar formas, y logras a sentir que la satisfacción alcanzada vale la pena por el esfuerzo realizado.

Este es nuestro primer artículo, acerca el Diseño Web, el primer paso hacia tu aprendizaje y dicen que cuando el alumno está listo, aparece el Maestro. Así que presta mucha atención a nuestros siguientes consejos y recomendaciones.

  • Te recomendamos aprender HTML si deseas convertirte en un diseñador web, ya que escribir este lenguaje correctamente es una de las claves para ser todo un experto en el diseño web.

  • Otro factor importante a considerar, es el propósito y uso que los usuarios o internautas le van a dar a tu sitio web.

  • Tu sitio web debe ser accesible para todo el mundo, es buena práctica chequear la compatibilidad de tu diseño con los distintos navegadores y tamaños o resoluciones de pantalla.

  • Luego de haber aprendido el lenguaje de HTML, tu siguiente paso para convertirte en diseñador web es dominar el lenguaje de hojas de estilos de Cascada o CSS.

  • Hay muchos más consejos, pero no queremos sobrecargarte de información, hemos querido explicarlo de una manera muy sencilla, y consideramos que estas son las bases para empezar a dar tus primeros pasos en el Diseño Web.

Si has llegado a este punto, pues déjame felicitarte y no me queda más que agradecerte por tu tiempo para leerme y recuerda apenas el camino comienza.

Nos vemos en las siguientes secciones, y si te parece interesante nuestro artículo, y crees que puede servir de utilidad a algún amigo o compañero de estudios, no olvides compartir nuestro enlace en las redes sociales.

Definición de HTML.

HTML (Hypertext Markup Language) es el lenguaje usado para crear documentos web. Este lenguaje define la sintaxis y la colocación de las instrucciones dadas al navegador. Estas instrucciones llamadas etiquetas o tags no son mostradas en pantalla, pero le dicen al navegador como debe mostrar el contenido incluido en ellas.

HTML

HTML standard y todos los demás standards relacionados con la WEB son desarrollados bajo la autoridad de la World Wide Web Consortium (W3C). El último proyecto es el HTML 5.0 el cual ha estado creciendo en vía de ser soportado por el mayor número de navegadores.

HTML documentos son simples archivos de texto en Código ASCII (ASCII, es un código de caracteres basado en el alfabeto latino, tal como se usa en inglés moderno), lo cual significa que puedes usar un simple editor de texto para escribirlo; como el bloc de notas que trae el sistema operativo Windows.

Afortunadamente existen variadas herramientas diseñadas especialmente para escribir HTML. Estos editores de textos se pueden descargar gratuitamente o también hay otros en versiones pagas, y nos ahorran tiempo a la hora de escribir el código, brindado atajos para simplificar el uso de tareas repetitivas. En la Biblioteca del Saber te recomendamos 2 de los editores de textos gratuitos más usados y de mejor rendimiento como lo son Sublime Text y Visual Studio Code.

Consejos para aprender HTML.

  • Olvida las versiones anteriores, enfócate en aprender todo lo relacionado con HTML5, el cual es la última versión de HTML.

  • HTML5 presenta nuevos elementos, atributos y comportamientos. Lo que te dará mayor flexibilidad y escribir el contenido con mayor precisión para ser entendido por los navegadores.

  • Tus aplicaciones web tendrán mayor alcance y compatibilidad y podrás realizar diseños más sofisticados.

Hola Mundo con HTML5.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title> Mi primer HTML <title/>
<head/>
<body>
<h1> Hola Mundo <h1/>
<body/>
<html/>

Manos a la obra, vamos a escribir nuestro primer código HTML, que vamos a necesitar pues primeramente nuestro editor de código, puedes usar el bloc de notas, pero siguiendo nuestras recomendaciones seguramente ya habrás descargado Sublime Text o Visual Studio Code. o inclusive ambos. Y también necesitas un navegador, que, si estas en esta página obviamente tienes uno, te recomiendo Google Chrome o Mozilla Firefox, o tener ambos mucho mejor.

Lo primero que vamos a definir es la etiqueta . Esto le indica al navegador que nuestro lenguaje es HTML5. Vas a abrir tu Sublime Text, colocar el signo de menos, sino sabes cómo escribirlo, vas a ver la configuración de tu teclado. En mi caso teclado español colocamos alt+60.

Parece mentira, pero muchos iniciados se frenan por no saber cómo escribir los símbolos en la sintaxis de cualquier programa. Vas a escribir el signo de cerrar de exclamación, en mi teclado es shift+1 y para escribir la etiqueta de cierre este lleva el slash / que seguro si sabes escribirlo es el entre en el teclado numérico y para cerrar colocamos el signo de mayor alt+62.

Luego debemos crear nuestro documento html, y entonces se empieza y se termina con un html, esto quiere decir que todo el contenido va dentro de el, se le suele llamar el contenedor principal. De una vez ya que tenemos la etiqueta de html, vamos a agregar el atributo lang, que se forma así, se escribe lang = y entre comillas se coloca el idioma (es) para español y para inglés (en) por ejemplo.

Ahora viene la sección head, en este colocamos las etiquetas que son leídos por el navegador, pero no son visualizadas por el usuario, a excepción de la etiqueta título, y la etiqueta favicon, que es el logo que va al lado del título en la pestaña del navegador, igual todo esto lo estaremos explicando en artículos posteriores cuando tratemos HTML5 a fondo.

Dentro de la etiqueta head van muchas etiquetas, todo depende de tu proyecto, para este ejemplo te explicamos el meta charset, el cual se le coloca el atributo de UTF-8 que es el standard para los idiomas latinos, con UTF-8 no vamos a tener problemas por las palabras que llevan acentos, por la letra ñ y otros caracteres especiales de codificación latina.

Luego tenemos la etiqueta title, en donde escribiremos el título de nuestro documento o página web. Y ya al tener todas nuestras etiquetas correspondientes al head, lo cerramos.

Al cerrar el head, abrimos nuestra etiqueta body, este es el contenedor en donde vamos a colocar nuestra magia y arte, y en donde en el navegador podemos ver todo lo que colocamos dentro del body.

Para nuestro ejemplo, colocamos una etiqueta llamada H1, que es muy importante para el SEO., ya las analizaremos en las secciones de SEO con más detalles, pero se refiere a un encabezado de primer nivel, es como ser el título de nuestro trabajo. Y dentro de nuestra etiqueta H1 colocamos el famoso Hola Mundo, muy utilizado por los programadores para realizar su primer programa.

Y al final de cada documento web, va el cierre del body, como le hemos contado todo lo visible va dentro de esta etiqueta, y el último cierre es el del html, porque todo ya sea lo no visible lo incluido en el head y lo visible, incluido en el body, conforman todo el documento html.

Si te fijas que te he estado recomendando Sublime Text y Visual Studio Code, pues bueno si tienes Sublime Text, vas a instalar un plugin llamado Emmet y al solamente colocar esto ! más tabulador, te da todas las etiquetas descritas en el ejemplo. Ya lo veremos a fondo en nuestra sección de Sublime Text y de Visual Studio Code, pero quiero destacar que estos editores de Texto nos facilitan la vida y nos ayudan a ganar rapidez en nuestros proyectos.

Definición de CSS.

Cascading Style Sheets (CSS). Las Hojas Estilo Cascada han dado un gran avance al diseño web, anteriormente los estilos se colocaban de manera inline en el mismo lenguaje HTML, ahora puede hacerse en un documento externo, forma recomendada. .

  • Con CSS puedes controlar a través del uso de clases en el código HTML, las fuentes, fondos, bordes, y demás elementos gráficos de tu sitio web.

  • Tu documento HTML, será más reducido por lo que tendrá menor peso, esto ayuda en los tiempos de carga.

  • Es más fácil crear infinidades de archivos, ya que puedes enlazar todas las páginas de tu sitio web a un solo documento CSS, así mismo como hacer cambios y ediciones; actualizándose automáticamente en todas las páginas.

CSS

Las hojas CSS están formadas por una o más declaraciones separadas por punto y coma. Cada declaración consiste de una propiedad y un valor para esa propiedad separada por un punto y seguido.

background-color: blue;

Donde Background-color es la propiedad y blue el valor.

Recomendaciones en el Uso de CSS.

La clave para entender las hojas de estilo esta en conocer su herencia, es decir cuales elementos son los padres y cuáles son los hijos. El navegador determina qué valor mostrar para un elemento a través de su herencia.

Cada elemento tiene una serie de propiedades CSS que se utilizarán cuando el navegador necesita renderizar la página. Para cada una de esas propiedades, el navegador necesita buscar a través de todas las fuentes de estilos que tiene el documento.

Generalmente existe tres formas de agregar CSS a tu documento HTML.

  1. In line: Dentro del elemento colocas el atributo Style y asignas el valor.

    <a href="http://google.com " style="background-color:black; color:white">

    Método utilizado al principio, y hasta hoy en día por la Vieja Escuela, no recomendamos dar estilos de este modo.

  2. Estilo incrustado o embedded. Se coloca dentro de la etiqueta head en la mayoría de los casos, dentro de la etiqueta &l;tstyle> , en el cual van todas las declaraciones dentro de la etiqueta.

  3. A través de una hoja de estilos externa. El método que estaremos utilizando, en donde separamos el lenguaje HTML de las hojas de estilo CSS. Es decir, todos los valores para darle la apariencia, formato y estilo a nuestro sitio web, lo haremos en el documento CSS.

No te preocupes que más adelante, vamos a crear un mega tutorial de HTML5 y CSS3 la última versión de CSS, para que puedas entender a profundidad todo lo relacionado a estos 2 lenguajes que son la antesala en tu camino hacia el Diseño Web.

Qué es Sublime Text.

Sublime Text es un editor de texto muy potente, su curva de aprendizaje es corta en donde cualquier persona puede dar sus primeros pasos desde el primer día. Es útil para todos los lenguajes existentes, va a ser tu acompañante en tus primeros pasos con # HTML, CSS, PHP , Javascript y demás lenguajes, tiene accesos a plugins que te facilitan la vida brindando atajos; ademas en su sintaxis te coloca de un color diferentes por ejemplo para html las etiquetas, de otro color los atributos, las clases de otro color, el texto normal de un color. Te va a ayudar a ver de manera visual los distintos elementos y así podrás distinguirlos y aprenderlos rápidamente, del mismo modo te marca el inicio y final de una etiqueta , por ejemplo de un div esto es útil para evitar errores en nuestro código y saber si nos falta una etiqueta de cierre o la colocamos antes o después de donde deberíamos colocarla.

Sublime Text

Qué podemos hacer con Sublime Text

  • Encontrar y reemplazar palabras en el archivo.

  • Poder seleccionar varias lineas, es decir si necesitamos escribir el mismo texto en párrafos diferentes, podemos seleccionar y escribirlo como por arte de magia varias veces colocando un solo texto.

  • Te permite multiplicar la pantalla y ver varios archivos al mismo tiempo, útil para comparar códigos o para ver el HTML en conjunto con el CSS.

  • Sus atajos, utilizando la etiqueta Tab y previamente habiendo instalado el plugin de EMMET, por lo que escribirás de una forma muy sencilla y rápida.

  • Puedes cambiar el tema , así que pudieras trabajar con el que trae por defecto que es con fondo negro, que al ver esos códigos te sentirás como todo un experto, o como en mi caso que he tomado un estilo mas tradicional, con un background blanco.

  • Puedes abrir toda la carpeta y tendrás del lado izquierdo un menú desplegable con todas las carpetas y archivos de tus proyectos, no tendrás que ir al explorador de windows buscando abrir archivos uno por uno, tal como lo hace la Vieja Escuela, que un sigue usando el bloc de Notas, y tarda siglos en hacer tareas simples. Y si deseas ir a la carpeta en el explorado, a la ruta del archivo sencillamente con el botón secundario le das en ir a la carpeta contenedora.

  • Puedes instalar diccionarios para varios idiomas, en nuestro caso Español, no es perfecto al 100 % pero te sera de utilidad, al resaltarte los errores y palabras mala escritas que reconozca, tal cual como si usaras Microsoft Word.

  • Puedes cambiar mayúsculas y minúsculas del texto que selecciones.

  • Son muchas mas de sus virtudes, pero finalizare con la que para mi es su mejor virtud, y las personas que vivan en Venezuela deben estar 100 % de acuerdo conmigo. El trabajo que estés realizando, así no lo hayas guardado, queda disponible donde lo dejaste la próxima vez que enciendas tu pc. Esto es super útil cuando estemos inspirados escribiendo nuestro código y zas se fue la luz. Pero nuestro amigo el Sublime Text tendrá nuestro trabajo, en donde lo dejamos antes de irse la luz, la próxima vez que podamos conectarnos. Así que si alguien de la Vieja Escuela te dice que utilices el Bloc de Notas para realizar tus trabajos de Diseño Web y Programación, recomiéndale Sublime Text o Visual Studio Code], pero pienso el ideal para los Principiantes es el Sublime Text, que por cierto a pesar de ser pago, puedes utilizar todas sus funcionalidades de manera gratuita, aunque de vez en cuando se te abrirá una ventana preguntando si deseas comprar la versión completa.

Instalando el Plugin EMMET

Ya que hemos hablado tanto de EMMET, como dice en su sitio web. Ultra Fast Coding, creo con esto resumimos que podemos hacer, y si el Ingles no es lo tuyo, pues date una vuelta por nuestras secciones de INGLES.

Como instalarlo en Sublime Text, es muy fácil. Vamos a nuestro teclado y presionamos al mismo tiempo Ctrl+Shift+P y nos va a salir una barra de búsqueda escribimos Install y debemos ver donde diga Install Control Pack Manager le damos allí para acceder al Instalador de Plugins de Sublime Text, y luego tecleamos "Emmet", damos Enter y esperar que sea instalador en nuestro Sublime Text. Esto no solo nos servirá para instalar Emmet sino para otras funcionalidades.

Si deseas saber mas de Emmet te invito a ver su documentación Documentación de EMMET

Qué es Visual Studio Code

Según Wikipedia: Visual Studio Code es un editor de código fuente desarrollado por Microsoft para Windows, Linux y macOS. Incluye soporte para la depuración, control integrado de Git, resaltado de sintaxis, finalización inteligente de código, fragmentos y refactorización de código.

Wikipedia.

Según Pablo Moya: Es un editor de texto muy poderoso y gratuito que fue lanzado en abril del 2016 y en los últimos años se ha convertido en el editor Nº1 de los programadores.

Pablo Moya.
Visual Studio Code

Te recomiendo dar tus primeros pasos con Sublime Text, luego puedes usar el Visual Studio Code, y siempre es bueno tener varias alternativas, pudieras utilizarlo en paralelo con el Sublime Text que es el fiel y viejo amigo. Siéndote útil cuando tienes varios proyectos al mismo tiempo, trabajar uno con Sublime Text y otros con Sublime Text.

He podido observar a muchos profesores de universidades reconocidas a nivel mundial, utilizar este editor y recomendar a sus alumnos.

Tutorial de Visual Studio Code.

Qué mejor manera de explicar el uso de Visual Studio Code, sino es en vídeo y mejor aún si el vídeo es explicado por mi primer profesor en el Diseño Web, hablamos nada mas y nada menos que de Carlos Arturo de Falcon Masters Aprovecho para darle las gracias por todo los que nos ha enseñado a toda la comunidad hispana, sobre todo en Latinoamérica.

Definición de WYSIWYG.

WYSIWYG, acrónimo en Inglés de los que ves es lo que obtienes. Son editores que tienen interfaces gráficas, que hacen que escribir código HTML sea como usar Microsoft Word, en donde puedes escribir sin necesidad de incluir códigos ni etiquetas, y luego el programa te da el código resultante de tu plantilla realizada.

WYSIWYG

Herramientas WYSIWYG.

  • Macromedia Dreamweaver.

  • GoLive CyberStudio (Mac).

  • Microsoft FrontPage.

  • FileMaker Claris Home Page.

  • Adobe PageMill.

Porque no usar WYSIWYG.

La principal ventaja que veo al uso de este tipo de herramientas, es que sirven para construir prototipos de diseño rápido, a la hora de mostrarlo a un cliente, como referencia.

Mientras las desventajas que presenta, se enumeran a continuación.

  • El código HTML resultante al final es poco limpio, agrega etiquetas redundantes y a veces fragmentos de códigos innecesarios.

  • A veces al abrir el código con este tipo de programas, cambia su estado original, provocando resultados diferentes a los esperados o errores en el diseño.

  • Los paquetes mas versátiles requieren actualizaciones, y son costosas de mas de cientos de dólares.

No uses herramientas WYSIWYG. Mejor utiliza un editor de texto como Sublime Text o Visual Studio Code, y escribe tu mismo tu código HTML] y CSS.

Quizás muchos se preguntarán, si no recomiendo este tipo de herramientas WYSIWYG , porque me he tomado a la tarea de escribir acerca de ellas, pues en el comienzo es muy fácil desviarse por desconocimiento, y siempre van a existir los consejos, pero recuerda no todo el mundo da buenos consejos. Y se los cuento, porque en mis inicios en este Mundo de Diseño Web, un amigo con mayor experiencia me sugirió usar este tipo de herramientas y siempre crear una tabla para cualquier contenido en la web. Claro, él no lo hizo con mala intención, pero lo mejor es aprender HTML desde el vamos, y ya sabes que es el HTML5 tu destino por ahora, siempre y cuando no salga una versión nueva.

Las herramientas WYSIWYG para el diseño web, a mi punto de vista y aclaro que es solo mi humilde opinión, para no herir susceptibilidades son parte del pasado. La Vieja Escuela aun la sigue usando, pero si quieres ser un Diseñador Web Pro, haz caso omiso de ellas.

Definición de WordPress

Es un sistema de gestión de contenido o CMS (del inglés Content Management System) que te permite crear sitios web o Blogs de una manera sencilla y fácil sin necesidad de ser programador web.

Un blog se utiliza a manera de diario o apuntes en donde compartimos nuestras experiencias, hobbies, conocimientos, temas de trabajo , deportes, todo lo que se te ocurra , etc pero a través de Internet

Es gratuito, fácil de instalar, tiene una comunidad muy grande de programadores creando temas y plugins, ademas de foros en donde podemos encontrar repuestas a problemas que tengamos, tiene actualización constante. Es la plataforma ideal para crear la mayoría de nuestros proyectos.

Wordpress

Wordpress.com vs Wordpress.org.

Ojo no confundir Wordpress.com con Wordpress.org. En Wordpress.com podemos construir un sitio web sin necesidad de contratar un dominio ni un hosting. Se puede acceder de manera gratuita pero el dominio de nuestro sitio web llevara la terminación wordpress y este dominio nunca sera nuestro Ejemplo miproyecto.wordpress.com. La ventaja es que podemos ahorrarnos dinero en hosting y dominio, pero no recomiendo esto para algún proyecto serio o que tengamos como negocio, puede ser útil en el caso de algún profesor que quiera compartir con su clase a través de manera online; compartir documentos y demás contenido de interés. Pero para proyectos de emprendimientos, de marca personal o de compañías no, sino comprar nuestro dominio y hosting y acceder a Wordpress.Org.

Wordpress.Org. es una Open Source o plataforma de código abierto, así que descargas de manera gratuita de su sitio oficial, y ya lo tenemos disponible para subirlo a nuestro servidor. Y trabajar con el o de manera local con herramientas como XAMPP.

EL 34 % de los sitios web a nivel mundial son creados bajo la plataforma de Wordpress, en donde es el mas utilizado para periódicos, revistas y blogs.

Instalando Wordpress.

  1. Registra el dominio para tu sitio web, y busca un buen Hosting con soporte para Wordpress y mejor si tienes acceso a CPANEL incluido en tu plan de hosting en donde con un solo clic puede instalar Wordpress de la manera mas sencilla sin necesidad de crear manualmente las bases de datos para su instalación. El hosting que recomendamos con la empresa Banahosting , cumple con estos 2 requisitos.

  2. Descarga e instala Wordpress si prefieres hacer la instalación manual, e igual en menos de 5 minutos ya tienes tu CMS instalado.

  3. Te sugiero leer la documentación de Wordpress y se todo un experto en el manejo de él mismo y sorprende a tus amigos.

  4. Visita la Biblioteca del Saber en donde estaremos dando consejos acerca de como dar tus primeros pasos con Wordpress, en donde hablaremos de Divi el mejor tema para desarrollar sitios web para principiantes, los mejores plugins gratuito y de pago para Wordpress. Y el mejor SEO para Wordpress en la sección de SEO.

Ventajas de Wordpress.

  • Es muy fácil de usar, te permite crear un sitio web en pocos días.

  • Hay muchas funcionalidades que tu sitio web va a necesitar, y deberías saber de programación o contratar los servicios de un programador que sale costoso, con Wordpress a través de la instalación de temas y plugins, algunos gratis y otros pago puedes convertir tu sitio web en una tienda online, crear un área de miembros, crear secciones dinámicas e interactivas, y muchísimas otras cosas mas.

  • Es el gestor de Contenido recomendado por especialistas en el Mundo del Marketing y del SEO, ya que sabemos este mundo es muy amplio, y si al principio te enfocas en la programación, necesitas varios años para dominarlo, y ese tiempo te costara arrancar con el Marketing y la rentabilidad de tu proyecto. Con Wordpress solo tendrás que ocuparte del SEO y el Marketing.

  • Es útil para realizar sitios web administrables por los propios clientes, en donde si saben usar Microsoft Word, podrán escribir entradas sin ningún problema con Wordpress. Esto evita la dependencia de propietarios de sitios web hacia programadores, que para realizar un simple cambio, tengan que buscar los servicios de un especialista.

  • Su versatilidad de temas y plugins disponibles te da un gran abanico de opciones en cuanto al diseño de tu sitio web.

  • Para sitios que presten un servicio o producto, es ideal ya que este tipo de sitios se centran en las conversiones y con Wordpress sera muy fácil crear landing pages o paginas de aterrizaje de gran calidad, que aumentaran tus conversiones.

  • Te recomendamos darte la oportunidad de aprender Wordpress ya que seguramente lo vas a necesitar y utilizar en tus proyectos.

  • Es super útil para crear paginas de micro nichos de afiliados de Amazon, ya que existen plugin especiales para promocionar tus productos de afiliados de Amazon.

Desventajas de Wordpress.

  • El usar plantillas gratuitas te dará un uso limitado en cuanto a apariencia del diseño web, así como el insertar nuevas funcionalidades. Por lo que para tener un sitio web profesional deberás optar por comprar una plantilla Premium, en el cual pagas pero tienes los beneficios en caso de problemas y de brindarte actualizaciones para corregir fallos. O por otro lado tu mismo crear tus propias plantillas, pero debes tener un buen conocimiento de HTML, CSS, PHP] y JAVASCRIPT (Opcional).

  • Las plantillas traen muchas herramientas útiles pero a veces para nuestro proyecto en especifico, no necesitamos todas estas funcionalidades, lo que traería un exceso de código que en realidad no estamos utilizando, lo que se traduce en archivos mas pesados, que van a tener un tiempo de carga mayor.

  • Tienes menor flexibilidad para realizar modificaciones, tienes que adaptarte a la plantilla elegida, esto puede hacer por ejemplo que tus códigos de adsense o banner publicitarios, no sean mostrados en donde en realidad quieres mostrarlos.

  • Si quieres colocar estilos propios, diferentes a los de las plantillas, debes generar un documento CSS extra lo que te dará un tiempo de carga mayor.

  • Es como todo en la vida, nada es perfecto al 100 % ni del todo malo al 100%. Pienso es muy útil para proyectos con pocas visitas, digamos menos de 10.000 visitas diarias. Por que digo esto, porque como todas las herramientas de Wordpress tienen su peso, esto te ocupa espacio en tu disco duro, y a medida que vayas agregando nuevas secciones, categorías, páginas, entradas, imágenes y demás contenido, esta va aumentado su tamaño en el disco duro que posee, ademas el consumo de ancho de banda aumentará y al multiplicar por la cantidad de usuarios, pudieras excederte del máximo soportado por tu plan básico de hosting, por lo que para tener un sitio web funcional al 100% deberíamos de pagar un plan de hosting de mayores características, y por lo tanto mayor precio.

    Como en nuestro caso buscamos hacer mas, con el menor gasto posible. Esta opción no la vemos viable. Si vas a tener un sitio web de alto tráfico , es recomendable programarla desde 0. No digo que en proyectos de alto trafico no se deba usar WordPress, pero sino tenemos el capital para comprar servidores dedicados y exclusivos para nosotros, no podemos darnos ese gusto.

Definición de Dominio.

Seguramente ya quieres comenzara realizar tu proyecto web y has escuchado acerca de Dominio y Hosting pero en realidad no sabes bien de que trata todo eso.

El dominio viene siendo básicamente el nombre de tu sitio web, es la ruta que vas a colocar en el navegador para poder acceder a tu sitio web que debe estar colocado en un servidor, del cual hablaremos mas adelante.

Ejemplo https://www.google.com/ , este es el nombre del dominio principal; https significa que dicha página tiene un certificado de Seguridad SSL, este tema va a ser tratado en la sección de SEO , http también sirve de ruta a la página, pero dicha página con esta ruta es menos confiable al no tener un certificado de seguridad, y en tu barra de navegador en vez de aparecer el candado te aparecerá "no seguro". Ok el dominio viene siendo google.com en donde .com es la extensión, siendo ésta la mas usada .com , y para nosotros en Venezuela la extensión es .com.ve, en Perú .pe, en Colombia .co, en España .es. En vez de una global o internacional como la .com o la .net. Depende del tipo de tu negocio o proyecto, si no tiene segmentación internacional, puede ser muy útil una extensión del país en donde tu negocio tiene sede, ejemplo para un doctor o veterinario, le puede ser mejor usar el dominio de su país; lo mismo también puede aplicar para una ferretería o restaurante local.

Entonces en pocas palabras un dominio, es el nombre que asignamos a nuestra pagina y en el cual debemos colocar la extensión al dominio, ejemplo "miprimerdominio.com" y este es un dominio, y otra persona pudiera tener "miprimerdominio.net" y seria otra pagina diferente , aunque tenga el mismo nombre al tener extensión diferente es totalmente otra página diferente para los ojos de todo el mundo, en estos casos, es recomendable comprar el mismo nombre o dominio con varias extensiones para prevenir otro tome el nombre, como paso en el caso de datosdeparleygratis que empezó como .com.ve en Venezuela y luego alguien tomo datosdeparleygratis.com y por eso tuvieron que tomar el datosdeparleygratis.net al ya estar el dominio .com tomado por otras personas.

Cabe destacar que este nombre es único no puede haber mas de 1 dominio con el mismo nombre y extensión, por si ese nombre que hemos pensado utilizar ya esta tomado, deberíamos o probar cambiar la extensión o buscar otra alternativa que ya no este en uso. El dominio se renueva 1 vez al año, así que pasado el año de tu compra sino logras renovarlo, lo pudieras perder y si es comprado por otra persona, tendrías que ver si te lo quiere vender y generalmente a un monto muy por encima de su valor original. El costo promedio de un dominio a utilizar por primera vez no sobre pasa los 13 $, pero hay dominios ya establecidos o con algún nombre muy llamativo e interesante que alguna persona compró para tenerlo en su propiedad; así no sea su objetivo utilizarlo en un sitio web, lo puede colocar en venta por miles de dolares.

En el caso de datosdeparleygratis.com, se han hecho esfuerzo por recuperarlo pero al principio la persona que lo tenia en su propiedad exigía 800 $, luego al siguiente año pedía 150 $ y fue llevado a subasta y les ganaron la puja. Osea tiene casi 3 años deambulando ese dominio. Así que a veces cuando comenzamos y más en Venezuela, nos cuesta comprar varios dominios, pero es lo ideal hacer el esfuerzo y asegurar la extensión .com sobre todo que a mi juicio es la mas significativa.

dominio y hosting

Definición de Hosting.

Lo explicare de la manera mas fácil de como yo lo veo, seguro algún erudito en la materia tendrá una mejor definición.

Supongamos tenemos un documento en Microsoft Word, que seria nuestro tesis o trabajo de grado, ese trabajo lo dividimos en varios documentos, ejemplo la portada, la introducción, anexos, en capítulos, esos serian los distintos archivos o rutas que conformarían nuestra pagina web, todo esto lo guardamos en un carpeta ejemplo "mitrabajo", ya que los dominios no llevan espacios. Si queremos acceder en nuestro computador a esos archivos, vamos a la carpeta "mitrabajo" y veremos todos los archivos que la conforman y vamos accediendo a cada uno de ellos. Todo eso pasa en nuestra computadora, y solo lo pueden ver los que accedan a nuestra computadora.

Con el Hosting o servidor ocurre que en vez de tener ese archivo en nuestra computadora lo tenemos en el servidor, y cualquier persona , en cualquier parte del mundo, conectándose a nuestra ruta http://mitrabajo.com/ puede ver la página que hemos colocada como portada, que en estos caso el nombre de ese archivo se llama index y si la realizamos en HTML hay que colocar la extensión index.html y luego podemos acceder a los otros archivos colocando su ruta ejemplo http://mitrabajo.com/introduccion.html.

Simplificando, para tener nuestro sitio web visible para todos, debemos tener un dominio y un hosting. El precio del Hosting varia de acuerdo a las características y rendimiento que ofrezcA, en el cual se mide el procesador, la memoria RAM, el ancho de banda mensual, el espacio del disco duro. Para proyectos iniciales de pocas visitas al día no necesitamos de tanto equipo, pero si queremos convertir a nuestra página en una de las mas visitadas vamos a requerir la mejores características y si queremos ahorrar dinero, debemos realizar códigos bien optimizados y archivos de poco peso, para poder reducir el consumo de estos recursos, y tener mayores visitantes, pagando el menor precio.

Estos planes se pueden pagar mensualmente o anualmente, todo va a depender de tu cartera, mi consejo es que si puedes pagar el año completo mejor, así no tendrás que preocuparte por renovarlo por todo un año, ya que mensualmente, debes estar pendiente a final de mes de pagarlo, de lo contrario tu página no va a estar disponible por el tiempo que no pagaste.

Que Hosting Usar.

Existen infinidades de servicios para comprar Dominio y Hosting, pero seguramente muchas personas se estarán preguntando de todo este abanico de opciones, cual es confiable, y a buen precio.

Hablare del que he estado utilizando para mis proyectos , el cual es con la empresa Banahosting . Tienen soporte técnico en Español, e inmediato te comunicas con ellos y obtienes su repuesta en menos de 1 hora, el sitio web siempre esta disponible a diferencia de las empresas locales que había utilizado anteriormente, en donde algunas veces la página estuvo caída, claro una fue mejor que la otra, pero con Banahosting tenia atención inmediata, y no he tenido problemas con ellos, ademas si pagas 1 año completo te dan descuento.

Y para finalizar, y porque tengo la necesidad de decírtelo pertenezco al programa de afiliados de Banahosting , al comprar un hosting directo de mi enlace, me genera una comisión, por lo tanto la elección es tuya pero yo te recomiendo este Hosting porque no he tenido problemas con ellos, tiene la tecnología Lite Speed, su soporte es inmediato y en Español, es por eso te lo estoy recomendando, no por la afiliación, pero igual es algo que debes saber. Igual te invito a buscar otras opciones y tomes la que mejor se adapte a tus necesidades, por cierto otra ventaja de Banahosting es que tiene planes para que con un solo hosting tengas varias dominios, es decir puedes tener varias páginas web y solo pagas un hosting, a diferencia de otros servicios que tienes que usar 1 solo hosting por dominio, y si por ejemplo administras 5 sitios web debes pagar el hosting de 5, en cambio Banahosting tiene un plan que te permite contratar varios dominios en 1 solo hosting, tienes tus 5 dominios en un solo hosting, y pagas por solo uno.

Pablo Moya

Ingeniero Electrónico de profesión, egresado en el año 2009. Nativo de Venezuela, país que ha estado atravesando momentos muy difíciles, y paso más de 2 años para poder conseguir su primer empleo después de haberse graduado, pero en esa lucha y ese duro camino, se le quedó grabada una frase del gran genio Walt Disney, que decía que había 2 tipos de hombres, los que luchaban por un empleo y los que ellos mismos se creaban su propio empleo.

Se decidió a tomar la opción de ser creador de su propio empleo y destino. Aunque la vida le hacía conseguir su empleo, no se sentía feliz ni cómodo, por lo que decidió dejar ese empleo e incursionar al mundo de las ventas, y se le abría un mundo de posibilidades, logrando perder el miedo y vencer la timidez en cada visita que realizaba a un cliente, y logro entender que cada NO lo acercaba más a un SI.

En los últimos años ha dedicado sus estudios a las áreas de Diseño Web, Programación, SEO, Marketing y el aprendizaje del Idioma Inglés, y partiendo de la consigna que cuando ayudamos a los demás, nos ayudamos a nosotros mismos nace su proyecto de la Biblioteca del Saber, para compartir con todo el Mundo todos los conocimientos que ha ido adquiriendo a lo largo de su vida; con el fin de brindar técnicas y recomendaciones que ayuden a obtener mejores resultados en menor tiempo.