Tipos de Datos y Etiquetas HTML Básicas

Clase 12 de 20 • Curso de Introducción al Technical Writing y Documentación de Código

Clase anteriorSiguiente clase

Recuerda que en la clase "¿Qué es la programación?" te recomendé que tomarás el Curso Gratis de Programación Básica y la Carrera de Fundamentos de Programación para entrar a fondo en todo lo que tiene que ver con el fabuloso mundo de la programación.

En este curso nos enfocaremos básicamente en crear documentos técnicos, aunque es probable que en tu trayectoria también te encuentres con que algún día debas documentar un bloque de código, una API o un proyecto de software.

Documentar código es todo un mundo, así que, siendo este un curso de nivel introductorio, te mencionaré de manera muy light algunos conceptos básicos de programación, su definición corta y concisa.

Tipos de datos 💁‍♀️

Un tipo de dato es la propiedad de un valor que determina su dominio. Es decir, qué valores puede tomar, qué operaciones se le pueden aplicar y cómo es representado internamente por la computadora.

Los tipos de datos más comunes son:

  • char o string (textos "¡Hola!", "esto es un string"...)
  • int (12, 6, 873...)
  • double o float (1.5, 8.32, 3.1416...)
  • booleano (verdadero o falso)

String 🔡

El tipo de dato string representa texto. Dependiendo del lenguaje de programación puedes encerrar ese texto en comillas sencillas (') o comillas dobles ("). Por ejemplo, 'Hello, world!' o "Hello, world!".

La concatenación funciona para unir palabras y puedes usar el signo "+" para hacerlo.

Por ejemplo:

  • "Hello" + "World" sería "HelloWorld"

Si lo notas, no hay un espacio entre las palabras, por lo cual, debes agregarlo:

  • "Hello" + " " + "World" o también "Hello " + "World".

Para dar un salto de línea debes usar caracteres especiales, en este caso:

  • \n es usado para crear una nueva línea.
  • \t es usado para tabular.

Por ejemplo:

"Hello\nWorld" arrojaría como resultado:

Hello

World

Curso de Expresiones Regulares

Int o double 💯

Los tipos de datos int o double son números enteros o decimales. Un número entero puede ser tu edad o la cantidad de integrantes de tu familia. Un número decimal puede ser tu peso o el número de kilómetros que caminas todos los días.

El tipo de dato importa dependiendo de lo que quieras almacenar, por ejemplo, el número 7 puede ser tipo de dato entero o puede ser string:

  • int = 7

  • string = "7"

  • 7 + 7 = 14

  • "7" + "7" = "77"

Booleano 👩‍⚖️

Los tipos de datos booleanos solo ofrecen dos valores: falso o verdadero. Comúnmente se representan con ceros y unos o con True o False.

HTML y JavaScript 🖼

JavaScript es un robusto lenguaje de programación que puede ser aplicado a un documento HTML y es usado para crear sitios web dinámicos e interactivos. Mientras JavaScript define la funcionalidad e interactividad de los sitios web, HTML (HyperText Markup Language) sirve como estándar de referencia para la codificación y estructuración de estos, es estático y no tiene alguna función como tal.

Cuando escribes código en HTML estás escribiendo etiquetas HTML. Todas las etiquetas HTML están hechas con un número de partes específicas, incluyendo:

  • El carácter “menor que” <.
  • Una palabra o carácter que determina qué etiqueta se está escribiendo.
  • Cualquier número de atributos HTML que se quiera usar, escritos de la forma nombre=”valor”.
  • El carácter “mayor que” >.

Etiquetas HTML básicas

Hay una serie de etiquetas que son las más usadas para crear cualquier documento HTML:

  • <body> para el contenido.
  • <head> para información sobre el documento.
  • <div> división dentro del contenido.
  • <a> para enlaces.
  • <strong> para poner el texto en negrita.
  • <br> para saltos de línea.
  • Del <h1> al <h6> para títulos dentro del contenido.
  • <img> para añadir imágenes al documento.
  • <ol> para listas ordenadas, <ul> para listas desordenadas y <li> para elementos dentro de la lista.
  • <p> para parágrafos.
  • <span> para estilos de una parte del texto.

HTML cuenta con un total de 91 etiquetas. Sin embargo, una etiqueta por sí sola a veces no contiene la suficiente información para estar completamente definida. Para ello contamos con los atributos: pares de nombre-valor separados por un "=" y escritos en la etiqueta inicial después del nombre del elemento. El valor puede estar encerrado entre "comillas dobles" o 'simples'.

Esta sería la estructura general de una línea de código en lenguaje HTML:

<tag attribute1="value1" attribute2="value2">content</tag>

O lo que es lo mismo, con un ejemplo:

<a href="http://www.enlace.com" target="_blank">Ejemplo de enlace</a>

Donde:

  • <a> es la etiqueta o tag inicial y </a> la etiqueta de cierre.
  • href y target son los atributos.
  • http://www.enlace.com y _blank son las variables.
  • Ejemplo de enlace es el contenido.

Veamos como ejemplo el famosísimo "Hello, world!". Este programa se utiliza generalmente para mostrar en un ejemplo sencillo la sintaxis de un lenguaje de programación y para introducir a los programadores en dicho lenguaje.

Esta es una pieza de código escrito en JavaScript y HTML.

<!DOCTYPE HTML>
<html>

<body>

  <p>Before the script...</p>

  <script>
    alert( 'Hello, world!' );
  </script>

  <p>...After the script.</p>

</body>

</html>

Las etiquetas de apertura <html> y <body> son las que comienzan la estructura de este programa.

<!DOCTYPE HTML>
<html> <------ Inicio de la etiqueta HTML

<body> <------ Inicio de la etiqueta del body del sitio web

La etiqueta <p> es de inicio de un párrafo y la etiqueta </p> da cierre a ese párrafo. La etiqueta <script> indica que lo que se escriba dentro de ella corresponde al lenguaje de programación JavaScript, también tiene su etiqueta de inicio y etiqueta de cierre.

<p>Before the script...</p> <------ Un párrafo

  <script> <------ Inicio de la etiqueta de JavaScript
    alert( 'Hello, world!' ); <------ Mensaje en formato de alerta que se mostrará
  </script> <------ Cierre de la etiqueta de JavaScript 

  <p>...After the script.</p> <------ Otro párrafo

Finalmente, </body> y </html> son las etiquetas de cierre del programa. Si observas, son idénticas a las etiquetas con las que se inició a excepción de que tienen un slash ("/") como señal de cierre.

</body> <------ Cierre de la etiqueta del body del sitio web

</html> <------ Cierre de la etiqueta HTML

Variables 📦

Una variable es como una caja, dentro podemos guardar cosas. Las variables de JavaScript son cajas que solo pueden guardar una cosa a la vez. Se las denomina así porque su contenido puede cambiar en cualquier momento durante el desarrollo del programa, son variables.

Cada variable tiene un nombre, tipo de dato y valor. Algunos ejemplos:

technical-writing5.png

Las variables tienen ciertos lineamientos a seguir dependiendo del lenguaje de programación en el que estén. Los lineamientos más comunes son:

  • Respetar mayúsculas y minúsculas en caso de que el lenguaje de programación sea case-sensitive.

  • Agregar al final de la variable un punto y coma (;).

  • Declarar las variables con la palabra var, no es necesario, aunque es recomendable hacerlo. Ejemplo:

    • var id;

    • var apellidoMaterno;

    • var estatusActivo;

  • Contener solo letras, números, símbolos de peso ($) y guion bajo (_).

Una vez que tienes las variables, puedes asignarles un valor:

  • var id = 56;

  • var apellidoMaterno = "Salazar";

  • var estatusActivo = 1;

Case-sensitive 🎭

Algo importante en los lenguajes de programación es que existe el término "case-sensitive", que en español sería algo así como "sensibilidad a las mayúsculas y minúsculas". La mayoría de los lenguajes de programación son case-sensitive y JavaScript no es la excepción. Esto quiere decir que el programa tiene la capacidad para distinguir entre mayúsculas y minúsculas.

Para entenderlo mejor, sería algo así:


ApellidoPaterno

apellidoPaterno

apellidopaterno

Aunque digan lo mismo son datos diferentes debido a su capitalización, es decir, a su uso de mayúsculas y minúsculas.

Constantes 🗼

Las constantes son lo contrario a las variables, son datos que no varían su contenido durante la ejecución del programa. Una vez que toma un valor, este se mantendrá fijo. Las reglas de su nombre son las mismas que para crear nombres de variable. Al declarar una constante, se usa el prefijo const.

const escuela = "Platzi";

const edadMinima = 18;

Para documentar una constante necesitas:

  • Nombre

  • Tipo

  • Valor

  • Uso

En ciertos programas hay constantes que deben de ser documentadas, por ejemplo, ciertos mensajes que siempre son lo mismo, mensajes de error o de información. Esta información la obtienes principalmente con el equipo de desarrolladores o pueden estar comentadas directamente en el código.

Este es un ejemplo de constantes documentadas, estas muestran mensajes de error:

technical-writing6.png

No existe una manera única de documentar constantes. Sin embargo, las tablas son recomendables para mejor visualización de tu lector.

Como technical writer es probable que en algún momento debas documentar bloques de código o escribir para una audiencia de programadores. Así que aprender a leer código para después documentarlo te servirá mucho para tu carrera como technical writer.

Curso Básico de JavaScript

En el próximo módulo profundizaremos en la documentación de código. ¡Te espero en la próxima clase para aprender a documentar una función!