Cuando nos sentamos frente a la pantalla de nuestra computadora la mayoría no somos conscientes de que las tareas que podemos realizar son posibles gracias a un elemento fundamental conocido como «código fuente».
El código fuente consiste en las líneas de texto con las indicaciones que debe seguir una computadora para ejecutar un programa o software. Ahora bien, el código fuente de cualquier programa está escrito en un lenguaje de programación, el cual consiste en un lenguaje formal con sus reglas gramaticales que permiten que un programador redacte los algoritmos necesarios para que el programa funcione.
Cuando hablamos de páginas web es muy importante aclarar que nos referimos al lenguaje de programación HTML (Hyper Text Markup Language) y al código fuente con el que está redactado, que es posible modificar si se conocen sus rudimentos.
Además, es muy importante diferenciar los aspectos visuales de los estructurales de una página. Los primeros los define un diseñador web. Los segundos están relacionados con el lenguaje de programación HTML y definen aspectos como la disposición de la información y la estructura de la página. Si te interesa conocer la historia de este desarrollo informático te recomendamos el siguiente video:
Video de codigofacilito
Una de las principales características de esta función es que permite editar en tiempo real el código de una página web. A continuación veremos los tres elementos básicos de este lenguaje de programación que te servirán para editar un sitio web.
3 términos básicos para editar una página web
Cuando HTML fue creado en 1989 por Tim Berners-Lee contaba tan solo con 18 etiquetas, y su objetivo era compartir documentos de carácter científico. Hoy en día se considera la base del desarrollo web. Aunque ha tenido altibajos a lo largo de la historia es un estándar a nivel mundial.
Al comenzar a usar HTML, es probable que descubras muchos términos diferentes, con aplicaciones más o menos complejas. Con el tiempo te vas a familiarizar con todos ellos. Por ahora deja que te mostremos los tres términos con los que deberías comenzar:
1. Elementos
El portal especializado HTMLQuick lo define de esta manera: «HTML es un lenguaje de marcado compuesto por un conjunto de elementos que son la base de su estructura. Estos elementos conforman una caja de herramientas que los autores pueden usar para dar forma a sus documentos. Por ejemplo, pueden encontrar elementos que insertan párrafos, videos u otros documentos, o elementos que marcan citas, texto importante o los títulos de libros, películas, documentos y otros trabajos».
Los elementos se reconocen mediante el uso de dos corchetes angulares: «menor que» y «mayor que»: < >. Ambos están al lado del nombre del elemento, que se verá así:
Es muy importante resaltar que el elemento raíz es el propio <html>, el elemento que engloba a todos los demás, que puedes consultar en esta lista. A continuación mostramos un ejemplo de esta estructura, tomado de la página antes citada.
Imagen de HTML Quick
Algunos de los elementos más utilizados son los niveles de encabezados (identificados como elementos <h1> a <h6>) y párrafos (identificados como el elemento <p>)
Por último, cada elemento tiene una función específica, «algunos de ellos son exclusivamente semánticos, otros tienen un impacto en la representación del documento y algunos ambos». Por lo que es muy importante que te familiarices con el concepto de elemento, y con la idea de elemento raíz que sirve como contenedor de todos los otros elementos.
2. Etiquetas
«Un elemento HTML generalmente está compuesto por dos etiquetas: la etiqueta de apertura y la etiqueta de cierre». Así es como define las etiquetas el portal HTMLQuick.
El uso de corchetes angulares menores y mayores que acompañan a un elemento crea lo que se conoce como «etiqueta». Una etiqueta de apertura indica el comienzo de un elemento. Consiste en un signo «menor que» seguido del nombre del elemento y luego termina con el signo de «mayor que»; por ejemplo: <div>.
Una etiqueta de cierre marca el final de un elemento. Consiste en un signo «menor que» seguido de una barra diagonal y el nombre del elemento, y luego termina con el signo «mayor que». Por ejemplo, </div>.
Un enlace de anclaje, por ejemplo, tendrá una etiqueta de apertura de <a> y una etiqueta de cierre de </a>. Se verá así:
En el siguiente ejemplo: <b>texto importante</b> vemos las etiquetas de apertura y cierre, conforme a la sintaxis requerida por el código HTML, las cuales enmarcan, por decirlo así, el contenido del elemento. Conforme avances en tu conocimiento de este lenguaje descubrirás que hay elementos que no incluyen contenido y se les conoce como elementos vacíos: no contienen nodos secundarios. En este enlace puedes consultar algunos.
3. Atributos
Un elemento puede tener atributos y eventos, siempre y cuando no se trate de un elemento vacío, que no contiene nodos secundarios, como comentamos. Según el sitio que hemos citado, «mientras que los atributos definen valores o propiedades para ser usados por los navegadores en el procesamiento del documento, los eventos pueden emplearse para especificar comportamientos o acciones a realizar cuando se cumplen ciertas condiciones, como por ejemplo, cuando los usuarios hacen clic en el elemento».
Concentrémonos en los atributos. Estos definen propiedades utilizadas para proporcionar información adicional sobre un elemento. Generalmente, incluyen un nombre y un valor. El formato de estos atributos consiste en el nombre del atributo seguido de un signo «igual que» y luego de un valor de atributo entre comillas. Por ejemplo, un elemento <a> que incluye un atributo href (indica la URL del recurso que se quiere enlazar) se vería así:
«Los atributos y eventos comparten una misma sintaxis: deben insertarse como una lista de elementos separados por espacios dentro de la etiqueta estrella, después del nombre del elemento y precedidos por un espacio. Cada uno de estos elementos está compuesto por un nombre (para el atributo o evento), el signo igual (=) y el valor o función (a veces opcionalmente) entre comillas», como en el siguiente ejemplo:
El inspector de código te permite examinar, simular cambios y depurar el HTML, CSS y JavaScript de una página web.
La barra de herramientas generalmente se encuentra en la parte superior de la pantalla donde puedes controlar el inspector. El elemento seleccionado se resaltará y los otros elementos en la página se atenuarán. La edición te permite obtener una vista previa de la salida del contenido web con ajustes al código HTML, CSS y JavaScript.
Cada navegador difiere en cuáles herramientas proporciona exactamente. Cualquiera de ellas puede ayudarte a entender la estructura de tu sitio web y a editar tu página.
Cómo editar una página web: 5 pasos esenciales
Lo primero que debes saber es que cada navegador tiene su propia herramienta enfocada en los desarrolladores web, los primeros interesados en entender de qué manera está construido un sitio, con qué etiquetas, elementos y atributos fue diseñado; además de otros aspectos de programación y desempeño más avanzados.
En este caso hablaremos de Google Chrome y su herramienta del desarrollador, la cual es casi idéntica a la del nuevo navegador Microsoft Edge y la de Mozilla. Los ejemplos que verás a continuación se hicieron en Chrome, pero es igual en los demás.
Algunos aspectos a considerar antes de editar
Si tienes un sitio web que fue desarrollado en HTML necesitas las credenciales del administrador para hacer cualquier cambio en el diseño. Por básico que este sea requiere un conocimiento profundo de programación.
Si, por otro lado, tu sitio está albergado en un CMS, puedes modificar los aspectos básicos de HTML de tus contenidos. Los pasos que mencionaremos te ayudarán a identificar estilos para que los repliques en tus publicaciones. Es muy importante aclarar que este nivel de edición HTML está enfocado en los textos e imágenes que utilizas, no en el diseño del sitio.
1. Abre el código fuente
Cuando estés en la página que quieres editar, tienes la opción de ver el esqueleto de una sola vez si abres el código fuente. Solo tienes que ubicar el cursor en cualquier parte y hacer clic derecho para que aparezca un menú y elijas el comando «Ver código fuente» o «View Page Source», en inglés:
Fuente: blog de HubSpot
Y de inmediato se abrirá otra pestaña en tu navegador, donde tendrás acceso al código de toda la página. Se verá parecido a esto:
2. Identifica lo que deseas editar
Seguro ya puedes identificar las etiquetas, atributos y elementos que ya te explicamos unas líneas más arriba. Así es como luce el código de la entrada de nuestro blog. Sobre todo si es la primera vez que lo haces, puede sentirse un poco abrumador. Y si quieres editar una sola etiqueta o elemento, no la veas de inmediato. Para que identifiques más rápido lo que deseas editar, hazlo como buscarías cualquier palabra en una página: ctrl + F (Windows) o cmd + f (Mac Os).
En este ejemplo buscamos los títulos:
Y ya que ubicas qué es lo que vas a modificar, es momento de editar ese código en particular.
3. Abre el código del elemento, etiqueta o atributo que editarás
Ubica el cursor sobre lo que vas a modificar y haz clic derecho. Volverá a desplegarse el menú con el que pudiste abrir el código fuente completo, solo que en esta ocasión debes seleccionar «Inspeccionar» o «Inspect», en inglés:
Cuando lo hagas, la misma página se dividirá en dos y te mostrará el código de tu selección, que también aparecerá resaltado en gris.
Incluso lo puedes hacer sin abrir el código fuente si ya sabes qué deseas hacer o no tienes necesidad de conocer el código de la página completa. Así se vería si eliges el mismo título que el ejemplo, haces clic derecho y seleccionas «Inspeccionar»:
Ahora es momento de editar.
4. Edita en HTML
Cuando la página está alojada en un CMS, esto es un proceso muy sencillo. Solo debes poner atención a los elementos que caracterizan a cada aspecto que deseas editar, porque eso es lo que vas a estar moviendo en esta parte.
Usaremos un ejemplo en el que queremos cambiar uno de los subtítulos h3 por un h4, que es más pequeño, y lo resaltaremos con letras bold. Este es el h3 («2. Reconocer a tus mejores clientes») que modificaremos, y cuando lo lees al visitar el blog, luce así:
Después de abrir el código del h3, como lo explicamos en el paso 3, y que tienes la mitad de la pantalla con toda la información de código a la vista, puedes comprobar las etiquetas que tiene el elemento si pasas el cursor encima de su propio código:
Del lado izquierdo está la visualización de la página y en el globo de diálogo puedes leer que es un h3 y el tamaño que tiene. Del lado derecho, está toda la información del código y, resaltado en azul, el del título. Para editarlo, haz clic en los tres puntos que se ven en el extremo izquierdo de esa franja azul. Verás un menú; elige «Editar como HTML» o «Edit as HTML», en inglés:
5. Haz los cambios en el editor
Cambia los elementos que indican el tamaño del título y el peso de las letras. Lo único que se debe modificar es lo que está entre los signos «mayor que» y «menor que», que en código se ve así:
<h3>2. Reconocer a tus mejores clientes </h3>
Se edite a esto:
<h4><strong>1. Elementos</strong></h4>
Así lo ves en el editor:
Lo puedes comprobar igual que con el h3 original:
Y así lo vería una persona que visite la página en ese momento:
Fuente: blog de HubSpot
¿Notas la diferencia?
Este tipo de cambios los puedes hacer en tu página cada vez que lo necesites y serán visibles de manera inmediata. Solo cierra el editor de código cuando termines y refresca la página para que los veas.
Algunos códigos HTML básicos
Ahora hablaremos de cómo identificar y modificar algunos de estos elementos, con el fin de que te familiarices con el código HTML.
Para títulos
<title> Título de la página </title>
<h1>Título principal</h1>
<h2>Siguiente nivel de título</h2>
<h3>Subtítulo</h3>
Para escribir párrafos:
<p>Primer párrafo de tu contenido</p>
Para crear viñetas:
Viñetas simples
<ul>
<li>Ideas que quieres destacar</li>
<li>Ideas interesantes</li>
</ul>
Viñetas enumeradas
<ol>
<li>Elemento uno</li>
<li>Elemento dos</li>
</ol>
Si te interesa modificar otros aspectos más elaborados, te recomendamos la guía de desarrolladores de Mozilla. En ella encontrarás más opciones para modificar atributos, textos alternativos en imágenes y recursos muy variados que te serán de utilidad si tu intención es mejorar tus habilidades de programación HTML básicas.
Como puedes ver, editar un sitio web requiere conocimientos avanzados de programación. Editar los contenidos desde un CMS, aunque exige cierto conocimiento de HTML, es mucho más sencillo y se limita a elementos básicos. A continuación hablaremos de las ventajas de los gestores de contenido al momento de editar tu sitio web.
6 ventajas de un CMS para editar sitios web con facilidad
Un CMS es una plataforma web estandarizada que permite a los usuarios crear contenido para su página sin necesidad de contar con conocimientos técnicos de programación. Estos gestores son perfectos para modificar el aspecto y el contenido sin tener que cambiar el código fuente del sitio, con la comodidad y el ahorro de tiempo que esto supone.
Quizá te preguntes en este momento: ¿cuál es la diferencia entre un sitio desarrollado con un CMS y otro hecho con estos lenguajes de programación?
HTML es para sitios con pocas páginas, pues cada cambio que requieras hacer deberá estar hecho desde el código. En cambio, un CMS es preferible para sitios web y aplicaciones con varias páginas, donde necesitas dinamismo a la hora de hacer los cambios.
Como puedes ver, las diferencias radican en el tipo de sitio web que necesites.
Un gestor de contenidos es la herramienta indicada si tienes pensado crear un sitio web empresarial con servicio de tienda electrónica, blog, landing pages y otras opciones, además de las necesidades de monitoreo de la actividad que los usuarios realizan.
Además, las modificaciones que se realizan en un CMS no requieren conocimientos de programación. Aunque sí es importante que tengas un equipo experto asignado a las tareas de gestión, administración, monitoreo y mantenimiento de tu sitio. En cambio, una página creada desde cero con lenguaje de programación forzosamente precisa de la intervención de un experto para realizar ajustes, mantenimiento y modificaciones.
Al editar en un CMS disfrutarás de los siguientes beneficios:
1. Cambia el contenido y la funcionalidad del sitio fácilmente
Un CMS, por lo regular, permite a los usuarios sin capacitación técnica agregar, formatear y editar contenido en un sitio web, sin alterar el diseño y codificación del sitio. A cada usuario se le asignan los permisos de acceso selectivo en función de su rol. Por ejemplo, puedes permitir que algunos usuarios solo agreguen y editen su propio contenido, mientras que a otros les das un acceso de administrador, con menores restricciones.
2. Sube archivos más rápido
Por medio del CMS es más fácil cargar imágenes directamente cuando agregas contenido a una página web. También puedes hacer esto directamente cuando personalizas tu tema. Lo mismo sucede con videos, gráficos, gifs y otros productos audiovisuales.
3. Cambia el estilo visual las veces que quieras
Cambia el color de tus cajas de texto y del texto para añadir más estilo y personaliza el tema con videos, imágenes, páginas y categorías. Hazlo las veces que sea necesario hasta que encuentres el diseño que se identifica con tu marca.
4. Promueve tu posicionamiento SEO
Con ayuda de un CMS es más fácil posicionar tu sitio web en Google si cuentas con un gestor de contenidos altamente optimizado. CMS Hub integra todas las herramientas de optimización de contenidos que son necesarias para sobresalir en los motores de búsqueda.
Además de las ventajas que ofrece el gestor de contenidos gratuito de HubSpot, entre las características del CMS Hub figuran las siguientes:
- Temas flexibles
- Creación y prueba de contenido en múltiples idiomas
- Comunidad y documentos para desarrolladores
- Alertas de código
- Pruebas adaptativas
Y muchas otras características enfocadas en la administración de contenidos, el monitoreo de las métricas de tu sitio y la posibilidad de desarrollar un sitio web a la medida.
5. Ahorra recursos
Es mucho más barato editar un sitio web con un CMS que con cualquier otra herramienta. Aun si no sabes nada acerca del código HTML, podrás ahorrar tiempo con la asistencia especializada externa, además de aprender por ti mismo a solucionar los pequeños problemas que vayas encontrando. Será todavía mejor si tu gestor de contenidos cuenta con ayuda técnica online siempre disponible.
6. Configura los permisos de acceso
El uso de un CMS te permitirá crear varios usuarios con acceso a la página web. Así tendrás la oportunidad de especificar una serie de permisos concretos que pueden otorgarse a los administradores, editores o colaboradores de tu sitio.
Mientras que algunos usuarios pueden editar contenidos ya publicados, otros necesitan supervisión antes de verlos. Esto facilita mucho el trabajo a la hora de mantener y actualizar el sitio, al mismo tiempo que contribuye a la seguridad.
El desarrollo web puede ser complicado. Es por eso que los especialistas en marketing usan las herramientas que les facilitan este aspecto emocionante, pero técnico, y con un nivel de complejidad que exige profesionales capacitados, con el fin de dedicarse de lleno a lograr sus metas como profesionales del marketing.
Prueba las ventajas del gestor de contenidos gratuito de HubSpot, con el que ahorrarás tiempo para lograr el aspecto que quieres en tu sitio web, a la vez que alcanzarás tus objetivos de servicio, ventas y marketing más rápido.
