​En esta bloque aprenderás

1.  Hacer uso de funciones condicionales y de bucles de programación.

2. Organizar un conjunto de pasos o procedimientos mediante algoritmos sencillos.

3. Realizar un programa de aplicación sencillo en un lenguaje determinado.

​

​

¿Qué es HTML/CSS/JS?

HTML, CSS y JavaScript son los tres lenguajes que están en el centro de crear aplicaciones web.

Vemos cada uno:

HTML (lenguaje de marcas de hipertexto), es el lenguaje donde se define la información o el contenido del documento, el formato de los archivos es .html

 

CSS (cascading style sheets), el lenguaje donde se especifica el diseño del documento, maneja todo lo relacionado con la parte visual, el formato de los archivos es .css

 

JavaScript el lenguaje que hace que todo sea interactivo, es realmente el lenguaje de programación que nos permite crear sitios web, el formato de los archivos es .js

 

El que realmente interpreta estos lenguajes es el Navegador.

Se puede escribir CSS y JavaScript dentro de HTML, los profesionales normalmente escriben esto por separado.

​

JavaScript no es Java

Java es un lenguaje para servidores, aplicaciones de escritorio y aplicaciones Android

JavaScript es el lenguaje de la web, servidores, robots, etc.

 

Primeros pasos en el navegador con alert
 

Ya tienes un navegador (recomiendo Google Chrome) y un editor de texto, eso es lo único que requieres.

Abre en el Google Chrome y ve a www.google.com Pulsa con el botón derecho y clica en Inspeccionar, verás una ventana donde se ve como están hecha las web, ve a Console, desde ahí puedes escribir JavaScript (JS)sin tener que crear un archivo.

 

alert("Hola profe, estoy programando"); y le damos al enter.
 

Te saldrá un mensaje de google.

¿Qué hemos hecho?. Al escribir alert, hemos informado en lenguaje JS que queremos ejecutar un orden o función.

Luego hemos abrierto y cerrado paréntesis, esto es necesario para escribir un parámetro (esto es una colección de códigos o información para hacer algo) y abrimos y cerramos comillas para explicitar que es un mensaje de texto libre o string y punto y coma (;) se utiliza para terminar la instrucción.

​

También, podemos crear operaciones básicas.

Vamos a escribir esta operación con estas variables. Recuerda no saltarte ninguna regla al escribir, paréntesis, comillas, puntos y comas, etc. 

​

var x = 1;

var y = 2;

var z = x + y;

z;
alert ("el valor de z es" + z);

​

Hemos declarado variables, las declaramos con la palabra reservada var, el nombre, operador de asignación (=) y el valor que va a tener.

Recuerda: Todo en programación tiene que ver con seguir las reglas de un lenguaje y luego crear las instrucciones que quieres para lograr los objetivos que deseas.

Consejo: En consola puedes hacer más grande el tamaño de la letracon Ctrl y +

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

HTML, CSS, JavaScript de verdad

Los archivos HTML funciona con etiquetas, por ejemplo

 

Hola profe **ya casi aprendo** soy Roberto Camacho

 

Todos los contenidos en HTML deberían estar dentro de una etiqueta, y todos los archivos HTML tienen esta estructura, cómo

<title> Título de la página </title>

Contenido de la página

La etiqueta que te permite escribir CSS (siglas en inglés de Cascading Style Sheets, en español "Hojas de estilo en cascada")dentro de HTML es <style>, se coloca dentro de head. La etiqueta para escribir JS dentro de HTML es <script>, se coloca antes de terminar el body.

Recuerda:

Los nombres de las variables tienen algunas reglas, cómo, no pueden tener espacio, debe empezar siempre con una letra, las minúsculas y las mayúsculas importan.
Identación(buenas prácticas a la hora de escribir estos lenguajes), por ejemplo los bloques de código deben ir un poco a la derecha.
Los programadores pasan 80% de su tiempo leyendo código y 20% escribiendo código, por esto es importante seguir buenas prácticas. Es importante ver las extensiones de los archivos

Para continuar progamando en HTML necesitaremos descargarnos un editor de texto (editor de código de fuente de código abierto para Windows) en este caso vamos a trabajar con ATOM

​

​

​

​

​

​

practica 4

 

Primero.html 

Vamos a practicar con el editor ATOM.

Abramos el editor y en Archivo(File) abriremos un nuevo archivo(New File)

Y vamos a escribir Hola profe ya casi aprendo soy Roberto Camacho (aquí cada uno escribirá su nombre y apellido.

Luego lo guardaremos File/Save.

Vamos a crear una carpeta nueva que llamaremos progbasic  y al archivo le pondremos el nombre de primero.html

Abrimos el navegador (Chrome) y presionamos Cntr +O, se nos abrirá una ventana donde abriremos nuestro archivo primero.

Si no te has fijado, al abrir el archivo en su nombre no iva acompañado del tipo de extensión, eso se debe a que no está activada una pestaña que a continuación te muestro que has de hacer para verla(un programador siempre ha de ver estas extensiones).

Vete a Window y abre el explorador de archivos, y en la pestaña vista, marca la casilla Extensiones de nombre de archivo.

Ahora vamos a crear una extensión. 

Para ver las palabras profe ya casi en negrita abriremos delante de estas <strong> y al final </strong> 

<etiqueta>contenido</etiqueta>

Luego cargamos vamos al navegador y recargamos.

En html todos las etiquetas deben de estar envueltos en una etiqueta y la manera de envolver este texto sería en un párrafo para ello le colocaremos antes de esta frase <p>y al final una </p>

Y debajo abriremos otra nueva <p> y escribiremos este es otro nuevo parrafo y al final volveremos a cerrar con otra </p>

Para que sea un verdadero lenguaje html. Para ello escribiremos arriba y abajo la palabra <html>

Ahora le debemos introducir una cabecera (head). Debajo de <html> escribiremos <head>y abajo </head> y en medio de estas cabeceras vamos a cambiar el nombre de la página con un título.

Escribiremos <title>Mi primer archivo HTML</title>

Ahora vamos a introducir otro concepto el body. Los párrafos no deben ir sueltos estos irán dentro de un cuerpo (body).

Vamos a escribir debajo de head y antes del prmer párrafo<body> y </body> debajo del último párrafo.

ahora vamos a introducir los estilos (style), normalmente se colocan en la cabecera head,aquí van los que los programadores llaman METADATOS, debajo de la etiqueta title vamos a escribir <style> y debajo </style>

Es aquí donde utilizaremos el lenguaje CSS que te he comentado anteriormente y aquí es donde podremos cambiar el aspecto visual de nuestras etiquetas.

Vamos a cambiar el color de fondo a la pagina web. Este estilo o atributo, irán dentro de body y debajo de title.

Así pues escribiremos body en ese lugar y para introducir estilos abriremos y cerraremos llaves { } y para hacer buenas prácticas le daremos un espacio.

Entre las llaves pondremos background-color:blue;

Recuerda: que los puntos y comas son importantísimos en esta nueva sintáxis que estamos aprendiendo, ya que siempre informan de que se cierra una línea de código.

Si lo guardamos y recargamos en chrome veremos que ha cambiado el color del fondo a azul. También vemos que el color del texto en negro no funciona, para cambiarlo a blanco (white).

Escribiremos color: white;

En este lenuaje CSS hay una sintaxis especial, por ejemplo para cambiar de ese color de fondo azul fuerte a uno más suave, cambiaremos blue por#AAAAFF

Si lo guardamos y recargamos en chrome veremos que ha cambiado el color del fondo azul oscuro a otro azul mas violáceo.

Ahora vamos a cambiar la fuente del texto, por defecto sale el estilo Time New Roma, vamos a cambiársela a Helvetica.

Para ello , deberemos escribir font-family: Helvetica;

Ahora vamos a ponerle un estilo especial a strong, queremos colocarle un color especial para que resalte con un color rosado. Nos iremos al final de las llaves del body. escribiremos strong abriremos y cerraremos llaves {} y en medio escribiremos bacground-color: #FFAAAA 

Ahora agregaremos JavaScript, lo colocaremos justo encima de donde el body termine.

Escribiremos un <script> de apertura y otro de cierre </script> y entre ellos ecribiremos recuerda en lenguaje javascript alert("Mensaje especial con alerta");

Recargamos y vemos que nos sale el mensaje de alerta, pero este es  muy molesto ya que hay que cerrarlo, ahora vamos a ver otra forma de hacerlo. Borramos alert y escribimos document. write

Recargamos y observamos como ahora el mensaje sale escrito en HTML , con el document hemos hecho una excepción donde nos permite escribir en lenguaje Javascript en HTML

Ahora como hicimos en el ejercicio de Javascript, vamos a escribir las variables:

var x = 1;

var y = 2;

var z = x + y;
document. write ("el valor de z es" + z);

Recargamos y observamos el cambio

Recuerda: que en las funciones no se admiten nombres compuestos, por ejemplo Roberto Camacho, debería ser Roberto_Camacho.

Y si quiero colocarle un número será siempre al final Roberto_Camacho1

Otras reglas específicas de Java serían por ejemplo que no se admiten letras raras como las ñ o las tildes.

En el mundo real de los programadores es muy usual encontrarte con que antes de empezar los archivos de códigos HTML empiecen con una etiqueta 

<DOCTYPE html>

Aunque no se comporta como una etiqueta normal ya que no se cierra. Esta es una buena práctica.

Otra sería escribir stlyle con su tipo (type), esto es el atributo de la etiqueta.

Escribiremos solo en la etiqueta de apertura <style type"=text/css">

Y por último también os podréis encontrar junto al script de apertura otros atributos como  <script type="text/javascript">

​

Tendrás que presentarlo con un recorte de pantalla igual que te muestro en estas fotos

​

​