Terazoom Web Class

Esta página esta diseñada para los suscriptores del curso Terazoom Web Class del canal de YouTube  llamado  Terazoom AlfonsoPaz si deseas dar un paseo por el Blog del canal pulsa el link:  VerBlogTerazoom.

En el siguiente indice se encuentran los ejercicios relacionados a los vídeos  de las clases del canal, la navegación es dentro de esta pagina, donde encontraremos todos los temas del curso.


Indice


Temas Avanzados


Introducción

Para crear un sitio Web con estilo y funcionalidad, debemos primero aprender conceptos básicos en tres diferentes ámbitos y entender la estructura básica de la web. Para lo cual necesitaremos un editor de texto o un editor de código Html. También necesitaremos de un Navegador o Buscador para ejecutar lo codificado y consolidar los conceptos básicos de Html, CSS y JavaScript aprendidos.





Cualquier sitio web tiene dos partes principales FrontEnd, BackEnd 

El frontend trabaja en la capa superior e interactúa directamente con los usuarios finales. En esta capa se utiliza código para implementar el diseño de un sitio web con ayuda de herramientas como:
HTML para la estructura general y el contenido del sitio web, 
CSS para el estilo 
JavaScript para la interactividad avanzada.

El backend se refiere a dispositivos que permiten el funcionamiento e interacción con todo lo que se vé en el navegador,  responden a las solicitudes del usuario, por ejemplo, enrutadores, servidores de red y servidores de correo electrónico.


El HTML es un lenguaje estandart de marcas para elaborar páginas Web, se refiere a marcas porque utiliza etiquetas, que no es más que palabras o letras claves demarcadas dentro de los signos "Menor que" & "Mayor que"; con la salvedad que en la mayoría de las etiquetas se tiene un inicio y un final, por ejemplo: 
<Etiqueta inicio> Contenido </Etiqueta cierre>

También existen algunas etiquetas que utilizan solo el inicio como:  <br> y <hr> 

La primera "break-row" equivale a un enter y la segunda genera una linea divisoria "horizontal-row"


La Estructura básica de una página web tiene tres elementos básicos:

1) Todo documento Html debe comenzar con una declaración del tipo de documento html

2) Luego se define el espacio de la página con las etiquetas <Html>  </Html> 

3) Dentro del espacio de la página se encuentran  HEAD y BODY
<Head>  </Head> contiene información del documento, título, enlace a scripts y estilos de web page.
<Body> </Body> contiene el desarrollo del contenido de la web page.


Ejercicio nro 1

Copia el siguiente código, pega en un (archivo.html) y comienza ya!

<HTML>
<HEAD>
 <Title> Titulo de la Página</Title>
 </HEAD>

  <BODY>

<!-- Contenido de la Página -->
<p>El HTML es un lenguaje estandart de marcas para elaborar páginas Web, se refiere a marcas porque utiliza etiquetas, que no es más que palabras o letras claves demarcadas dentro de los signos "Menor que" & "Mayor que"</p>

</BODY>

</HTML >

Puedes verlo en en you tube:


Que es un script

Un lenguaje de script es un pequeño lenguaje de programación cuyo código se inserta dentro del documento HTML. Este código se ejecuta en el navegador del usuario al cargar la página, o cuando sucede algo especial como puede ser el pulsar sobre un enlace. 
Un Script acepta varios lenguajes de programación pero en este curso vamos a utilizar uno de los más populares, el JavaScript.

En este ejercicio se utiliza la definición de Variable, se establece colocando  la instrucción Var  seguida del nombre de la variable, igualando a un valor, en este caso el valor de las funciones:
new Date()
getHours()
getMinute()
GetSeconds()
luego mostramos dichos valores por medio de la instrucción alert()

Observar bien como esta escrito el código entre las etiquetas <script></script> ya que dicho código es el que le da la funcionalidad a la página.


Ejercicio nro 2

Copia el siguiente código, pega en un (archivo.html), lánzalo con el navegador de tu preferencia y observa el comportamiento del código. Este es el inicio del estudio de la funcionalidad de una página Web, poner especial atención en la codificación que se encuentra entre las etiquetas: <script> </script>

<html>
<head>
<title>La hora de hoy: </title>
<script>
var FechaHoy = new Date();
var hr1 = FechaHoy.getHours();
var hr2 = FechaHoy.getMinutes();
var hr3 = FechaHoy.getSeconds();

alert( "Son las  "  +hr1 + "  Horas ")
alert( hr2  + "  Minutos ")
alert( hr3  + "  Segundos ")
</script>

</head>

<body>
<p><h1>Que es un script</h1>Un lenguaje de script es un pequeño
lenguaje de programación cuyo código se inserta dentro del
documento HTML. Este código se ejecuta en el navegador del usuario
al cargar la página, o cuando sucede algo especial como puede ser el
pulsar sobre un enlace.</p>
</body>

</html>

Puedes verlo en en you tube:



Que es una etiqueta y su estructura

Una etiqueta es un comando marcado entre los símbolos "<         >", esta contiene la información a mostrar entre la Marca inicial y la Marca final, la marca final se reconoce porque dentro de los símbolos  "<       >"  se repite la etiqueta pero inicia con el signo de división "< /      >".

 Es decir una etiqueta se encuentra entre las marcas inicial y final; dentro de estas marcas se encuentra la información a suministrar por la web page y será visualizada de acuerdo a su denominación, por ejemplo:

<div>Presenta el texto en una división</div>

< P >Coloca el texto en forma de párrafo </P >

<H1> presenta el texto como el más importante: Titulo principal </H1>

<H2> presenta el texto como el segundo en importancia: Título Secundario </H2>

<H3> presenta el texto como el tercero en importancia: Título Terciario </H3>

<H6> es el texto más pequeño </H6>

 


Como definir una tabla

Para definir una tabla se debe tomar en cuenta que el lenguaje esta estructurado para generar la tabla por filas, las diferentes etiquetas indican la ubicación de las filas y se definen de la siguiente manera:

Table = define una tabla
Tbody = cuerpo de la tabla
Tr = Table row = cada una de las filas que conforman la tabla
Td = Table Data cell = cada una de las celdas de datos correspondiente a una fila


Ejemplo de una tabla 3 x 3 con encabezado:

< table >

<tbody>

< tr ><td>  A  </td><td>  B  </td><td>  C  </td></tr>

< tr ><td> 1.1 </td><td> 1.2 </td><td> 1.3 </td>< tr >

< tr ><td> 2.1 </td><td> 2.2 </td><td> 2.3 </td>< tr >

< tr ><td> 3.1 </td><td> 3.2 </td><td> 3.3 </td>< tr >

</tbody>

</table>



 A   B   C 
1.1 1.2 1.3
2.1 2.2 2.3
3.1 3.2 3.3


Como generar un listado

Las etiquetas LO & LU nos permiten generar listas o viñetas ordenadas numericamente ("Ordered List") o también listados sin numeración iniciando con un punto negro ("Un-ordered List"), se utiliza la misma estructura de marcas inicial y final con la etiqueta deseada, tomando en cuenta que cada item de la lista debe estar entre las marcas < Li > Elemento de lista < /Li  >

Ejemplo de listado ordenado:

< Lo > Los elementos de un listado sencillo son tres:

< Li > Listado Ordenado "LO" ( Ordered List ) </ Li >

< Li > Listado No Ordenado "LO" ( Un Ordered List ) </ Li >

< Li > Elemontos del Listado "Li" ( List item ) </ Li >

</ Lo >

Los elementos de un listado sencillo son tres:

  1. Listado Ordenado "LO" ( Ordered List )
  2. Listado No Ordenado "LO" ( Un Ordered List )
  3. Elementos del Listado "Li" ( List item )



ATRIBUTOS

Las etiquetas se complementan con atributos que se anexan inmediatamente después de cada elemento o comando y cada atributo puede tener un valor asignado que influye directamente en el comportamiento de la etiqueta, guardando siempre las siguientes características:

Todos los elementos HTML pueden usar atributos

Los atributos proveen información adicional al elemento al cual se aplica

Los atributos se especifican en la etiqueta de inicio

Los atributos usualmente vienen en pares   Nombre = "Valor"


Ejemplo:     <a>  </a>


 La etiqueta "A" esta definida como HYPERLINK o hipervinculo, este nos presenta un texto que al hacer CLICK sobre él nos lleva a otro lugar dentro de la misma página o fuera de ella. Esto depende del valor del atributo href


<a href="#Valor" >TEXTO MOSTRADO</a>


Si  href = "#Valor" ; entonces el Numeral "#" nos indica que la busqueda se realizará dentro de la misma página, seguido del Valor que nos ubica el cursor donde se encuentre el atributo id="Valor" dentro de una etiqueta HYPERLINK.

Dentro de este articulo se incluyó una etiqueta de hipervinculo de anclaje identificada "id" como "UNO" y el texto mostrado se corresponde con el titulo "ATRIBUTOS"

Estructura hipervinculo de anclaje:

<a href="#UNO" >ATRIBUTOS</a>

La siguiente estructura nos permite ubicar el cursor sobre el TITULO del presente artículo que se encuentra ubicado en la primera fila, al aplicar click sobre el siguiente texto mostrado:


IR A ATRIBUTOS


El cual tiene la siguiente estructura:

<a href="#UNO" >IR A ATRIBUTOS</a>


cuando se necesita un hipervinculo fuera de la página el valor href equivale al URL

como es el caso del icono inferior  PREV la etiqueta HYPERLINK esta mostrando una imagen mas no un texto y su valor href no es mas que la dirección URL de la página principal de la revista de la siguiente manera:


<a href="https://terazoom.blogspot.com">

<img src="https://............/imagen.jpg" />

</a>


la etiqueta IMG es la que permite mostrar una imagen y su atributo SRC no es más que la dirección URL donde se encuentra ubicada dicha imagen en la red, así como las demás etiquetas, la IMG acepta varios atributos que pueden ayudar a conformar el tamaño y características de la imagen mostrada.


El punto final de esta reflexión es que "al hacer click sobre la imagen el cursor se ubica sobre la página cuya dirección URL se encuentra asociada al atributo SRC.

Realiza la prueba: hacer click sobre la imagen ubicada abajo y a la izquierda de la presente página y cargará de nuevo la pagina inicial.


Resumen de atributos:

Se escriben dentro de la etiqueta inicial

Al lado derecho del elemento o comando

Posee un valor dentro de comillas que define la accion a tomar




 

Ejercicio nro 3

Copia el siguiente código, pega en un (archivo.html), lánzalo con el navegador de tu preferencia y observa el comportamiento del código. Este ejercicio muestra como detectar un click (onClick) sobre un elemento identificado con el atributo Id="cabecera"  dentro una página Web, poner especial atención en la codificación que se encuentra entre las etiquetas: <script> </script> y preguntar sobre la estructura de una función

<html>
<head>
<title>Pulsar Tecla</title>
</head>

<body>
<div id="cabecera"> Hacer Click sobre este texto</div>
<br/>
<div id="pantalla"> screen </div>
</body>

<script>
document.getElementById("cabecera").onclick = SS;

function SS() {
alert("Vamos a cambiar el texto de la 2da linea");
document.getElementById("pantalla").innerHTML="Incluimos este texto";}
</script>
</html>

Puedes verlo en en you tube:







Ejercicio nro 4

Copia el siguiente código, pega en un (archivo.html), lánzalo con el navegador de tu preferencia y observa el comportamiento del código. Este ejercicio muestra la misma funcionalidad del ejercicio nro 3 pero utilizando Dos funciones a la vez, poner especial atención en la codificación que se encuentra entre las etiquetas: <script> </script> y preguntar sobre la estructura de las dos funciones.

<html>
<head>
<title>Pulsar Tecla</title>
</head>

<body>
<div id="cabecera1"> Hacer Click aqui para FuncionSS1</div>
<div id="cabecera2"> Hacer Click aqui para FuncionSS2</div>
<br/>

 <h3 id="pantalla">Screen</h3>
</body>

<script>
document.getElementById("cabecera1").onclick = SS1;
document.getElementById("cabecera2").onclick = SS2;

function SS1() {
alert("Vamos a cambiar el texto de la 3ra linea por:  FuncionSS1");
document.getElementById("pantalla").innerHTML="FuncionSS1";
}


function SS2() {
alert("Vamos a cambiar el texto de la 3ra linea por: FuncionSS2");
document.getElementById("pantalla").innerHTML="FuncionSS2";
}

</script>

</html>

Puedes verlo en en you tube:




Como detectar un Click sobre una línea de texto

Existen diferentes procedimientos para detectar el evento "Click" sobre una línea de texto, empezaremos con el nivel básico. El primer paso es identificar la linea de texto que deseamos utilizar como activador; para lo cual debemos utilizar el atributo id="identificador" la palabra identificador corresponde al nombre asignado para esa linea de texto y se escribe dentro de la etiqueta de inicio por medio de la cual se este mostrando el texto; por ejemplo:

<div id="clave" > hacer click sobre este texto </div>

Esta línea debe estar dentro del área (Body) de la página Web y cada vez que hacemos un click sobre ella podemos detectar dicho evento por medio de la siguiente estructura:

<script >
document.getElementById("clave").onclick = accion
</script>

Esta estructura a su vez activa la función identificada como accion es decir todas las órdenes escritas dentro de esta función se ejecutarán después de que "getElementById" detecte el evento .onclick solamente en la etiqueta que tenga el identificador id igual a "clave", cada vez que hacemos click sobre esa linea la estructura document.getElementById.onclick activa la funcion que esta despues del igual; que en este caso la hemos llamamos accion.
es importante saber que "getElementById", los demás metodos y funciones de javascript solo son válidos dentro del área de script

<script>
  function accion() {
  alert("Se hizo click sobre el texto");
  }
</script>

Esta estructura contiene instrucciones agrupadas dentro de los signos { } , separadas por ( ; ) "punto y coma" y serán ejecutadas cuando hagamos el llamado de la funcion que en este caso hemos denominado accion.

Aclaratoria sobre la escritura de HTML y JavaScript (importante)

  • <script></script>

    • El área de script debe ser único, no pueden existir dos o más áreas de script por lo que el navegador daría como resultado solamente la presentación del texto sin funcionalidad; la página dejaría de ser interactiva y al hacer click sobre los botones, textos o links, no pasaría nada (solo texto).
    cuando explicamos una estructura y la colocamos entre las etiquetas de <script></script> es para resaltar que dicha estructura debe ser escrita dentro del area de script, pero no significa que deben escribirse dichas etiquetas en cada estructura cuando estemos creando nuestra página Web manualmente.

  • Mayúsculas y Minúsculas

    • La escritura de una página web es muy estricta por lo que es importante tener en cuenta las Mayúsculas y Minusculas en los identificadores (id) en las etiquetas, en los atributos, en los eventos, funciones y métodos, en fin durante toda la creación de la página web. por ejemplo:

    getElementById tiene 3 mayúsculas E, B, I

    Si escribimos getelementById , getElementbyId o getelementbyid el navegador no lo reconoce y por lo tanto la detección del evento Click no se activaría.

  • Las funciones

    • Las funciones son bloques de instrucciones que se activan al hacer el llamado a su nombre por medio de estructuras como: document.getElementById.onclick = nombreDeLaFuncion . Esta estructura activa la funcion accion, la cual contiene sus instrucciones agrupadas dentro de los signos { } y separadas por "punto y coma". Para definir una función debemos escribir la palabra funcion en inglés (function) seguida del nombre que queremos colocarle a dicha funcion acompañada de dos parentesis () de la siguiente manera:

    <script>
      function accion() {
     Aqui colocamos todas las instrucciones separadas por "punto y coma" que deseamos realizar cuando se active la funcion...  }
    </script>

  • Ejercicio de detección sencillo

    • El siguiente ejercicio muestra la estructura sencilla de detección para casos de hasta 3 y 4 líneas de texto, más adelante veremos su uso sobre otros elementos como imágenes, Botones, tablas y links.


    <html>
    <head>
    <title>Detección de evento Click</title>
    </head>

    <body>
    <div id="cabecera"> Hacer Click sobre este texto</div>
    <br/>
    <div id="pantalla"> screen </div>
    </body>

    <script>
    document.getElementById("cabecera").onclick = SS;

    function SS() {
    alert("Vamos a cambiar el texto de la 2da linea");
    document.getElementById("pantalla").innerHTML="Incluimos este texto";}
    </script>
    </html>


    Otras técnicas de detección de eventos

    Cuando realizamos páginas grandes con funcionalidades amplias es posible mejorar las estructuras de detección utilizando addEventListener el cual permite adicionar la lectura de un evento a un elemento específico, con mayor variedad de eventos como por ejemplo:

    al mover el mouse sobre un elemento al hacer click sobre un elemento al presionar una tecla al cargar una página web al salir de una página web al arrastrar un elemento al seleccionar un elemento y muchos más...
    Ejemplo:


    <html>
      <head>
        <title>Ejemplo de Eventos</title>

        <script>
     
    function Fv1() {document.getElementById("EventoX").innerHTML = "KeyPress";}
    function Fv2() {document.getElementById("EventoX").innerHTML = "KeyDown";}
    function Fv3() {document.getElementById("EventoX").innerHTML = "KeyUp";}
    function Fv4() {document.getElementById("EventoX").innerHTML = "Click";}
    function Fv5() {document.getElementById("EventoX").innerHTML = "MouseDown";}
    function Fv6() {document.getElementById("EventoX").innerHTML = "MouseUp";}

          // Eventos de teclado
          document.addEventListener("keypress", Fv1, false);
          document.addEventListener("keydown", Fv2, false);
          document.addEventListener("keyup", Fv3, false);

          // Eventos de ratón
          document.addEventListener("click", Fv4, false);
          document.addEventListener("mousedown", Fv5, false);
          document.addEventListener("mouseup", Fv6, false);
        </script>
      </head>

      <body>
        <p>Press any key or click the mouse to get the event type.</p>
        <p>Tipo de Evento: <span id="EventoX" style="color:red">-</span></p>
      </body>
    </html>


    Puedes verlo en en you tube:





    La presente Tabla tiene una presentación característica que está definida entre las etiquetas
    <style></style>

    color gris suave como para bordes o con letras blancas #777
    color azul suave fondo   "#edf2ff"
    color azul oscuro para usar con letras blancas  #3630a3

    La propiedad border-collapse se utiliza para fusionar los bordes. Ésto tiene una gran influencia sobre la presentación y el estilo de las celdas de tabla. La representación de los bordes de tabla es dividida en dos categorías en CSS2
    "fusión" y "separación" (collapse - separated).

    el caso collapse significa que los cuadros que rodean el texto se encuentran pegados 


    Primer Nombre Apellido
    Alfonso Paz
    Emmanuel Guerrero


    Copia, pega en archivo Html  y lánza el siguiente Código con el navegador de tu preferencia, se presentará la misma tabla con las características previamente definidas.



    <html>
    <head>
    <title>Style fijo</title>

    <style>
    table.tbl { width:400px; border-collapse: collapse;  }
    .tbl th { border: solid 5px #777; padding: 20px; background: #3630a3; color:white;}
    .tbl td { border: solid 3px #800; padding: 5px; background: #edf2ff; color:black;}
    </style>

    </head>

    <body>
    <table class="tbl" style=" style="width:400px; border-collapse: collapse; ">

      <thead>
        <tr>    <th>Primer Nombre</th>    <th>Apellido</th>    </tr>
      </thead>

      <tbody id="mytbody" style="font-style:italic;">
        <tr>    <td>Alfonso</td>        <td>Paz</td>            </tr>
        <tr>    <td>Emmanuel</td>    <td>Guerrero</td>   </tr>
      </tbody>
    </table>

    <body>

    <html>




    La presente Tabla tiene una presentación característica que está definida dentro de las etiquetas

    <table style="border-collapse: collapse; width: 400px;">

     <thead style="background: rgb(54, 48, 163); border: 5px solid rgb(119, 119, 119); color: white; padding: 20px;">

    <tbody id="mytbody" style="background: rgb(237, 242, 255); border: 3px solid rgb(136, 0, 0); color: black; font-style: italic; padding: 5px;">

    <Table  //es la tabla en general//>
    <thead  /es el encabezado de la tabla//>
    <tbody  //es el cuerpo de la tabla//>

    tiene el mismo efecto pero se diferencia en que este método utiliza el atributo  style="       "
    mientras que el otro método se debe definirse en el area
    <head></head>

    Primer Nombre Apellido
    Alfonso Paz
    Emmanuel Guerrero


    Copia, pega en archivo Html y lánza el siguiente Código con el navegador de tu preferencia, se presentará la misma tabla con las características previamente definidas.

    <html>
    <head>
    <title>Style fijo</title>
    </head>

    <body>

    <table style="border-collapse: collapse; width: 400px;">
      <thead style="background: rgb(54, 48, 163); border: 5px solid rgb(119, 119, 119); color: white; padding: 20px;">
        <tr>
          <th>Primer Nombre</th>
          <th>Apellido</th>
        </tr>
      </thead>

      <tbody id="mytbody" style="background: rgb(237, 242, 255); border: 3px solid rgb(136, 0, 0); color: black; font-style: italic; padding: 5px;">
        <tr>
          <td>Alfonso</td>
          <td>Paz</td>
        </tr>
        <tr>
          <td>Emmanuel</td>
          <td>Guerrero</td>
        </tr>
      </tbody>
    </table><br /><br />

    </body>
    </html>




    Puedes verlo en en you tube:






    Entradas populares de este blog

    Imagen
      ¡Bienvenidos a TeraZoom Magazine! Descubre un mundo de conocimiento y diversión, aprende con nuestros artículos, cursos prácticos e historias inspiradoras.  ¡Aprende y diviertete! en TeraZoom Magazine, donde  el conocimiento es accesible y divertido. Acompañanos a explorar el fascinante mundo de la tecnología; aquí encontrarás información detallada, bases de batos, Cálculos Interactivos, aplicaciones sencillas, planos de construcción, cursos prácticos e historias inspiradoras. ¡Únete y descubre qué significa TeraZoom!; Tera, del Sistema Internacional, que representa una inmensa cantidad de datos; Zoom, que en fotografía simboliza la capacidad de acercarnos a los detalles; y Magazine, una publicación variada. Juntos, forman TeraZoom: tu ventana al vasto mundo de la tecnología, donde exploramos cada detalle con pasión.  Como encender electro ventilador de tres cables: "Hola, ¿qué tal, amigos? Bienvenidos a nuest...
    Read more »

    YamahaFzr 1000 / La Leyenda

    Imagen
      Contenido Somos fanáticos de esta legendaria y poderosa máquina; caracterizada por su nobleza y vistosidad, con las elegantes líneas de cualquier bólido actual, levanta miradas por su poderoso rugido sordo de baja frecuencia que retumba entre las cilindradas de hoy en día, generando comentarios y resurgiendo nuevos proyectos...
    Read more »

    Contruye distorsión para guitarra eléctrica

    Imagen
      Contenido Una guía paso a paso para construir un pedal de distorsión casero para guitarra eléctrica, resaltando la posibilidad de utilizar materiales reciclados y la flexibilidad del diseño para adaptarse a los componentes disponibles. Cómo construir un circuito sencillo con transistores, resistencias y condensadores, detallando los valores específicos y dónde encontrar algunos componentes comunes. Además, se ofrecen consejos de sustitución de componentes difíciles de conseguir, como los potenciómetros, utilizando resistencias en serie. Modelo Mini Modelo Standart (Modelo Mini) Con tan solo 1 transistor NPN, 1 resistencia de 100K, 2 condensadores y un par de baterías de iones de litio (2 x 4v = 8v) recicladas de Laptop podemos construir esta distorsión para guitarra eléctrica con la ventaja de sustituir los transistores obteniendo resultados similares. Q1: entramos por medio de...
    Read more »