HTML


Lenguaje de marcas hipertextuales



















Teclado negro con rojos

HyperText Markup Language

El lenguaje usado para estructurar un sitio web...

HTML es el cuerpo del conjunto jBaton.


Donde apoyamos otros recursos para implementar funcionalidades, animaciones e interacción.
  Hace ya en el CERNopen_in_new, a un ingeniero llamado
Tim Berners-Leeopen_in_new se le ocurrió crear un sistema para compartir archivos en línea, estableciendo la primera comunicación entre un "cliente" y un "servidor" a través de HTTP. Bautizando a su creación bajo las siglas HTML . Como todo en esta vida, HTML evoluciona a pasos casi agigantados, pasados 20 años se comienza a desarrollar el estándar de la versión 5 y hasta el 2014 no se establece, pero durante ese plazo de 7 años se dio a conocer al Mundo y gracias a él se pudo estandarizar en octubre de ese año.

La última versión más utilizada es HTML

Publicada y estandarizada por el World Wide Web Consortiumopen_in_new.
 Conociendo a fondo el uso y funcionamiento de HTML se comprenden mejor los cambios realizados en las versiones posteriores.

HTML5 especifica:

  1. Una estructura que ayuda a los desarrolladores.

  2. Una mejora en su seguridad.

  3. Corrección de errores y eliminación de funcionalidades obsoletas.

  4. Diferentes API'sopen_in_new

  5. Accesibilidad, gracias a sus etiquetas semánticas.

CSS

Hoja de Estilos en Cascada



















Teclado negro con azules

Cascade Style Ssheets

Es el lenguaje usado para dar estilos a la estructura de un sitio web...

CSS es el alma del conjunto jBaton.


"Cascade..." Cascada, la sintaxis de CSS produce un "efecto cascada", cuando es escrito de modo externo en un archivo con la extensión .css, el cual es llamado desde un "doc".html con la etiqueta <link>

*{ 
margin: 0;
padding:0;
}

body,html{
font-family: 'Special Elite';
color: #FFF;
}

pre{
font-size: 87.5%;
color: #e83e8c;
word-break: break-word;
background-color: #212529;
padding: 0.2rem 0.4rem;
border-radius: 0.2 rem;
}
/* La sintaxis en CSS, aparte de estar programado en Inglés, es sencilla. Invocas un elemento, encierras dentro uno o más atributos con sus respectivos valores separados por ";" y por ordenar mejor el código, dando un salto de línea. 
Mirando el ejemplo de la izquierda:
*/
ELEMENTO => (body, html, pre, h1... h6, nav, div... )
/* Los elementos serán nuestro modo de especificar donde exactamente queremos el estilo.*/
ATRIBUTO => (margin, padding, color, position, background... )
/* Con los atributos indicamos qué es lo que queremos modificar. Su tamaño, color, posición y mucho más.*/
VALOR => (0, 87.5%, #e83e8c)
/* Los valores son muy variados, desde colores rgb, rgba, en hexadecimal unidades de medida absolutas, relativas, etc...*/
Quedando algo así:
ELEMENTO {
ATRIBUTO:VALOR;
}

Psst! efecto ELEMENTO:hover{color:#000} en este ↓ "espacio en blanco" ↓

El texto que se encuentra entre '/* */' es el método a seguir en CSS, que nos permite, en su formato .css, dejar indicaciones a tener en cuenta en ese punto del doc.css, y estas no interrumpirán el flujo de lectura de la máquina.
/* comentario con más de una línea en .CSS */

"Style..." Sería el conjunto de ATRIBUTOS Y VALORES que proporcionamos al ELEMENTO o los elementos, para Formar una estructura visualmente "firme" como dándole carácter...
El estilo, vamos!

See the Pen Estilos simples de CSS by jaronJabaton (@jBaton) on CodePen.




"Sheets..." Hojas. Es en una o varias "hojas de estilos en cascada" donde vamos a indicar lo necesario para que nuestra estructura html sea más vistosa. Antes de CSS los estilos se aplicaban dentro del mismo código HTML, pero se externalizó, de modo que resultase, por un lado la estructura HTML y por otro las características visuales.

Crokis separación de html y css

Una vez separados los estilos del código HTML, CSS evoluciona rápido llegando en 1999 a su versión 3.1. Entender el funcionamiento base de CSS, mejora la comprensión de las actualizaciones hasta CSS 3.1

Dentro de HTML

  1. Llamar estilos css inlineCaptura de pantalla llamando a style
  2. Misma sintaxis...Captura de pantalla estilos en el head

Llamando al archivo.css

  1. Indica la ruta hasta .cssCaptura de pantalla/guardando archivo.html
  2. Dentro de cssCaptura de pantalla/guardando archivo.html
developer_boardHerramientas CSS

Aquí, podrás ver los distintos métodos más a fondo.

Resumiendo, CSS nos da la posibilidad de darle un toque "artístico" para que nuestra web no tenga solo lineas de texto e hipertexto.

CSS FrameWorks de CSS CSS Funciones con CSS

JavaScript

Lenguaje de programación interpretado



















Teclado negro con amarillos

JavaScript

El lenguaje usado para "dar vida" tanto a los estilos CSS como a la estructura HTML de un sitio web...

JavaScript es el espíritu del conjunto jBaton.


JavaScript puede hacer que nuestro estilo CSS "cobre vida", que nuestro HTML tenga cierta "inteligencia" al poder programar con Scripts acciones y métodos, como por ejemplo la validación de formularios, la creación de Cookies y un larguísimo etc.

Se diseña en Netscape Communications Corpopen_in_new. La persona más relevante en el proyecto es Brendan Eichopen_in_new. Ex CEO de Mozilla Corpopen_in_new. Y actual CEO de Brave Software. Ha creado su propio navegador... Brave!open_in_new. Al parecer es bastante potente, tengo entendido que está creado mayormente con JS y con unos principios realmente interesantes (recomiendo una investigación a fondo y su prueba, la verdad que es rápido y parece que mantiene su palabra de privacidad).

La historia, como verás no ha terminado esto es un ¡no parar! evolutivo, es lo bueno que tiene escribir código, una vez aprendes, puedes modificar sobre la marcha y JavaScript es el mejor ejemplo para demostrarlo. Una de las cosas que más llama la atención es que tú puedes escribir un <script> completamente distinto al mío y ambos realizan lo mismo. Esto le da un toque personal, nos da una especie de "libre albedrío", lo que obliga a estudiar y comprender bien el funcionamiento de JavaScript.
Se denominó así por cuestiones de marketing, ya que "Java" era, por aquel entonces, el término de moda en el mundillo de la informática.

const JavaScript != java;

Algo a tener en cuenta, aunque si has llegado aquí doy por supuesto que no tendrás mucha idea respecto a lo siguiente, es que JavaScript no tiene una "conexión" directa con Javaopen_in_new ya que son lenguajes diferentes, JavaScript puede ser escrito dentro de un documento.html y de modo externo. Mientras que Java necesita de un entorno para ser desarrollado en condiciones.


3 Formas de incluir JavaScript

<!-- 1º Sobre un elemento HTML -->
<body onload="eventos(),soyUnEventodeJs();">

<!-- 2º Dentro del doc.html -->
<script>
alert("Hola, soy un método de JS");
</script>

<!-- 3º Llamando a un archivo.js -->
<script src="js/archivo.js"></script>