Javascript. Acceso elementos DOM

 

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.

09 Audio Video

 Para insertar audio video en nuestro documento HTML, lo primero que debemos tener en cuenta es si el archivo se cargara via web para lo cual deberemos tener la dirección url completa o si será cargado internamente con lo que pondremos la dirección relativa al archivo.

Una vez tenemos claro desde donde cargaremos el archivo, pondremos la etiqueta “video”, añadiendo la propiedad “controls” para que aparezcan los controles (volumen, play…), también podemos indicar el alto / ancho, puedes ver como queda en el siguiente ejemplo:

<video src="src/penalti.mp4" controls width="220px" height="240px">Tu navegador no soporta este video </video>

Entre las etiquetas he puesto un comentario que indicara al usuario que su navegador no soporta este video, en caso de que el navegador sea antiguo.

Para el audio, es bastante parecido, cambia la etiqueta a “audio”, quedando el código de la siguiente manera:

<audio src="src/TheGoldenPresentJesseGallagher.mp3" controls></audio>

08 Menu

 Para crear los menus de nuestro sitio web usaremos las listas, incluyendo dentro de estas el enlace correspondiente.

Mas adelante le daremos forma a todas las etiquetas para que su visualización en el navegador sea mas correcta, ese formato lo daremos cuando empecemos con CSS.

<!--Menu web-->

<ul>

<li>

<a href="index.html">Inicio</a>

</li>

<li>

<a href="formulario.html">Contacto</a>

</li>

<li>

<a href="imagen.html">Imagen</a>

</li>

<li>

<a href="https://ticoticotaa.es" target="_blank">Web Ticoticotaa</a>

</li>

</ul>

18 Html, Css. Etiquetas metas

Para tener un buen posicionamiento de nuestra web en los buscadores, debemos elegir las palabras claves o keywords que nos definen e insertarlas dentro del "head" de nuestra web, con la etiqueta "meta".
Tambien podemos usar estas etiquetas para indicar autor y una breve descripcion de nuestra web.

<head><title>Web principal</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta name="language" content="Spanish"><meta name="author" content="Jose Ojeda (ticoticotaa)"><meta name="keywords" content="programacion,python,html,php,principal"><meta name="description" content="Sitio web de ticoticotaa donde tendran contenido temas de programacion y contabilidad"><link rel="stylesheet" href="estilos.css"/><link href="https://fonts.googleapis.com/css?family=Playfair+Display|Quicksand" rel="stylesheet"></head>

10 Html Css. Introduccion estilos

Introduccion a CSS para dar formato o estilo a nuestra web.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Web principal</title>
<meta charset="utf-8">
<link rel="stylesheet" href="estilos.css"/>
</head>
<body>
<!--Cabecera-->
<header>
<h1>Cabecera de mi web</h1>
<figure>
<img src="milogo.jpg"/>
</figure>
</header>
<!--Barra navegacion-->
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="contacto.html">Contacto</a></li>
<li><a href="acercade.html">Acerca de</a></li>
</ul>
</nav>
<!--Contenido principal-->
<section>
<article>
<hgroup>
<h2>Titulo del Parrafo</h2>
</hgroup>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
 ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
 Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
 In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
 felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
 semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu,
 consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
 feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
 Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
 Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper
 libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar,
 hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero
 venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.
 Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.
 Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</p>
</article>
<article>
<hgroup>
<h2>Titulo del Parrafo</h2>
</hgroup>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
 ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
 Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
 In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
 felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
 semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu,
 consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
 feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
 Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
 Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper
 libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar,
 hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero
 venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.
 Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.
 Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</p>
</article>
<article>
<hgroup>
<h2>Titulo del Parrafo</h2>
</hgroup>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
 ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
 Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
 In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
 felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
 semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu,
 consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
 feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
 Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
 Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper
 libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar,
 hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero
 venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.
 Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.
 Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</p>
</article>
</section>
<!--Complemento lateral-->
<aside>
<h3>Siguenos en: </h3>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</aside>
<!--Pie de pagina-->
<footer>
<p>Jose Ojeda 2019&copy</p>
<p>email: nombre@email.com</p>
</footer>
</body>
</html>

CSS

*{
margin:0px auto;
color:red;
background:blue;
}
p{
color:green;
font-size:12px;
background:cyan;
}

09 Html Css. Video y Audio

Insertar video y audio en nuestra web.

<!DOCTYPE html><html><head><title>Video Audio</title><meta charset="utf-8"></head><body><!--Cabecera--><header>
</header> <!--Barra navegacion--><nav>
</nav><!--Contenido principal--><section><article><!--Video--><video src="http://techslides.com/demos/sample-videos/small.ogv" width="240" height"360" controls>Tu navegador no soporta la etiqueta <code>Video</code></video><!--Audio--><audio src="sonido.ogg" controls>Tu navegador no soporta la etiqueta <code>Audio</code></audio></article></section><!--Complemento lateral--><aside>
</aside><!--Pie de pagina--><footer>
</footer></body></html>

07 Html Css. Enlaces, listas e imagenes

Como crear enlaces, listas e imagenes con etiquetas #Html, crea tu #web

Este seria el codigo de ejemplo:

<!DOCTYPE html><html><head><title>Enlaces, Imagenes y Listas</title><meta charset="utf-8"></head><body><!--Cabecera--><header>
</header> <!--Barra navegacion--><nav>
</nav><!--Contenido principal--><section><article><!--Enlaces--><a href="#">Enlace</a><a href="http://www.google.es">Google</a><a href="http://www.google.es" target="_blank">Google</a><!--Imagenes--><figure><img src="milogo.jpg" alt="logo"></figure><!--Listas--><h2>Listas</h2><h3>Ordenadas</h3><ol><li>Elemento 1</li><li>Elemento 2</li><li>Elemento 3</li></ol><h3>Desordenadas</h3><ul><li>Elemento 1</li><li>Elemento 2</li><li>Elemento 3</li></ul></article></section><!--Complemento lateral--><aside>
</aside><!--Pie de pagina--><footer>
</footer></body></html>

Crea tu web Responsive Video 04

Cambiaremos el formato de nuestra web, seleccionando el color del sitio; iremos cambiando cada apartado de nuestra web (nav, article, aside, footer).

Crea tu Web Responsive 2

CSS, dando formato a la web

Diseño para móvil

Vamos a crear donde tenemos grabada nuestra web index.html una carpeta que llamaremos “css” y dentro de esta carpeta crearemos un archivo llamado “estilos.css”.

En el “head” de index, os recuerdo que ya incluimos la siguiente línea: <link rel="stylesheet" href="css/estilos.css" type="text/css"/>, esta línea enlaza al archivo de estilos que vamos a preparar a continuación.

Para comenzar con el formato de la web, personalmente prefiero primero prepararla para móvil y después para escritorio, por lo que debemos añadir la siguiente línea al “head”: <meta name="viewport" content="width=device-width, initial-scale=1">.

En el archivo estilos.css añadimos lo siguiente:

@media screen and (min-width:480px){}

@media screen and (min-width:767px){}

@media screen and (min-width:950px){}

Con lo que podemos poner dentro de las llaves de cada uno los estilos y atributos para móvil, tablet y PC’s, debido al minimo de ancho que especificamos en pixeles (480, 767 y 950).

Ahora vamos a diferenciar las partes de nuestra web añadiendo colores llamativos al CSS para ver claramente las partes, una vez que situemos todo bien pasaremos a poner una gama de colores menos llamativa.

header{

         background:cyan;

}

nav{

         background:yellow;

}

section{

         background:brown;

}

article{

         background:red;

}

aside{

         background:blue;

}

footer{

         background:pink;

}

@media screen and (min-width:480px){

}

@media screen and (min-width:767px){

header{

         background:green;

         }

nav{

         background:cyan;

}

section{

         background:pink;

}

article{

         background:yellow;

}

aside{

         background:red;

}

footer{

         background:brown;

}

}

@media screen and (min-width:950px){      

}

Con el código anterior puesto en el archivo css, una vez grabado, podréis observar, al ejecutar la web index.html en el navegador, que al disminuir el tamaño los colores de fondo cambiaran. Con esto hemos conseguido que al cambiar el tamaño de la visualización cambien los colores de fondo, ahora vamos a cambiar también la disposición de los bloques según se vean en un dispositivo u otro, para ello cambiamos el código css a:

*{

         margin:0px;

         padding:0px;

}

header,nav,section,article,aside,footer{

         display:block;

}

header{

         background:cyan;

}

nav{

         background:yellow;

}

section{

         background:brown;

}

article{

         background:red;

}

aside{

         background:blue;

}

footer{

         background:pink;

}

@media screen and (min-width:480px){

}

@media screen and (min-width:767px){

header{

         background:green;

         }

nav{

         background:cyan;

}

section{

         background:pink;

         display:inline-block;

         width:74%;

}

article{

         background:yellow;      

}

aside{

         background:red;

         display:inline-block;

         vertical-align:top;

         width:23%;        

}

footer{

         background:brown;

}

}

@media screen and (min-width:950px){      

}

Quedando nuestra web en modo escritorio:

Y en modo móvil:

Os explico las modificaciones en este código, lo primero que cambiamos es:

*{

         margin:0px;

         padding:0px;

}

header,nav,section,article,aside,footer{

         display:block;

}

Con esto indicamos con el “*” (selector universal) que eliminamos todos los márgenes y paddings, el padding es como un margen interior.

Despues separamos todos los identificadores usados con “,” para darles a todos formato para que actúen como bloques y se visualicen uno debajo del otro según el orden que tienen en el html.

Seguidamente, dentro del apartado css para las tablets minimo de ancho 767px, introducimos el siguiente código:

section{

         background:pink;

         display:inline-block;

         width:74%;

}

article{

         background:yellow;      

}

aside{

         background:red;

         display:inline-block;

         vertical-align:top;

         width:23%;

}

Como podeis ver, el primer cambio es que en vez de visualizarse en bloque como indicamos anteriormente, ahora indicamos que se visualicen en línea e indicamos un ancho en porcentaje para que quepan las dos partes, alineando el “aside” verticalmente arriba (top). El ancho se puede indicar mediante pixeles, os recomiendo hacer cambios y probar.

Con esto ya tenemos la web preparada para varios dispositivos, ahora pasaremos a darle un formato mejor.

En la siguiente entrada profundizare en el formato CSS para cada componente de nuestra web.

Gracias.