TeraZoom WebClass

 Contenido

 


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.11.21.3
2.12.22.3
3.13.23.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:














Comentarios

Publicar un comentario

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...
Leer más

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...
Leer más

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...
Leer más