HTML, CSS, JAVASCRIPT: 2020

domingo, 20 de diciembre de 2020

17 JavaScript. Intervalos

Ejecuta tareas cada X tiempo usando temporizador en #codigo #javaScript

miércoles, 16 de diciembre de 2020

16 JavaScript. Control errores

Captura y controla los errores en el script de #javaScript para evitar que se "rompa" la ejecucion del #codigo.

martes, 8 de diciembre de 2020

15 JavaScript. Arrow function

Vemos otra forma de crear funciones en #javaScript, la #funcionFlecha o #arrowFunction

lunes, 7 de diciembre de 2020

14 JavaScript. Map / Filter

Aplicando funcion #map y #filter a un #array con #javascript, obteniendo valores segun #funcion pasada.

jueves, 3 de diciembre de 2020

jueves, 26 de noviembre de 2020

12 JavaScript. Clases

Ejemplo de #clases y #objetos con #javascript

jueves, 19 de noviembre de 2020

11 JavaScript. Funciones

Funciones con JavaScript

//funcion sin parametro y sin retorno de valor
function mostrar(){
document.write('Hola desde la funcion<br/>');
}
for(let i=0;i<10;i++){
mostrar();
}
//funcion con parametro
function imprimir(nombre){
document.write(`Hola, ${nombre}<br/>`);
}
imprimir('Jose');
imprimir('Lucia');
//funcion que devuelve resultado
function mayor(val1,val2){
let mayor = 0;
if(val1>val2){
mayor = val1;
}else{
mayor = val2;
}
return mayor;
}
document.write(mayor(4,56));
let numeroMayor = mayor(4,8);
document.write(`<br/>El numero mayor es = ${numeroMayor}`);

domingo, 15 de noviembre de 2020

09 JavaScript. Arrays

Operaciones basicas con Arrays en JavaScript:

Codigo

//crear array
const numeros = [];
console.log(numeros);
//crear con valores

const colores = ['rojo','amarillo','verde','marron'];
colores.reverse();
console.log(colores);
//crear con valores iguales
const seis = new Array(4).fill(6);
console.log(seis);
//añadir valor
seis.push(10);
seis.push(12);
//eliminar el primero
seis.shift();
//mostrar
for(let i = 0; i<seis.length;i++){
console.log(seis[i]);

}
//muestra parte del array
console.log(seis.slice(2,4));
//recorrer array colores
for (color of colores){
console.log(color);
}
//otra forma de recorrer array
//muestra indice
for (i in colores){
document.write(i);
document.write(" : ")
document.write(colores[i]);
document.write("<br/>")
}

sábado, 14 de noviembre de 2020

08 JavaScript. Bucle While - Do While

Repeticion usando bucles While y Do while, mostrando la diferencia entre ambos.

sábado, 7 de noviembre de 2020

07 JavaScript. Bucles For

Para tareas repetitivas usaremos el bucle For de JavaScript.

06 JavaScript. Condicional Switch

Ejecuta codigo mediante condicion Switch con JavaScript

viernes, 6 de noviembre de 2020

05 JavaScript. Condicional If

Ejecuta codigo segun se cumpla la condicion.

domingo, 25 de octubre de 2020

04 JavaScript. Solicitar y mostrar datos usuario

03 JavaScript. Operadores y variables

sábado, 17 de octubre de 2020

Os dejo enlace a nuevo video en el que muestro como crear fichas de detalle para nuestra #web, con #html y #css, ejemplo muy util para mostrar fichas de platos del #restaurante y al pinchar acceder al detalle de estos.

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Fichas</title> <meta charset="utf-8"/> <meta name="description" content="ficha detalle productos"> <link rel="stylesheet" href="css/estilos.css"/> <link href="https://fonts.googleapis.com/css2?family=Sansita+Swashed&display=swap" rel="stylesheet"> </head> <body> <header> <h1>Fichas detalles</h1> </header> <nav></nav> <section> <article> <div id="tarjeta1" class="tarjeta"> <a href="contenido01.html"> <img src="img/imagen01.jpg" alt="by Calvin Hanson on Unsplash"> <h2>Imagen01</h2> <P>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</P> </a> </div> <div id="tarjeta2" class="tarjeta"> <a href="#"> <img src="img/imagen02.jpg" alt="by Markus Winkler on Unsplash"> <h2>Imagen02</h2> <P>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</P> </a> </div> <div id="tarjeta3" class="tarjeta"> <a href="#"> <img src="img/imagen03.jpg" alt="by Matteo Vistocco on Unsplash"> <h2>Imagen03</h2> <P>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</P> </a> </div> </article> </section> <aside> </aside> <footer>Creado por Jose Ojeda 2020</footer> </body> </html>

CSS

*{
padding: 5px;
background: #19070B;
color:#DF3A01;
margin: 0 auto;
font-family: 'Sansita Swashed', cursive;
font-size: 14px;
}
header,nav,footer,section{
width: 90%;
padding: 10px;
margin: 15px;
text-align: center;
}
article{
display: block;
margin: 0 auto;
width: 55%;
}
.tarjeta {
float: left;
display: inline-block;
border: #FA8258 10px solid;
margin-top: 25px;
margin-right: 15px;
margin-left: 15px;
width: 20%;
text-align: center;
}
.tarjeta img{
width: 50%;
height: 50%;
border: #A5DF00 10px solid;

}
.tarjeta h2{
font-size: 2em;
}
.tarjeta p{
font-size: 1em;
}
.tarjeta:hover{
border:#01DF01 15px solid;
margin: 5px;
width: 30%;
cursor: pointer;
}
.contenido {
float: left;
display: inline-block;
border: #FA8258 10px solid;
margin-top: 25px;
margin-right: 15px;
margin-left: 15px;
width: 90%;
text-align: center;
}
.contenido img{
width: 50%;
height: 50%;
border: #A5DF00 10px solid;

}
.contenido h2{
font-size: 4em;
}
.contenido p{
font-size: 1.5em;
}
h1{
font-size: 2em;
}
h2{
font-size: 1.5em;
}

footer{
border-top:50px;
clear: both;
display:block;
float:left;
font-size: 0.5em;
}

miércoles, 7 de octubre de 2020

15 Web adaptativa

Con unos pequeños cambios en el "head" de nuestra web y en el archivo css podremos hacer que nuestra web se adapte a diferentes tamaños de pantalla, lo que se suele llamar web adaptativa o responsive.
Para ello modificaremos el codigo del proyecto anterior.
Podras ver todo esto en el siguiente video:

miércoles, 23 de septiembre de 2020

Crea tu web con HTML y CSS

Accede al curso usando el siguiente cupon de descuento -> bit.ly/3cpsqOC #web #code

sábado, 19 de septiembre de 2020

14 Proyecto final. Crea y sube tu carta de tapas gratis a la web.

Con todo lo aprendido en las entradas anteriores, podras crear tu sitio web sin ningun problema.

En el siguiente video veras como crear un proyecto de Carta para un restaurante, subirlo a la web y crear el codigo QR, todo ello basandonos en software libre y en alojamiento web gratis.

Basandonos en codigo html visto en anteriores entradas, crearemos la web para mostrar la carta de tapas de un restaurante, mostrando como subirlo a un dominio gratuito que enlazaremos a un codigo QR para que nuestros clientes puedan acceder a la informacion desde su movil, con solo escanear el codigo QR que podremos poner en la puerta o mesas del local.

13 Section, aside, footer y Google fonts

Para terminar esta introducción a CSS, damos formato al contenido principal de nuestro documento web.

Observa el siguiente código:

section{

    width: 70%;

    margin-left:15px;

    margin-top: 25px;

    padding:10px;

    float: left;

    background:#404033;

}

article h2{

    font-size:1.5em;

}

aside{

    width: 20%;

    margin-left:15px;

    margin-top:25px;

    padding:10px;

    float: left;

    font-size:1.5em;

}

footer{

    width:95%;

    clear:both;

    margin-left: 15px;

    margin-top: 25px;

    padding:10px;

    font-size:0.5em;

}

Section y aside van a compartir el ancho total de nuestro documento web.

A “section” le damos el 70% del ancho y a “aside” le asignamos el 20%, la diferencia la pueden tomar los márgenes externos “margin” y los márgenes internos “padding”.

A las dos etiquetas les damos la propiedad float con valor left.

Asignamos también a los títulos de tamaño h2 una proporción de 1.5 sobre el valor del tamaño de fuente normalizado.

Despues pasamos a dar formato al pie de la web, el “footer”, lo mas significativo es “clear:both” que vuelve a asignar el flujo normal del documento, esto hace que el pie aparezca bajo el “section” y “aside”, asignando también un tamaño de fuente inferior 0.5 em.

Google fonts

Para terminar vamos a cambiar el tipo de fuente de textos en el documento web, para ello vamos al siguiente enlace https://fonts.google.com/ , seleccionamos la fuente que mas nos guste, pulsamos “select this style” y podemos descargar el archivo u obtener el codigo desde “embed”, obtendremos un enlace para insertar en el head del código html.

<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">

Despues, en la hoja de estilos insertaremos el código para dar el formato, como el siguiente:

*{

    color:#F3F390;

    background:#404033;

    font-family: 'Lobster', cursive;

    font-size: 14px;

}

Identificadores, clases

Por ultimo, vamos a ver dos tipos de etiquetas que podremos usar en nuestros documentos para dar formato CSS, son los identificadores y las clases.

La diferencia principal es que los identificadores son únicos en el documento no puede existir mas de una etiqueta con el mismo identificador, pero si podemos tener varias etiquetas con la misma clase.

En CSS llamaremos a los identificadores anteponiendo el símbolo “#” a su nombre (#enlace) y a las clases anteponiendo un punto “.” a su nombre (.enlace2) te indicare como crear el formulario y las etiquetas mas importantes. Veamos el siguiente ejemplo para explicar sus detalles.

En el documento “html” ponemos:

<footer>

<blockquote class="enlace2">Jose Ojeda 2020&copy</blockquote>

<div id="enlace">Google</div>

</footer>

En el documento “CSS” ponemos:

#enlace {

color:red;

}

.enlace2{

color:green;

}

La clase la podríamos poner en varias etiquetas y el identificador solo en una.

12 Barra de navegacion CSS

Lo siguiente que hacemos será dar formato a nuestra barra de navegación, para lo cual incluimos el siguiente código en nuestro archivo CSS:

nav{

    font-size: 1em;

    width:95%;

    padding: 3px;

    background:#404033;

    margin: 5px 1px;

}

nav ul{

    list-style-type:none;

    background:#404033;

}

nav li{

    display: inline;

    margin: 0px 1px 0px 0px;

}

nav li a{

    padding: 2px 7px 2px 7px;

    color:#F3F390;

    background:#404033;

    border: 1px solid #F3F390;

    text-decoration: none;

}

nav li a:hover{

    background:#F3F390;

    color:#404033;

}

En la etiqueta “nav” indicamos el tamaño de fuente, esta vez en vez de utilizar como medida los pixeles, usaremos “em” que pondrá el tamaño en proporción respecto a la unidad marcada, en este caso equivale a 12px que es el que se establecio al principio para todo el documento.

Despues le damos el ancho, también en proporción al total (95%), con un margen interior de 3px, el color de fondo y un margen exterior de 5px por arriba y abajo y de 1px por los lados.

Pasamos también a dar formato a la lista incluida en el nav, quitándole el estilo (bolita lateral) y dándole el color de fondo.

A los elementos de la lista “li” los ponemos para que estén en línea “inline”, prueba a no ponerlo y veras la diferencia, ya que por omisión estará en bloque, después le asignamos los márgenes respectivos.

Seguidamente damos formato a los enlaces, quitándole el subrayado (text-decoration: none), el resto parecido a anteriores formatos.

Cuando pasamos el raton por estos enlaces vamos a hacer que cambien o se inviertan los colores, por ello damos formato al “a:hover”.

En la siguiente imagen puedes ver el código y su resultado.

sábado, 12 de septiembre de 2020

11 Enlace a archivo CSS

Lo primero que haremos es eliminar los estilos que pusimos a las etiquetas en el apartado anterior, borramos “style”.

Creamos dentro de nuestra carpeta del proyecto una carpeta nueva a la que llamaremos CSS y dentro de esta creamos el archivo CSS nombrándolo como “estilos.css”.

Despues añadimos dentro del “head” el enlace al archivo CSS, para ello pondremos lo siguiente:

<link rel="stylesheet" href="css/estilos.css"/>

En esta etiqueta le indicamos que es una hoja de estilos y la ruta al fichero CSS.

Pasamos después a nuestro fichero CSS y empezamos a darle forma con el siguiente código:

*{
color: #F3F3E0;
background: #060605;
font-size: 12px;
}
body{
margin: 0px auto;
}

Con el * indicamos que vamos a cambiar propiedades a todo el documento, seria como poner propiedades por defecto, en este caso damos el color del texto, el color de fondo y el tamaño de la fuente.

Observa que esta vez los colores los damos en otro formato, anteriormente indicábamos el color asi “red” ahora lo ponemos de esta forma “#F3F3E0”, en la web puedes encontrar muchos sitios que te facilitan la selección de los colores.

Despues le hemos puesto a body el margen superior e inferior a 0px y el ancho en automatico.

Pasamos a dar formato a nuestra cabecera, para esto indicamos en nuestro archivo CSS lo siguiente:

header{
background:#404033;
width:95%;
padding:10px;
margin: 5px 5px;
display:inline-block;
}
header h1{
font-size: 44px;
color:#F3F390;
text-align: center;
float: left;
background:#404033;
}
header figure{
float:left;
}

En el header cambiamos el color de fondo, le damos un ancho del 95%, un margen interior (padding) de 10px, un margen exterior de 5px y que se visualice en bloque o línea.

Despues indicamos el formato del titulo de la cabecera, indicando que será el “h1” que aparece dentro del “header”, cambiándole el tamaño de fuente, el color de texto, la alineación, que flote a la izquierda y el color de fondo.

Por ultimo hacemos que la imagen también flote a la izquierda con “float:left” esto hace que tanto la imagen como el titulo se mantengan en línea dentro de la cabecera.

domingo, 20 de diciembre de 2020

miércoles, 16 de diciembre de 2020

martes, 8 de diciembre de 2020

lunes, 7 de diciembre de 2020

jueves, 3 de diciembre de 2020

jueves, 26 de noviembre de 2020

jueves, 19 de noviembre de 2020

domingo, 15 de noviembre de 2020

sábado, 14 de noviembre de 2020

sábado, 7 de noviembre de 2020

viernes, 6 de noviembre de 2020

domingo, 25 de octubre de 2020

sábado, 17 de octubre de 2020

miércoles, 7 de octubre de 2020

miércoles, 23 de septiembre de 2020

sábado, 19 de septiembre de 2020

section{

width: 70%;

margin-left:15px;

margin-top: 25px;

padding:10px;

float: left;

background:#404033;

}

article h2{

font-size:1.5em;

}

aside{

width: 20%;

margin-left:15px;

margin-top:25px;

padding:10px;

float: left;

font-size:1.5em;

}

footer{

width:95%;

clear:both;

margin-left: 15px;

margin-top: 25px;

padding:10px;

font-size:0.5em;

}

Google fonts

Identificadores, clases

sábado, 12 de septiembre de 2020

Vistas de página en total

Licencia