Warning: Declaration of TCB_Menu_Walker::walk($elements, $max_depth) should be compatible with Walker::walk($elements, $max_depth, ...$args) in /home/libertad/public_html/wp-content/plugins/thrive-leads/tcb/inc/classes/class-tcb-menu-walker.php on line 0
 Google+Programar Wordpress: Importancia y Fundamentos Básicos ▷【2019】>>> ✪ comprardominioweb.com Programar Wordpress: Importancia y Fundamentos Básicos ▷【2019】>>> ✪ comprardominioweb.com

programar en wordpress

Los Lenguajes de programación son la base de todo el software que conocemos hoy en día. WordPress en sí está desarrollado bajo diversos lenguajes de programación que se encargan de funciones, tanto de acción como estéticas, de forma específica.

Por lo tanto tener conocimientos acerca de los mismos te ayudará a exprimir al 100% las posibilidades que brinda este CMS.

A lo largo de este post te enseñaremos diversos lenguajes y su importancia, para que así puedas tener una mejor comprensión del tema, logres aprender progresivamente los lenguajes de forma autónoma y puedas programar wordpress como si tuvieses años haciéndolo.

Por lo tanto, espero que con este post no solamente comprendas bajo qué cimientos está construido WordPress y cómo puedes aprovechar estos lenguajes para aumentar sus posibilidades.

Sino que logres un entendimiento global y general de cómo funcionan estos lenguajes de programación bajo el ámbito web y el desarrollo de aplicaciones, para así entender mejor esta inmensa plataforma denominada internet.

 

Lenguajes de Programación ¿Qué son?

Un lenguaje de programación es un lenguaje formal diseñado para realizar procesos que pueden ser llevados a cabo por máquinas como las computadoras, pueden usarse para crear programas que controlen el comportamiento físico y lógico de una máquina, para expresar algoritmos de manera precisa, o incluso como una forma de comunicación humana.

Está formado por un conjunto de símbolos y reglas tanto sintácticas como semánticas que definen su estructura y el significado de sus elementos y expresiones.

Al proceso por el cual se escribe, se prueba, se depura, se compila (de ser necesario) y se mantiene el código fuente de un programa informático se le llama programación.

Los Lenguajes de Programación, buscan desarrollar programas que manejen cualquier tipo de tarea tal como lo haría un humano, con el paso de los años esto se ha convertido más y más real, logrando una afinidad con la comunicación básica de los seres humanos.

Como consecuencia ha brindado más simplicidad y una curva de aprendizaje menos pronunciada para nuevos usuarios, pero no siempre fue así, en sus principios, estos lenguajes eran realmente complicados de aprender, así que déjame contarte un poco de su historia.

 

Inicios de los lenguajes de programación

Las máquinas trabajan bajo el código binario, es decir, 0 y 1, el cual es realmente sencillo y eficaz para las computadoras y otros dispositivos de comprender, pero no para una persona, por lo que los primeros usuarios de computadoras decidieron realizar un traductor que pudiera convertir los 0 y 1 en palabras o abstracciones provenientes del idioma inglés, a este lenguaje se le llamo Lenguaje Ensamblador. 

El primer programador conocido en la historia fue una mujer llamada Ada Lovelace, y su trabajo fue realmente importante para conocer lo que hoy en día sabemos.

La manera en la que amplio el trabajo de Charles Babbage fue determinante para próximas evoluciones de estos sistemas, Incluso, el lenguaje de programación Ada es uno de los más avanzados y es usado por el Departamento de Defensa de los Estados Unidos de América.

Fue en 1953, cuando John Backus dio la idea a IBM para crear un lenguaje más avanzado que el lenguaje ensamblador, y aquí fue donde se creó en lenguaje Fortran, uno de los más avanzados para el momento

Este fue usado para la programación de la computadora central IBM 704. Posteriormente aparecieron lenguajes como el COBOL (aún utilizado hoy en día en la informática de gestión) y en la actualidad los lenguajes más avanzados son el C++ (creado en 1980 por Bjarne Stroustrup), C y JavaScript.

 

Los 4 Pilares: HTML, CSS, JavaScript y PHP

A lo largo de todo internet conocemos 4 pilares básicos y fundamentales para el desarrollo de sitios web de calidad y complejidad, estos pilares están conformados por 4 lenguajes que se encargan de realizar diversas tareas y funciones de manera específica cada uno, los cuales son: HTML, CSS, JavaScript y PHP.

En el desarrollo de este artículo te explicaremos cada uno de ellos, su historia, cómo funcionan y para que, fundamentos básicos y algunos extras en ciertos casos, sin más que añadir, estos son los 4 lenguajes que forma parte de las bases de todas las webs alrededor del mundo.

 

HTML

 

html wordpressEl lenguaje HTML, siglas en inglés de HyperText Markup Language (Lenguaje de marcado te texto), hace referencia al lenguaje de marcado para la creación de páginas web.

Es un estándar que sirve a modo de referencia del software que conecta con la creación de páginas web en sus diversas versiones, definiendo una estructura básica y un código que se denomina como código HTML) para definir el contenido de una página o sitio web tales como texto, imágenes, videos, etc.

Es un estándar del cual está a cargo el World Wide Web Consortium (W3C) organización la cual se dedica a la estandarización de casi todas las tecnologías ligadas a la web y su entorno, más que todo en lo referente a su interpretación y escritura.

Se considera el lenguaje web de mayor relevancia, siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW).

Este se ha impuesto con carácter imperativo en la visualización de páginas web y es el que todos los navegadores actuales han adoptado y probablemente sigan adoptando de aquí a unos años debido a su capacidad para avanzar y volverse más complejo.

 

¿Cómo Funciona?

El lenguaje HTML basa toda su filosofía de desarrollo en lo que determinan como «diferenciación». Para añadir un elemento externo a la página (imagen, vídeo, script, entre otros.), no se realiza una incrustación directa en el código, sino que se realiza una referencia del archivo mediante texto.

Con esto, lo que logramos que la web contenga única y exclusivamente texto, y que la tarea de reunir todos esos archivos a los que hemos hecho referencias recaiga en el navegador para así mostrar el producto final, es decir, la página web.

Al ser un estándar, el enfoque principal del código HTML es permitir que cualquier web escrita en cualquier versión del lenguaje pueda ser descifrada e interpretada de manera correcta y eficaz por cualquier navegador.

Sin embargo, a lo largo de su historia, diversas características han sido añadidas como otras removidas, todo esto con el objetivo de hacer las webs más eficientes y más compatibles con distintos navegadores y plataformas (PC de escritorio, portátiles, teléfonos inteligentes, tabletas, smartwatches, etc.)

Eso sí, si tu navegador esta actualizado no tendrá ningún problema en comprender y descifrar código HTML de versiones anteriores.

El problema se puede presentar en el caso opuesto, versiones de buscadores tales como Chrome o Firefox desactualizadas podrían no interpretar de manera correcta código HTML escrito en versiones posteriores a la cual soporte el navegador.

Por esto, el desarrollo de buscadores y de este código van de la mano para brindar la mejor experiencia posible al usuario.

 

Fundamentos Básicos

Cuando el código HTML fue creado en 1991 por Tim Berners-Lee, incluía 18 elementos en su diseño inicial y 13 de ellos siguen vigentes hoy en día.

Tim consideraba el HTML como la ampliación del lenguaje SGML, otro lenguaje de marcado. El HTML se escribe en forma de <<etiquetas>>, rodeados por corchetes angulares (<,>,/) y hasta cierto punto es capaz de describir la apariencia de un documento.

De igual manera, también sirve para referirse a contenido de tipo MIME text/html, ya sea de forma descendida XML o directamente descendida de SGML.

El código HTML consta de varios elementos esenciales, entre estos encontramos los elementos y los atributos.

 

Elementos

Los elementos son la estructura básica y elemental del código HTML, estos poseen dos propiedades básicas que son: contenido y atributos, cada uno con sus respectivas restricciones que lo mantienen perteneciente al lenguaje HTML.

Los elementos generalmente tienen dos etiquetas, una de inicio (por ejemplo, <nombre-del-elemento>) y una de cierre (por ejemplo, </nombre-del-elemento>), la de cierre siempre debe llevar el símbolo «/» luego del «<» para indicar que es el cierre de un elemento.

Los atributos de cada elemento se indican en la etiqueta de inicio y el contenido dentro del mismo se ubica entre la etiqueta de inicio y la etiqueta de cierre (por ejemplo, <nombre-del-elemento atributo=»valor»>Contenido</nombre-del-elemento>)

Por el otro lado y de una forma más gráfica y simple de comprender para el usuario promedio, el código HTML también tiene funciones estructurales, por ejemplo.

El elemento <h4>Hola</h4> indicará al navegador web que la palabra «Hola» es un encabezamiento de tercer nivel, y se mostraría como la palabra Elementos al inicio de esta sección.

También tiene funciones presentacionales, las cuales se encargan de describir la apariencia del texto. Por ejemplo:

  • <b>Hola</b> es un indicativo de que el texto debe mostrarse en negrita, es decir, así Hola. También podemos hacer uso de las etiquetas  <strong></strong> porque tienen una naturaleza mas semántica
  • <i>Hola</i> es un indicativo de que el texto debe mostrarse en itálicas, es decir, así Hola. También podemos hacer uso de las etiquetas <em></em> porque tienen una naturaleza más semántica

Sin embargo, estos no definen la estructura de un texto tal como lo haría el <h2>, debido a que se mostrarían de la misma forma que el párrafo, solo cambia la forma en la que se presenta y se ve, hacer uso de estas funciones presentacionales es clave para marcar énfasis y contenido importante dentro de un texto, sin embargo esta función se elimino con HTML 4.0, y se utilizan CSS a favor.

De igual forma, el código HTML también sirve para crear hipervínculos, esto se realiza mediante la etiqueta <a> junto al atributo href, la cual se encarga de establecer la conexión con el URL de enlace.

Por ejemplo, si quisiéramos establecer un hipervínculo con nuestra página de inicio, escribimos el siguiente código en donde nos gustaría que estuviese colocado el enlace, <a href=»https://www.comprardominioweb.com»>comprardominioweb.com</a>, con esto, lo que lograremos es algo así comprardominioweb.com. En otros casos, también podemos hacer enlaces a objetos, por ejemplo: <a href=”enlace”><img src=”imagen” /></a>.

 

Atributos

Generalmente, los atributos de un elemento son pares nombre-valor, que se separan usando un signo de igual «=», y que se escriben luego del nombre del elemento en la etiqueta de inicio del elemento.

Estos suelen ir enmarcados con comillas dobles («) o comillas simples (‘) obligatoriamente en XHMTL, en el HTML pueden haber algunos sin estos símbolos, pero no es nada recomendable ya que pueden generar errores o inestabilidad.

Códigos HTML Básicos

  • <html>: define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML. Esto es así, ya que en teoría lo que define el tipo de documento es el DOCTYPE, que significa la palabra justo tras DOCTYPE el tag de raíz.
  • <script>: incrusta un script en una web, o llama a uno mediante src=»url del script». Se recomienda incluir el tipo MIME en el atributo type, en el caso de JavaScript text/javascript.
  • <head>: define la cabecera del documento HTML; esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario como, por ejemplo, el título de la ventana del navegador.
  • <title>: define el título de la página. Por lo general, aparece en la barra de título encima de la ventana.
  • <link>: se usa para vincular el sitio a hojas de estilo o iconos. Por ejemplo: <link rel=”stylesheet” href=”/style.css” type=”text/css”>.
  • <style>: usado para colocar el estilo interno de la página; ya sea con el uso de CSS u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <link>.
  • <meta>: para metadatos como la autoría o la licencia, incluso para indicar parámetros http (mediante http-equiv=» «) cuando no es posible modificar por no estar disponible la configuración o por dificultades con server-side scripting.
  • <body>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes.
  • <article>: Representa una composición auto-contenida en un documento, página, una aplicación o en el sitio, que se destina a distribuir de forma independiente o re-utilizable.
  • <h1> a <h6>: encabezados o títulos del documento con diferente relevancia, importantes para el SEO
  • <table>: define una tabla.
  • <tr>: fila de una tabla.
  • <td>: celda de una tabla (debe estar dentro de una fila).
  • <footer> : representa el pie de un documento o sección. La información que se suele añadir en este bloque es el autor del documento, enlaces a contenido relacionado, información de copyright, avisos legales, redes sociales, etc.
  • <a>: hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el parámetro de pasada por medio del atributo href. Por ejemplo: <a href=http://www.example.com title=”Ejemplo” target=”_blank” tabindex=”1”>Ejemplo</a> se representa como ejemplo.
  • <div>: división de la página. Se recomienda, junto con CSS, en vez de <table> cuando se desea alinear contenido.
  • <img>: imagen. Requiere del atributo src, que indica donde se encuentra la imagen. Por ejemplo: <img src=»ejemplo.jpg» />. Es conveniente, por accesibilidad, poner un atributo alt=»Texto alternativo» 
  • <li> <ol> <ul>: etiquetas para listas.
  • <b>: texto en negrita (etiqueta desaprobada a partir de HTML 4.0. Se recomienda usar la etiqueta  <strong>).
  • <i>: texto en cursiva (etiqueta desaprobada a partir de HTML 4.0. Se recomienda usar la etiqueta  <em>).
  • <s>: texto tachado (etiqueta desaprobada a partir de HTML 4.0. Se recomienda usar la etiqueta  <del>).
  • <u>: Antes texto subrayado. A partir de HTML5 define porciones de texto diferenciadas o destacadas del resto, para indicar correcciones por ejemplo (etiqueta desaprobada en HTML 4.01 y redefinida en HTML 5).
  • <main>: división estructural de la página que engloba el contenido principal de la misma.
  • <span> : Sirve para diferenciar un texto de otro.

 

Ahora que ya sabes cómo funciona el código HTML, sus funcionalidades y como aplicarlo a un nivel básico, te alentamos a que continúes aprendiendo sobre este lenguaje ya que realmente te será útil, si deseas aprender a fondo acerca del lenguaje HTML, te recomendamos que visites https://desarrolloweb.com/html/.

 

CSS

 

como aprender a programarHTML es la definición de funcional, pero es completamente el antónimo de estético, para 1991 (cuando el código HTML fue creado) no era para nada importante que fuese bonito, solamente era esencial que funcionará bien, básicamente porque este era su propósito.

Bajo ninguna circunstancia se adoptó la posición de que el código HTML fuera también estético, por ende, esto se pasó por alto durante un tiempo.

Cuando se dieron cuenta de que podían hacer que también se viera bien, ya habían años previos de desarrollo y tener que reestructurar todo para que también cumpliera el ámbito gráfico era un poco irrealista.

Por lo tanto decidieron dejar el lenguaje HTML para lo que fue diseñado, para cumplir funciones y desarrollar contenido, y se decantaron por crear un nuevo lenguaje que modificará los aspectos visuales de este código, aquí nació el lenguaje CSS.

El lenguaje CSS fue creado en 1995 por Hakon Wium Lie, el cual trabaja con Tim Berners-Lee en el CERN.

Diversas propuestas para mejorar la parte gráfica del contenido fueron presentadas pero sin duda la mejor fue la de Hakon, y aquí nació el CSS1, la primera versión de las hojas de estilo en cascada.

Para 1997 fue lanzada la segunda versión, el CSS2 y a fecha de hoy estamos en la versión CSS3, que comenzó su desarrollo en el 2004 y hoy en día sigue mejorando y ampliando sus funcionalidades.

 

Exactamente, ¿Qué es el lenguaje CSS?

El lenguaje CSS, siglas en ingles de Cascading Stylesheets (Hojas de estilos en cascada) es un lenguaje gráfico encargado de definir y crear la presentación de un documento construido en un lenguaje de marcado, tales como HTML o XHTML.

Es muy utilizado para el diseño de páginas web e interfaces de usuario desarrolladas en HTML o XML, además, no solamente se limita al apartado gráfico, este lenguaje también permite crear Hojas de estilo auditivas.

Es aplicable a todo tipo de documentos XML, como por ejemplo: XHTML, SVG, XUL y RSS, entre otros.

Este lenguaje se encarga de separar el contenido de su forma de presentarse, permitiendo flexibilidad y customización, siendo capaz de manejar cualquier tipo de características, tales como color, fondo, tamaño, capas, fuentes, etc.

De igual manera, es muy eficaz para la optimización de páginas web, debido a que permite que varias secciones o partes de un mismo documento HTML compartan las mismas características sin necesidad de repetir el código para cada una de ellas.

Simplemente con un archivo .css aparte que se encargue de manejar los fragmentos a los que se les ha aplicado el estilo, obteniendo como resultado un código comprimido, sencillo y fácil de resolver por los navegadores.

Otra de sus características es su «inteligencia autónoma» por denominarlo así, ya que al ser hojas de estilo en cascada, está desarrollado bajo un sistema prioritario, es decir, si un documento posee diversos archivos .css aplicados.

El mismo se encargará de analizar prioridades para mostrarlo ya sea en una computadora, portátil, dispositivo móvil e incluso lectores de pantalla, todo este proceso ocurre bajo una serie de reglas lo que permite predecir los resultados y hacer el desarrollo de contenido gráfico mucho más eficiente y de mejor calidad.

Un ejemplo muy básico de código CSS puede ser el siguiente:

h3 {
text-align: center;
color: navy;
font-size: 18px;
font-family: Arial;
}

Aquí, básicamente estamos definiendo que un título de tercer nivel este alineado al centro, tenga un color azul marino, esté presentado en un tamaño de 18 píxeles y que use la fuente Arial.

 

Fundamentos Básicos

El código CSS puede parecer complicado al principio, pero una vez que entendemos como está conformado, su aplicación será realmente sencilla, y podremos comenzar a definir estilos gráficos a documentos HTML para que se comiencen a ver mejor.

Conocer estos recursos es vital al programar en wordpress, debido a que si descargas un tema y quieres cambiar un estilo específico, conocer de CSS te permitirá cambiarlo sin ningún problema, esto podrían ser fuentes, colores, tamaños para los títulos y subtítulos, etc.

En otros casos, al desarrollar la parte gráfica de un plugin es de carácter imperativo conocer este lenguaje, debido a que a medida que ha ido evolucionando el mundo web, la experiencia de usuario y la parte estética de las interfaces, sitios web, tiendas de E-commerce y blogs, entre otros, se ha convertido en un elemento clave capaz de diferenciarte sobre tu competencia.

Más que todo para el nuevo usuario que quiere montar un negocio y necesita una web, debido a que sus conocimientos no irán tan lejos para enfocarse más en el funcionamiento y optimización de un sitio, lo que realmente llamará su atención es como se ve y cómo se comporta.

Así que si eres un desarrollador, hoy vale hacer las cosas tanto bonitas como funcionales para que es servicio prestado sea de mayor calidad y con un mayor valor añadido.

 

Cómo se constituye un código CSS

Cada código CSS está estructurado en 4 partes básicas, estas son:

  • Selector: Es el elemento al cual se aplicará el estilo.
  • Declaración: Es donde va el contenido del estilo que modificará al selector, siempre se inicia con una llave de apertura ({) y termina con una llave de cierre (}).
  • Propiedad: Es lo que modificaremos el selector, por ejemplo: «color».
  • Valor: Es el valor correspondiente a la propiedad, este puede variar su formato dependiendo de la propiedad elegida.

Por Ejemplo, en el siguiente código veremos una instrucción CSS muy sencilla y quebraremos cada una de sus partes para poder visualizarlo y entenderlo mejor:

 

h1 {color: #d1d1d1;}

En este caso, el selector es h1, ya que será el elemento que modificaremos, luego encontramos la declaración, donde inicia y termina la llave, dentro de la misma esta la propiedad, la cual es la palabra «color» que usaremos para definir el color del h1, y separado por dos puntos encontramos el código hexadecimal del color que aplicaremos, este es el Valor, es cual será un gris tenue.

Esta es la estructura básica, sin embargo, es totalmente válido agregar más propiedades a un mismo elemento, tales como el tamaño de la fuente, su alineación, etc.

De igual manera, como cambia la propiedad, cambiará el valor, en el tamaño de la fuente nos encontraremos con una medida llamada pixeles (px) y en la alineación nos encontraremos con valores más semánticos tales como left (izquierda), right (derecha), center (centro), entre otros.

 

Propiedades Básicas

Ya que hemos entendido cómo se conforma un código CSS, debemos seguir aprendiendo y conocer las propiedades gráficas más elementales dentro de este lenguaje gráfico, principalmente para entender qué propiedad realiza cada función específica y poder aplicarlas a nuestros documentos HTML, a continuación, estas son las propiedades más sencillas alojadas en el lenguaje CSS:

 

  1. Maquetación básica
  • width: Ancho de un elemento.
  • height: Alto de un elemento.
  • vertical-align: Alineación vertical dentro de un elemento.
  • margin: Espacio que se añade entre el elemento y sus vecinos. Se puede diferenciar por lado (arriba, abajo, izquierda, derecha).
  • padding: Relleno interior que se añade en los bordes. A diferencia de margin, cuenta para el tamaño del elemento.
  • float: Mueve el elemento todo lo posible hacia el lado indicado. Esta propiedad se usa en el posicionamiento flotante de CSS. El tema del posicionamiento en CSS no es trivial y conviene estudiar cómo funciona antes de usar esta propiedad.
  • clear: Controla el comportamiento de los elementos adyacentes a elementos posicionados de forma flotante

 

  1. Fuentes y texto
  • font-family: Tipo de letra
  • word-spacing: Establece la separación entre las palabras del texto
  • font-size: Tamaño de la letra
  • font-weight: Peso (normal, negrita, …)
  • font-style: Estilo (normal, cursiva, …)
  • text-decoration: “Decoraciones” tales como subrayado, tachado, etc.
  • font-variant: Establece la variante del tipo de letra.
  • text-align: Alineación del texto (izquierda, derecha, etc.)
  • text-indent: Establece la tabulación o indentación de la primera línea del texto de un elemento.
  • line-height: establece el interlineado del texto.
  • text-transform: Mostrar un texto en mayúsculas, minúsculas o la primera letra de cada palabra en mayúsculas.
  • letter-spacing: Establece la separación entre las letras del texto

 

  1. Color y fondos
  • color: Color del elemento. Se puede especificar en diferentes formatos como palabras predefinidas (red, green, etc.) RGB o como valor hexadecimal.
  • background-color: Color del fondo del elemento.
  • background-image: Permite especificar una imagen de fondo.
  • background-repeat: Permite usar una imagen a modo de mosaico en diferentes modalidades.
  • background-attachment: Controla si la imagen de fondo se mueve o permanece fija al hacer scroll en el navegador
  • background position: Controla la posición de las imágenes de fondo.
  • box-shadow: Crear un efecto de sombra para un elemento.

 

  1. Clasificación
  • list-style-image: Usar la imagen especificada como viñeta para la lista.
  • list-style-type: Diferentes estilos de viñetas y estilos de numeración para elementos de lista.
  • list-style: Establece alguna o todas las propiedades del marcador de los elementos de una lista.
  • display: Establece el tipo de caja generada por un elemento.
  • white-space: Establece el tratamiento de los espacios en blanco.
  • list-style-position: Establece la posición del marcador de los elementos de una lista.

 

  1. Bordes
  • border: Establece alguna o todas las propiedades de los bordes de un elemento, puede ser superior, inferior, izquierdo o derecho.
  • border-color: Color del borde.
  • border-style: Diferentes estilos para el borde (sólido, puntos, etc.)
  • border-radius: Permite crear esquinas redondeadas para un elemento.

 

Niveles del lenguaje CSS

A lo largo del desarrollo del lenguaje CSS se han ido creando diversas versiones y perfiles, cada uno ha sido construido encima del nivel previo, siendo la prioridad siempre hacer avances e implementar mejoras dentro del lenguaje.

Hoy en día existen diversos perfiles, para implementación en diferentes dispositivos, tales como impresoras, dispositivos móviles, lectores de pantalla, televisores, etc.

Cada uno está definido y estructurado para una interfaz especifica, logrando brindar la mejor experiencia de usuario posible.

 

CSS1

Fue la primera versión recomendada por la W3C, creada en el año 1995 y denominada como CSS1, conocida como la primera versión de un lenguaje gráfico avanzado aplicable a todo tipo de documentos XML, brindaba las siguientes funciones:

  • Propiedades de las fuentes, como tipo, tamaño, énfasis…
  • Color de texto, fondos, bordes u otros elementos.
  • Atributos del texto, como espaciado entre palabras, letras, líneas, etcétera.
  • Alineación de textos, imágenes, tablas u otros.
  • Propiedades de caja, como margen, borde, relleno o espaciado.
  • Propiedades de identificación y presentación de listas.

 

CSS2

Esta versión fue desarrollada por la misma W3C y fue publicada como recomendación oficial en 1998, fue la primera «actualización» del lenguaje original e implemento las siguientes mejoras y funciones a la versión publicada en 1995:

  • Las funcionalidades propias de las capas (<div>) como de posicionamiento relativo/absoluto/fijo, niveles (z-index), etcétera.
  • El concepto de «media types«.
  • Soporte para las hojas de estilo auditivas
  • Texto bidireccional, sombras, etcétera.

 

CSS2.1

La implementación de una versión de revisión para CSS2 fue un poco engorrosa y problemática, más que todo para ser aceptada por la W3C y convertirse en la recomendación avalada por ellos.

La pega de la versión CSS2 es que algunas de las características añadidas eran poco estables y algunos navegadores padecían de problemas de soporte con códigos específicos dentro del lenguaje, por lo que se decidió crear una versión de revisión para solventar los errores.

El problema es que en su primera aplicación como candidata para convertirse en recomendación fue rechazada en 2005, luego en 2007 se realizó una segunda propuesta que fue actualizada en el 2009.

Finalmente volvió a ser rechazada para el 2010. Al fin, en el 2011 se volvió a realizar una nueva propuesta, y para esta ocasión si cumplía los estándares de la W3C, por lo que fue reconocida como recomendación en Junio del mismo año.

 

CSS3

Es la versión usada en la actualidad, y fue el cambió más grande en la historia del lenguaje, debido que para evitar problemas de compatibilidad, esta versión se desarrollo en «módulos», cada modulo pertenece a una de las funciones especificas desarrolladas en CSS2.1.

Para el año 2011 había 50 módulos publicados, pero de forma lógica, cada modulo debe ser estudiado para ser respaldado como recomendado.

En el 2011 los módulos de: «Selector», «Espacios de nombres» y «Color» fueron aceptados y son recomendados como oficiales, sin embargo, la mayoría de los demás módulos están considerados como «relativamente estables», y aunque sean la base de la mayoría de los navegadores en la actualidad, el comité de la W3C sigue sometiéndolos a estudio.

 

JavaScript y PHP, todo un mundo de nuevas posibilidades

Hasta ahora hemos entendido y comprendido el diseño web de páginas estáticas (páginas web con información permanente que están desarrolladas para mostrar un contenido fijo y no para interactuar de manera dinámica con el usuario)

Debido a que el lenguaje HTML y CSS es el que se utiliza principalmente para eso, no necesitas de otras características más que estos lenguajes para crear un sitio estático. 

Aquí es donde entran en juego lenguajes como JavaScript y PHP, los cuales están diseñados para realizar tareas de forma dinámica, logrando una interacción con el usuario y realizando tareas que muestren información dinámica y cambiante, por ejemplo, reproducción de video o juegos.

Un sitio web dinámico se define como un sitio cuya información es traída hacia la pantalla del usuario mediante un programa que extraiga esta información de una base de datos, esto permite que el contenido se actualice y no muestre permanentemente la misma información, imágenes, videos, etc. tal como lo haría un sitio web estático.

Google es un ejemplo de un sitio web dinámico debido a que funciona de la siguiente manera:

Al abrir tu navegador e ingresar a google, te encuentras con un buscador, como modo de ejemplo buscaremos «cómo comprar un dominio web», por ende, escribimos la oración en el navegador y presionaremos Enter.

Esto nos traerá como resultado diversos links a páginas que nos brindarán información relacionada con nuestra búsqueda. Este es el mismo patrón que define al sitio web dinámico, el usuario busca información y el buscador de google se encarga de extraerla de la base de datos y mostrarla en la pantalla del navegante.

WordPress también es otro ejemplo, debido que al subir nuestras entradas a nuestro blog, la información va variando ya que ingresamos nuevos datos a nuestra base de datos.

Por lo que si un usuario busca en nuestro blog «como comprar un dominio web», le saltará un artículo sobre cómo realizar esta acción, todo esto concretado debido a la llamada que hace el mismo CMS a la base de datos de nuestro sitio web, para poder mostrar los resultados de búsqueda al usuario que está dentro de nuestro blog.

Ahora, ya que hemos comprendido cómo funcionan los sitios web dinámicos, te explicaremos que funciones cumplen tanto JavaScript como PHP dentro de estos sitios webs y por qué hacen que la experiencia del usuario y la calidad del sitio web sean de otro nivel.

 

JavaScript

 

còdigo wordpressJavaScript (también conocido por sus siglas JS) es un lenguaje de programación interpretado, del dialecto de ECMAScript, el cual se define como orientado a objetos, basado en prototipos, de carácter imperativo, débilmente tipado y dinámico.

Este lenguaje es de uso universal, aunque este específicamente diseñado para sus aplicaciones web, con el propósito de mejorar la interfaz del usuario y la calidad de las webs dinámicas.

Sin embargo, también tiene un uso significativo en el desarrollo de widgets, interconectado de aplicaciones y creación de software multiplataforma.

Actualmente todos los navegadores soportan ECMAScript 5.1, y para interactuar con la web se debe proveer al lenguaje JavaScript el famoso DOM, siglas en inglés de Document Object Model.

Esto es una interfaz de plataforma que proporciona un conjunto de objetos para obtener como resultado la representación de código HTML, XHTML y XML, el cual permite acceso para modificarse de forma dinámica usando lenguajes ECMAScript para modificar la estructura del mismo.

 

¿Cómo se creó JavaScript?

JavaScript fue desarrollado originalmente por Brendan Eich de Netscape bajo el nombre de Mocha, el cual luego fue renombrado y denominado como LiveScript, para luego quedar oficialmente nombrado como JavaScript.

Casualmente, el cambio de nombre coincidió de forma aproximada con la implementación de soporte a la tecnología Java que realizó Netscape con su navegador, Netscape Navigator en 1995.

Actualmente, JAVASCRIPT está registrado bajo el poder de Oracle

Así que para evitar problemas, Microsoft creó su propia versión de JavaScript que llamaron JScript, pero esto genera problemas en la estandarización de los navegadores web, así que para solucionar esto, el WWWC creó el DOM para que fuese adoptado como plataforma estándar.

Posteriormente en 1997, se adoptó como un estándar ECMA, bajo el nombre de ECMAScript.

Con el paso de los años JavaScript perdió popularidad, hasta la llegada de AJAX, el cual devolvió a JavaScript al mercado y generó una revolución inmensa.

Esto produjo la creación de diversos frameworks librerías que a fecha de hoy hacen la implementación de características JS mucho más rápidas, sencillas y bien desarrolladas debido a la comunidad que las soporta, aumentando su presencia en el ámbito web.

 

Frameworks y Librerías

Un framework se conoce como un «armazón», es un entorno de trabajo el cual posee un conjunto de objetos, elementos, prácticas y conceptos capaces de resolver problemáticas y desarrollar cualquier tipo de software.

A lo largo de los años, se han creado diversos frameworks para JavaScript que han sido la base de desarrollo de muchas de las soluciones que conocemos hoy en día, debido a que han logrado reunir a una comunidad de desarrollo impresionante que los soporta.

Usualmente el framework solo te brinda el «chasis» del proyecto, tu como desarrollador deberás encontrar soluciones y aplicar la lógica, usualmente, funcionalidades como eventos, almacenamiento y vinculación de datos son provistos por ti.

Por el otro lado, una librería se conoce como una colección organizada de funcionalidades útiles. Una biblioteca típica podría incluir funciones para manejar fechas, elementos HTML, eventos, cookies, animaciones, y más.

Cada función devuelve valores a la aplicación llamante que se pueden implementar como quiera. A modo de ejemplo, una librería puede ser reflejada como una selección de repuestos para un coche: tú como dueño eres libre de elegir cualquier marca, modelo, tipo de repuesto y calidad del mismo, pero necesitarás de un chasis donde montar todas estas piezas.

Normalmente, las bibliotecas proporcionan un mayor nivel de abstracción que suaviza los detalles de la implementación y las inconsistencias, y el uso de las mismas puede ser capaz de restar un 25-30% de tiempo de desarrollo.

 

Frameworks

  • AngularJS: Este framework fue lanzado en 2009 por Google y es uno de los frameworks open source más avanzados.

Principalmente, está diseñado para utilizarse en entornos SPA, las siglas en inglés de Single Page Application (aplicación de una sola página), por otro lado, su funcionalidad de vinculación bidireccional es la característica innovadora más intuitiva de Angular que permite la actualización en tiempo real de un sitio web desde diferentes dispositivos.

Cualquier vista se cambia de forma simultánea y en tiempo real, tanto en la aplicación móvil como en el sitio web. Además, al ser de Google, entenderás que prácticamente de manera automática contará con una comunidad de desarrollo tras ella inimaginable y por ende, hará que su curva de aprendizaje no sea tan pronunciada.

La versión Angular2 fue lanzada en el año 2016, es fue un cambio radical a la versión 1, ya que aquí se introdujo un modelo de componentes modulares basados en el modelo de TypeScript (compilado en JavaScript).

  • Backbone.js: Algunos lo catalogan como framework, otros como librería por su capacidad de ser integrado en proyectos de terceros, pero está claro que las utilidades de Backbone como framework MVC para el desarrollo de webs veloces y dinámicas es de alta calidad, debido a que se apoya en Underscore y JQuery, tiene una alta capacidad para encontrar soluciones JavaScript, logrando que su curva de aprendizaje sea mucho menor a la de AngularJS.
  • Ember.js: Ember es un framework basado en el modelo MVVM (Model-view-viewmodel), y puede proclamarse como uno de los más populares en la actualidad, está diseñado para el desarrollo de aplicaciones y sitios webs robustos, específicamente para proyectos grandes, permite el desarrollo de SPA altamente escalable y une la vinculación de datos, plantillas y bibliotecas en un solo paquete.

 

Librerías

  • Jquery: Este es indiscutiblemente el mejor de todos, Jquery es la librería más grande de JavaScript en la actualidad, simplemente es inmensa, y posee una cantidad de apartados y soluciones realmente ridícula, es gratuita, es muy completa y prácticamente todo lo que desees estará ahí.

Desde calendarios hasta contadores de caracteres, animaciones y otras funcionalidades. se caracteriza por la introducción del selector CSS a la recuperación de nodos DOM, más el encadenamiento para aplicar controladores de eventos, animaciones y llamadas AJAX. Sin embargo, ha perdido popularidad estos últimos años debido a la popularización del uso de frameworks como entornos de trabajo.

  • React: Tal vez la biblioteca más hablada del año pasado, React afirma ser una biblioteca de JavaScript para la creación de interfaces de usuario. Se centra en la parte «Visual» del desarrollo Model-View-Controller (MVC), la cual facilita la creación de componentes de interfaz de usuario.

Fue una de las primeras bibliotecas en implementar un DOM virtual, la estructura en memoria calcula las diferencias y actualiza la página de manera eficiente.

Aunque según las estadísticas no aparece como una de las librerías de mayor uso, esto se debe a que no está diseñada para el desarrollo web, sino para el diseño de interfaz de usuario, a nivel mundial, el 38% de los desarrolladores aclaman haberla usado

  • Lodash: Esta es una librería muy popular entre los desarrolladores, ya que proporcionan múltiples utilidades JavaScript para complementar la cadena nativa, número, matriz y otros métodos de objetos primitivos, sin embargo, su enfoque más profundo se encuentra del lado de los servidores, ya que es muy usada junto con Node.js, para la creación de sistemas de red altamente escalables y servidores web.

 

PHP

 

aprender a programar phpAcrónimo recursivo de HyperText Preprocessor, PHP es un lenguaje de programación general, que a diferencia de todos los que hemos listado en este post, trabaja del lado del servidor.

Ddestaca sobre todos los demás por el hecho de que es capaz de incorporarse a un documento HTML sin necesidad de localizar y llamar a un archivo externo.

PHP puede ser desplegado  en la mayoría de los servidores web y según The PHP Group, más de 20 millones de webs y un millón de servidores en el mundo hacen uso de PHP.

Aunque está diseñado para facilitar la creación de sitios webs dinámicos, este lenguaje puede ser usado para la creación de interfaces gráficas, y como otros lenguajes de su tipo, tales como C y Perl, permiten a la mayoría de los programadores realizar tareas complejas con una curva de aprendizaje corta

 

¿Cómo funciona PHP?

Para entender mejor cómo funciona este lenguaje, veamos el siguiente ejemplo:

<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplo</title>
</head>
<body>

<?php
echo «¡Hola, esto es un ejemplo de lo que puede hacer PHP!»;
?>

</body>
</html>

En vez de usar diversos comandos para mostrar HTML, tal como lo hacen C o Perl, las páginas de PHP contienen HTML con código incrustado que se encarga de realizar una tarea específica (en este caso, es mostrar el siguiente texto «¡Hola, esto es un ejemplo de lo que puede hacer PHP!).

El código de PHP está encerrado entre las etiquetas especiales que se encargan de marcar el comienzo y final (<?php y ?>) que permiten la entrada y la salida de lo que se denomina «modo PHP».

Lo que diferencia al lenguaje PHP de algo del lado del cliente como JavaScript es que el código se ejecuta del lado del servidor, genera el HTML y lo envía hacia el cliente o usuario.

El cliente recibirá el resultado de la ejecución del script, aunque no sabrá el código subyacente que era. Incluso, el servidor web puede ser configurado para el procesamiento de todos los ficheros HTML usando PHP, por lo cual los usuarios no sabrán que se tiene bajo la manga

 

¿Por qué PHP se ha convertido en el líder mundial para la creación de sitios web dinámicos?

PHP se considera como el estándar para la programación de sitios webs dinámicos a fecha de hoy, y desde su creación se ha convertido en una herramienta diseñada para la web en esencia.

Probablemente sea por el hecho de que se creó en 1995 y a partir de ese año los lenguajes de programación web pisaron duro en el mercado y se convirtieron en los pilares de toda la red que conocemos hoy en día, sin embargo, hay otros lenguajes de programación estructurada tales como C#, o tecnologías de desarrollo como Microsoft ASP, ASP.NET y Node.js/JavaScript, entonces ¿por qué PHP es mejor que ellos, y porqué es prácticamente de uso obligatorio en la actualidad?

  1. Es gratis y OpenSource: Para hacer uso de PHP no necesitas invertir ni siquiera un centavo, cualquier persona puede descargarlo y empezar a aprender como programar en PHP, incluso, las tecnologías y herramientas para trabajar en PHP son gratuitas (XAMPP, LAMP, WAMP, MAMP y UwAmp).
  2. Orientación a desarrollo web: PHP es el estándar que utilizan los hosting de hoy en día como lenguaje de programación estructurada, por el hecho de que está orientado de forma específica al desarrollo de sitios webs dinámicos que hagan uso de información almacenada en una base de datos.
  3. Extremadamente sencillo de aprender: PHP es un lenguaje muy complejo pero que a su vez posee una curva de aprendizaje ínfima, por lo que si lo comparamos con lenguajes como C++, C# o Perl, será tan fácil de aprender cómo comprar un dulce en una chocolatería, posee una gran comunidad de desarrollo que se ha encargado de crear todos y cada uno de los documentos e información necesaria para aprender a programar en PHP
  4. Respaldo y Documentación por parte de PHP Group: La empresa creadora de PHP posee una gran cantidad de documentación dentro de su sitio web, y todo el tiempo están centrados en el desarrollo de extensiones y  en la mejora del lenguaje en sí
  5. Estándar Web: Al ser PHP el lenguaje de programación estructurada utilizado por todos los navegadores web, las soluciones y funcionalidades que implementan podrán ser accesibles desde cualquier dispositivo, software de búsqueda, etc.
  6. Utilizado por los grandes: Una de las maneras en las que podemos ver si una tecnología funciona es mismamente probándola, y lo hacemos día a día sin darnos cuenta, las grandes empresas tales como WordPress, Google, Facebook, Joomla y pare usted de contar, usan PHP en sus servicios, tales como resultados de búsqueda, habilitación de comentarios en post, venta de productos para E-Commerce y muchas otras funcionalidades más

 

PHP y MySQL, creados el uno para el otro

 

funciones wordpressMySQL es un sistema de gestión de bases de datos relacional, es decir, es un manejador de base de datos, que cumple la función de conectar al usuario a la base de datos mediante una interfaz gráfica intangible.

Este software es el líder a nivel mundial bajo su sector y además cumple con la característica de ser OpenSource, por lo que grandes empresas como WordPress, Joomla y prácticamente casi cada hosting en el mundo ofrece a MySQL como su manejador de base de datos recomendado.

Empresas como WordPress y Joomla usan este software para manejar sus bases de datos.

Una base de datos se define como «un conjunto de datos pertenecientes a un mismo contexto y almacenados sistemáticamente para su posterior uso»

Por ejemplo, este post no aparece mágicamente en nuestra web, sino que es redactado y cuando se termina, ya sea que se publique o se guarde como un borrador, irá directamente a un directorio en nuestra base de datos y será alojado bajo un nombre específico en un lugar especifico.

Básicamente, el objetivo de presentarte a MySQL no es que conozcas la interfaz, porque es increíblemente intuitiva, sino que conozcas el lenguaje que esta usa, el cual es SQL (Structured Query Language) el cual se conoce como un lenguaje específico del dominio que da acceso a un sistema de gestión de bases de datos relacionadas para realizar operaciones específicas dentro de la base de datos en la que se esté trabajando.

El lenguaje SQL permite al usuario la inserción de datos, consultas, actualizaciones y borrado, la creación y modificación de esquemas y el control de acceso a los datos.

Este se define en 3 partes, como un lenguaje de definición de datos, un lenguaje de control de datos y un lenguaje de manipulación de datos, los cuales trabajan en conjunto para brindar un control total al usuario sobre su base de datos

Este es un lenguaje relativamente asequible de entender, y aunque conocerlo no cambiara colores en tu tema, o agregará funcionalidades a tu sitio web, si que te permitirá manejar tus datos de manera eficiente y rápida, lo cual en proyectos grandes es vital para el buen funcionamiento del sitio y para mantener una base de datos limpia y optimizada.

 

Programar WordPress, manos a la obra

Ya que has entendido y comprendido todos los lenguajes utilizados para crear WordPress, tomaremos manos a la obra y te explicaremos que puedes hacer en wordpress a nivel de programación, para que te des cuenta lo lejos que puedes llevar las capacidades de tu sitio sabiendo código y aplicándolo de manera correcta.

Sin embargo, te recomendamos encarecidamente que primero estudies a wordpress, su estructura y bajo que reglas se rige, leas su documentación y entiendas que puedes tocar y que no, créeme, nadie quiere que ocurra un desastre con su sitio web, y mucho menos que sea irreparable.

Sin más que añadir, pasemos a mostrarte que puedes hacer en wordpress con lo que te hemos explicado.

 

Cambios Estéticos: Aprovecha el CSS

Esto es lo más básico que puedas hacer si quieres comenzar a programar wordpress,  como ya lo hemos explicado, CSS es un lenguaje gráfico, por ende, cambiar colores, fuentes y elementos gráficos en tu tema puede ser altamente útil si te encuentras en la situación que desees modificar tu tema de WordPress.

Además, modificar el CSS para principiantes es ideal, ya que un error no hará que tu web deje de funcionar y ocurra una tragedia, tareas como programar con PHP o modificar los elementos JavaScript de tu wordpress puede fácilmente arruinar tu sitio web

La forma más sencilla de modificar el CSS es usando la herramienta que trae Jetpack, este es un plugin de wordpress esencial que si o si debes tener.

El plugin nos ofrece una herramienta para modificar el CSS de tu sitio web de forma muy intuitiva y sencilla, un ejemplo muy básico podría ser eliminar el tagline «otro sitio realizado en wordpress», cosa que podrías lograr de la siguiente forma

 

Así como hemos logrado eliminar el tagline, podemos cambiar fuentes, colores, tamaños e infinidad de elementos gráficos de nuestro sitio web que hagan uso de las hojas de estilo, eso sí, siempre hay que tener mucho cuidado con esto y realizar un respaldo antes de empezar a modificar para tener un as bajo la manga en caso de que las cosas salgan mal.

 

Modificar Estilos Gráficos con el uso de Temas Hijo

Si le preguntas a cualquier desarrollador o programador de wordpress que trabaje en el ámbito gráfico, te dirá que la práctica recomendada para modificar tu tema es usando los famosos child themes (temas hijo), y es cierto, usar este método para la modificación de hojas de estilo CSS es lo recomendando, básicamente por las siguientes 3 factores que son:

  • Seguridad: Las vulnerabilidades en la red están en todos lados, y nada es más importante que proteger a tu proyecto de cualquier posible ataque, por ende, mantener tus temas actualizados y tu versión de wordpress es prácticamente obligatorio, el problema está en que al actualizar tu tema, todos los cambios de estilo que hayas hecho en el tema padre, se eliminarán, sin embargo, si haces los cambios en un tema hijo, estos no se verán afectados.
  • Flexibilidad: No tienes que editar directamente el código de tu tema padre, así que si cometes un error no tirarás por la ventana todo tu tema, simplemente convertirás tu tema hijo, en un campo de pruebas sin riesgos para programar en wordpress.
  • Escalabilidad: Modificar tu tema hijo te permite añadir infinidad de funciones a tu sitio, que se encargarán de saciar tus necesidades a medida que tu web vaya creciendo.

 

¿Cómo crear un tema hijo?

Hace unos años tuviésemos que haber creado diversas carpetas, copiar ficheros .php y hojas de estilo .css, haciendo el proceso de crear el tema hijo algo engorroso y expuesto a fallos.

Sin embargo, existe un plugin desarrollado por Lilaea Media, que automatiza todo el proceso de creación de temas hijo, dándote la seguridad de que su implementación será segura y exitosa para que comiences a modificar cada píxel de tu tema de wordpress. Si deseas crear un tema hijo, te recomendamos el siguiente tutorial:

 

 

Nunca Programes con PHP directamente en WordPress: Siempre usa la API

Es un error común para nuevos programadores es editar directamente los ficheros .php que trae wordpress, principalmente por las siguientes razones:

  • Es extremadamente peligroso, modificar los ficheros que instala por defecto el CMS puede hacer que tu sitio deje de funcionar, y en casos menos extremos, podrías editar código de manera incorrecta que en el momento no genere consecuencias, pero al momento de implementar nuevas funcionalidades, temas o plugins, podrías terminar pagando muy caro tus errores
  • Con cada actualización tanto de temas como de wordpress respecto a ficheros .php, el CMS, buscando mantener la optimización y la buena interacción del contenido para evitar problemas de compatibilidad, elimina todos los ficheros anteriores y los vuelve a instalar con la información nueva, por ende, todos los cambios que realices se perderán.
  • Modificar los ficheros .php de tu tema en una práctica que realmente no recomiendo, ya que puedes crear problemas de funcionamiento, por ende, cambiar la parte gráfica de tu tema siempre pero siempre tiene que ser usando las hojas de estilo, además, nunca debes modificar tu tema de manera directa, siempre mediante un tema hijo.

 

Usa la API

Según Wikipedia, el 23,4% de las páginas web del mundo están realizadas en CMS, por lo que entenderás que la comunidad de desarrollo que tiene es impresionante, y desde que salió en 2006,  la práctica recomendada respecto a programar en wordpress siempre ha sido hacer uso de la API.

El término API, por sus siglas Application Program Interface, y se define como la interfaz que permite al usuario realizar acciones dentro de un software. WordPress posee una API tan grande que incluso se subdivide en mas API's, por lo que programar usando este método es lo recomendado.

Principalmente porque no echará a perder tu sitio web, aunque la verdadera razón por la que yo recomiendo programar usando la API de wordpress es porque ya está todo diseñado ahí.

Posees wordpress en esencia bajo un ambiente controlado, sin la intervención de diversas variables y solamente debes escribir sobre el código previamente desarrollado, con la ventaja de que si tus necesidades se especifican en una área determinada puedes usar la API perteneciente a esa sección.

Así hacemos el código más compacto, concentrado en tus necesidades y como consecuencia generando un mayor entendimiento y un análisis mucho más eficiente del código sobre el cual estas desarrollando.

La API de wordpress la puedes encontrar en el siguiente link: API WordPress

 

Shortcodes y Hooks

Ya llegando al final de este mega-post, te explicaremos que funciones brindan los shortcodes y los hooks para programar wordpress, que realmente para su sencillez y el poco conocimiento necesario para implementarlos son capaces de brindar una inmensa cantidad de funciones que harán que tu web se vea mucho más profesional y completa con poco esfuerzo y ahorro de tiempo, sin más que añadir, comencemos con los shortcodes.

 

Shortcodes

Como su mismo nombre lo dice, son «códigos cortos», tales como los tags HTML (solo que estos van encerrados en corchetes ([,]) no es símbolos de menor o mayor que (<,>), que creas en el fichero functions.php de tu wordpress, y simplemente basta con agregar el shortcode a una entrada de tu post por ejemplo, para que se cumpla la función que desarrollaste previamente, por ejemplo:

function shortcode_gracias() {
return ‘<p>¡Gracias por leer este articulo, esperamos que te haya gustado</p>';
}
add_shortcode(‘gracias', ‘shortcode_gracias')

¡Y listo!, simplemente en tu entrada bastará con que coloques el shortcode [gracias] y wordpress se encargara de hacer la llamada a la acción y mostrar el texto que retorna PHP como resultado.

Para añadir, existe un plugin llamado Shortcodes Ultimate, el cual es un plugin que integra a tu sitio web una librería de más de 50 shortcodes ya desarrollados que funcionan a la perfección, y te permite insertarlos en tus entradas de manera muy dinámica haciendo uso de una interfaz gráfica, para saber más de este plugin, te recomendamos que veas este tutorial:

 

 

Hooks

Para finalizar, te explicaremos que son los «hooks» y para que funcionen, un hook se define como un «gancho»,  y está determinado como un término genérico de wordpress utilizado para el desarrollo de código propio que será integrado al núcleo de nuestro wordpress, logrando así una ampliación de sus funcionalidades.

Dentro de WordPress, podemos encontrar dos tipos de hooks, de acción y de filtro, y se distinguen por las siguientes razones:

  • Un Hook de Acción se encarga de añadir una nueva o eliminar una funcionalidad a tu sitio web.
  • Un Hook de Filtro sirve para modificar y filtrar datos y funciones ya existentes dentro del código de wordpress.

 

Estos pueden ser desarrollados por nosotros o podemos encontrarlos en sitios webs a lo largo del internet, y esa es la magia del open source, en la web Hookr.io podremos encontrar prácticamente cualquier hook existente hoy en día, por el hecho de que tienen 2538 hooks disponibles para el momento que este blog está siendo redactado, incluso poseen un plugin de wordpress por si fuese poco.

 

Estructura de un Hook

De acción

add_action( $hook, $funcion );

El cual podemos dividir de la siguiente forma:

  • add_action: Es el comando nativo de WordPress para agregar una acción
  • $hook: Es el nombre de la acción donde inyectaremos el código
  • $funcion: Es el nombre de la función que deseamos ejecutar

De filtro

add_filter( $tag, $funcion );

El cual podemos dividir de la siguiente manera

  • add_filter: Es el comando nativo de WordPress para agregar una acción
  • $tag: Es el nombre del filtro donde inyectaremos el código
  • $funcion: Es el nombre de la función que deseamos ejecutar

Si deseas ampliar mas tus conocimientos sobre los hooks te recomendamos esta serie (aunque es inglés, pero al fin y al cabo la programación se realiza en ingles, así que el código es universal)

 

Conclusión

Ya que hemos llegado al final de este post, esperamos que hayas comprendido las bases de todos y cada uno de los lenguajes, comprendas para que sirven y te permitan no solamente aplicarlo en wordpress sino en cualquier tipo de aplicación web o de sistemas.

Debemos recordarte que programar no es sencillo y que debes tomarte tu tiempo para entenderlo antes de toquetear código sin tener un conocimiento total de lo que estás haciendo y qué consecuencias puede traer, por lo que te recomendamos tomarte tu tiempo para aprender y practicar, y luego comiences con tus primeras ediciones y desarrollo de software a un nivel un poco más serio.