domingo, 27 de octubre de 2019

Javascript


Javascript

¿Que es JavaScript?


JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas.

Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.


¿Que etiqueta dentro de HTML, me permite introducir un script de JavaScript?

Para poder usar un script  de javascript dentro de html, debemos utilizar una etiqueta que le diga al editor de html que estamos utilizando un script, esta etiqueta es la siguiente.

Ejemplos.



Etiqueta que te permite introducir un script de JavaScript dentro de html es:
<script></script>

¿Cómo podemos agregar un archivo externo de JavaScript, cuál es la línea de código en HTML?


El código JavaScript en línea o interno forma parte del documento HTML, por tanto si visualizas el código fuente de la página sí podrás verlo.

En cambio el código en archivos externos no podrás verlo directamente dentro del código HTML de la web, aunque sí podrás ver el archivo al que se referencia. Podrás acceder al código JavaScript escribiendo la ruta correspondiente.




Para agregar el archivo externo de javascript dentro de la etiqueta html, se hace de la siguiente forma.

Ejemplos.



Escribir códigos en Html.
Linea de codigo.

<script type="text/javascript" src="/js/codigo.js"></script>

Otros ejemplos.


¿Qué significa la palabra script?

El script es un documento que contiene instrucciones, escritas en códigos de programación.

El script es un lenguaje de programación que ejecuta diversas funciones en el interior de un programa de computador.


¿Cuál es la extensión de un archivo de JavaScript?


La extensión de archivo JS corresponde a un archivo de texto utilizado en conjunción con el lenguaje de programación JavaScript. Cuando un programador necesita ejecutar un tipo específico de función en una página web, incluye el código JavaScript de dicha función en un archivo JS.

Su extensión es la siguiente: 
.js

¿Para qué sirve y cómo se utiliza “innerHTML” en JavaScript y dentro de un documento de HTML?




Es aquel que devuelve el valor de innerHTML hace que el agente de usuario serialice el fragmento HTML compuesto por los descendientes del elemento.

Sirve para:
La cadena resultante es devuelta. ... Esto le permite ver la sintaxis HTML de los nodos contenidos en el elemento

La propiedad Element.innerHTML devuelve o establece la sintaxis HTML describiendo los descendientes del elemento. Al establecerse se reemplaza la sintaxis HTML del elemento por la nueva.

Notas de uso.

La propiedad v de muchos tipos de elementos—incluyendo <body> o <html>—puede ser devuelta o establecida. Esta propiedad se puede usar para ver el código HTML de la página actual, incluida la que haya sido modificada dinámicamente.

¿Para qué sirve y cómo se utiliza “document.write()” en JavaScript y dentro de un documento de HTML?


Uno de los comandos básicos de JavaScript es document.write. Esto imprime el texto especificado en la página. Para imprimir texto literalmente, escribe el texto en comillas simples y entre paréntesis como sigue:

document.write("Hola Mundo!");

El código anterior imprimirá el mensaje "Hola Mundo!" que aparecen en la página.




Ten en cuenta que si se colocas comillas alrededor del nombre de la variable, se imprimirá el nombre de la variable (en lugar del valor de la variable). También puedes combinar valores de variables y cadenas de texto mediante el signo +:







¿Para qué sirve y cómo se utiliza “window.alert()” en JavaScript y dentro de un documento de HTML?


Esta función es un método del objeto Window y es una de las más utilizadas al momento de iniciarnos en JavaScript, pues es la encargada de mostrar una pequeña ventana de aviso en la pantalla, así, si se requiere que aparezca un mensaje cuando ocurra determinada acción en el programa, podemos hacer uso de esta función.

Es un mensaje, es un valor opcional del texto que se desea mostrar en el diálogo de alerta, o, alternativamente, un objeto que será convertido a texto y mostrado.


Se utiliza de la siguiente manera:
1.
2.

=



Como pudimos observar en el ejemplo para introducir la alerta;

 Primero creamos el documento html, luego de eso ya que estén los elementos principales, utilizamos <script></script> para que el documento html sepa que estamos introduciendo javascript;

 Ahora queda poner lo que es alert("") que es lo que te permitirá poner el mensaje de alerta.

He aquí unos ejemplos de como es el resultado.


En este primer ejemplo; se puso este script en blogger, utilizando la opción html.






¿Para qué sirve y cómo se utiliza “console.log()” en JavaScript y dentro de un documento de HTML?

Se utiliza para imprimir mensajes de Javascript por la consola. Puede ser que es el comando de JavaScript que más se utiliza.

Console.log es la punta del iceberg a a la hora de usar la consola.

La consola de JavaScript soporta varios niveles de Log que nos permiten imprimir mensajes organizándolos por las típicas tipologías de Log (INFO, WARN, ERROR, etc). Por lo tanto dependiendo de nuestras necesidades podemos imprimir unos u otros.

Se utiliza de la siguiente forma, en javascript y dentro de un documento html:



¿Para qué sirve y cómo se utiliza-- “;”-(punto y coma) en JavaScript y dentro de un documento de HTML?

El punto y coma es un símbolo que me permite saber en qué momento…una instrucción está terminando, es decir, en qué momento…estará terminando de ejecutarse o de declararse.

El poner comillas te permite poder poner, las especificaciones, hay dos una con la que abres y otra con la que sierras, dentro de esas comillas estarán las especificaciones que quieras introducir, las cuales se separaran con punto y coma.(;).

Aquí un ejemplo.


Para más información, aquí les dejo un vídeo el cual, es un curso completo de JavaScript.



Muchas gracias
por la atención prestada.



domingo, 13 de octubre de 2019

Introducción al diseño Web.

Diseño Web.


Introducción al Diseño Web.



Diseño Web
El diseño web es una actividad que te permite planificar, diseñar, y darle mantenimiento a tus sitios web.


¿Qué es HTML?


Es un lenguaje de marcado, que se utiliza para desarrollar páginas web. Para lograr esto se utilizan etiquetas.


Ejemplo.


Para crear una página web con html necesitas manejar al menos las etiquetas básicas, para poder comenzar creando tu página.








Principales Características de HTML.

Este lenguaje nos ofrece una gran adaptabilidad, también estructuración lógica además es fácil de interpretar por humanos como por máquinas.



-HTML se conoce por tener un lenguaje de computadora especialmente para crear sitios web.



¿Qué significa etiqueta de marcado HTML?


Es una marca que delimita regiones. ... La Web se basa en el HTML, «lenguaje de marcado de hipertexto».

Ejemplo.
Bien ya que incorporamos texto en lo que estamos creando con html, hay que hacer algo mas, y es el marcado de los elementos que componen al texto, normalmente se forman con palabras en cursiva o negrita, correcciones y anotaciones.

Entre las etiquetas más utilizadas para marcar texto se encuentran <em> y <strong>. 

Este fue un ejmplo de como podemos usar <em> y <strong>.


<em> Esta etiqueta es para letras en cursiva.
<strong> Es para poner letras en negrita.
<b> Al igual que <strong> es para poner letras en negrita.


¿Qué representa una etiqueta en HTML?




Representan un valor que te permitirá hacer algo, es decir, ya quieras agregar, párrafos, títulos, palabras negrita, color de fondo.


Ejemplos de ellas.

<abbr> Esta etiqueta representa la definición de una abreviatura o un acrónimo.
<b> Esta etiqueta representa palabras en negrita.
<br>    Esta representa un solo salto de línea.
<button> Esta etiqueta te permite colocar un botón.
...

¿Los documentos en HTML deben empezar, con cual etiqueta?


Cada que vallamos a utilizar las etiquetas en html, debemos empezar colocando una en específico, esta es: <html></html>

Este fue un pequeño ejemplo de cómo debemos empezar en html, en cuanto a las etiquetas, podemos ver que al inicio y al final ponemos <html></html>.

¿Cuáles son las etiquetas que utilizamos para los encabezados?




Las etiquetas que utilizamos para los encabezados son las siguientes.


<h1>  Esta representa un encabezado, son 6 en total (<h1><h6>), mientras menor sea el número, más grande el encabezado.




Ejemplos.
De esta forma.






Este es el resultado.

¿Cuál es la etiqueta de Párrafo en HTML, y cual es su función en especifico?


<p></p> Es para colocar párrafos, no es la única, solo que no tienes tanta libertad para ciertas cosas.

Ejemplos.

Ej.1


Nota: HTML considera que los espacios son bloques de texto. En un párrafo, todos los espacios, saltos de línea y tabuladores cuentan como un espacio simple.

Ej.2




¿Cuál es la etiqueta de Link o enlaces web en HTML, y cual es su función en especifico?


Para esto utilizamos el elemento <a>. Para usar esta etiqueta se requiere de un atributo que es necesario ponerlo (href).

jueves, 3 de octubre de 2019

Atributos de HTML.

Atributos.


-Todas las etiquetas pueden tener atributos, algunas si lo requieren por obligación y otras es opcional.
-Los atributos proporcionan información adicional acerca del elemento.
-Los atributos siempre se especifican en la etiqueta de inicio.
-Los Atributos generalmente Vienen en Parés Como nombre / valor: nombre = "valor".



A continuación les mostrare algunos atributos básicos.


Atributo src.


Este atributo pertenece a la etiqueta img, que es para imágenes, cuando requieras usar la etiqueta img debes poner el atributo src, es muy necesario ponerlo.

Aquí un ejemplo de como se utiliza.
<img src="img_cars.png">


Atributos width y Height.



Estos atributos significan ancho y alto, son utilizados como su nombre lo dice para dar cierto ancho y cierto largo a una imagen.


Estos se especifican en pixeles de forma predeterminada; entonces ancho = "500" Esta sifra significa los pixeles de ancho que tiene o que le asignes.


Estos atributos se usan con la etiqueta <img> que es para imágenes.

Ejemplo.
<img src="img_girl.jpg" width="500" height="600">



Atributo alt.


Este especifica un texto alternativo, se utilizará, si una imagen no se puede visualizar. Ademas puede ser leído por los lectores de pantalla. Así, alguien "escucha" la página web, ejemplo, alguien con problemas de visión, puede "escuchar" el elemento.

<img src="img_girl.jpg" alt="Girl with a jacket">




Atributo style.


El atributo style se utiliza para especificar el Estilo de cierto elemento cualquiera, el color, Fuente, Tamaño, etc.

Ej. Si quieres cambiar el color de un párrafo o solo una palabra se hace de la siguiente manera. (style="color:blue").

<p style="color:red">This is a paragraph.</p>



Atributo href.


Este es el atributo más importante de la etiqueta <a> (que es para vinculo), este es el que indica la url a la que está dirigido el enlace.

<a href="https://www.w3schools.com">





Atributos para internacionalización.


Se utilizan para que las páginas que muestren sus contenidos en varios idiomas o a aquellas páginas que quieran indicar de forma explicita el idioma que utilizan para sus contenidos.

Atributo lang.


Este atributo es para declarar el idioma de la pagina, el idioma del documento se declara con la etiqueta <html>.

La forma que usamos este atributo es la siguiente:


<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>


Atributo bgcolor.

Este atributo te permite ponerle color al fondo de la pagina web que estas creando. Es usado para determinar el color de fondo de un párrafo, tabla o cualquier otra parte del HTML.

Se usa de la siguiente manera.



Aquí un ejemplo:

<!DOCTYPE html>

<html>

<body bgcolor="red">

</body>

...

</html>




Otros. ...

Atributos de Eventos.

Atributo onClick.

Para activarlos, lo primero es elegir la etiqueta en la que ocurrirá el evento. Una vez elegida, colocaremos un atributo en dicha etiqueta para detectar si se produce el evento. Además, hay que indicar el prefijo on en el atributo del evento. Por ejemplo, si queremos detectar el evento click, el atributo HTML deberá llamarse onClick.

<div>
  <img src="gandalf.jpg" alt="Gandalf" onClick="alert('¡Has hecho clic!')">

</div>

Ejemplo.



Atributo onreset.

Este atributo sirve para restablecer algo que ya hayas llenado, el onreset atributo se activa cuando una forma se restablece. Cuando restablece el formulario, se activa una función que alerta algún texto.
  Proceso.

   Resultado.


Otros...

Atributos de Foco.

El elemento con foco se refiere al elemento que actualmente recibe los eventos de entrada. Si hay tres campos de texto en una ventana, el que tiene el foco es en el que el usuario puede introducir texto. Sólo un elemento por ventana puede tener el foco en un momento dado.

Atributo onfocus.

Se activa una función cuando se enfoca uno de los campos de entrada. La función cambia el color de fondo del campo de entrada.




Atributo Onblur.

Este es para validar un campo de entrada cuando el usuario sale de ella:

El atributo onBlur dispara el momento en que el elemento pierde el foco.

OnBlur es la más utilizada con el código de validación de formularios (por ejemplo, cuando el usuario sale de un campo de formulario).

El atributo onBlur es lo contrario de la onfocus atributo.



Cuando abandona el campo de entrada, se activa una función que transforma el texto de entrada en mayúsculas.

Aquí les dejo un vídeo con otros atributos.


sábado, 21 de septiembre de 2019

Evolución y versiones de HTML.

Historia de HTML.


El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de "hipertexto" para compartir documentos. Los sistemas de "hipertexto" habían sido desarrollados años antes.


Y es que Tim Berners-Lee estando como trabajador del CERN se encontró con la problemática de poder facilitar el acceso a la información con la que trabajaban desde cualquier ordenador del centro o de otras instituciones que trabajaban con ellos.

Buscaban una forma sencilla y estándar de acceder a toda la información. Es en ese momento cuando nace el protocolo HTTP (hypertext transfer protocol) y las páginas HTML.

Además ideó que las páginas estarían unidas entre sí, estarían enlazadas. Era el concepto de hipertexto.

Para la definición del estándar HTML, Tim Berners-Lee se basó en el lenguaje de marcado SGML (Standard General Markup Language). Este lenguaje define reglas de etiquetado y estructura generales.

Versiones y características de Html.


HTML 1.0


La primera versión de html nace en 1991, la cual fue creada por Tim Berners-Lee.

Tim Berners-Lee


Tim creó esta versión en el laboratorio de física nuclear de Ginebra, el cual tenia como finalidad el compartimiento de información científica en la comunidad académica. Era un lenguaje de marca muy pequeño ya que no contaba con la cantidad de etiquetas que ahora hay en la actualidad.


-Derivado del SGML, es un sistema general de marcado.
-Esta versión de HTML solo tenía 20 etiquetas, 13 aún perduran.
-Junto con esta primera versión nace el primer navegador: Nexus.


HTML 2.0


En 1995 se publica el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estándar oficial de HTML, es decir, el HTML 1.0 no existió como estándar.

Se simplificaba al máximo la estructura del documento para agilizar su edición, donde la declaración explícita de los elementos body, html y head es opcional.



-Esta versión de html, es la primera versión estándar oficial de html.

-HTML 2.0 no soportaba tablas.

-Mientras se iba avanzando con html nuevas etiquetas iban surgiendo.


HTML 3.0



En octubre de 1994 es creado el consorcio W3 o W3C.

Dentro de la W3C se empieza a trabajar en 1995 sobre el borrador de HTML 3.0, nunca llegará a ser recomendación, se quedará en borrador.

HTML 3.0 es interesante ya que empieza a hablar de elementos: tablas, textos alrededor de las imágenes, un elemento llamado MATH que permite crear fórmulas dentro del documento HTML.


-HTML 3.0 es un borrador de internet caducado. Estos pueden ser actualizados, reemplazados u obsoletos por otros documentos en cualquier momento.



HTML 3.2


Podríamos decir que HTML 3.2 es la primera versión de HTML ampliamente extendida y utilizada en la red.


HTML 3.2 tiene como objetivo capturar la práctica recomendada a principios del '96 y, como tal, para ser utilizada como reemplazo de HTML 2.0 .

-HTML 3.2 dejaba de ser una especificación teórica, buscaba ser más práctica. HTML 3.2 veía la luz en enero de 1997.






HTML 4.01



En HTML 4.01 la W3C empieza con la separación de la estructura del documento con la de la representación visual. Así crea un lenguaje paralelo al HTML 4.01 llamado CSS.

Los elementos nuevos que aparecen en HTML 4.01 son las hojas de estilo (CSS), los objetos (para poder insertar elementos externos como vídeo y música) y los frameset para dividir la pantalla en partes.

-HTML 4.01 era un lenguaje que definía del estándar HTML y lo consensuaba entre diferentes navegadores, dejaba abierta, posibilidades de interpretación de estructura. Esta seguía siendo el esquema de SGML.

XHTML 1.0



Debido a la falta de coherencia en la definición de los esquemas derivados del SGML, la W3C decide definir un nuevo subesquema de SGML denominado XML. Este esquema sería un esquema bien definido y cerrado, lo cual podría proporcionarnos documentos coherentes y sin posibilidad de dobles interpretaciones.

-XHTML 1.0 viene a ser los mismo que HTML 4.01 pero con una definición de documento basada sobre XML en vez de sobre lo que es SGML.



HTML 5



HTML 5 viene siendo ya la última versión de HTML.

HTML5 empieza su definición apoyándose en dos puntos. Por un lado, la compatibilidad hacía atrás de todo lo que hay creado y por otro la capacidad de absorber todas las funcionalidades que los nuevos fabricantes de la web habían ido construyendo.

-Una vez que fue publicado XHTML 1.0 los esfuerzos de la W3C se dirigen a la creación de XHTML 2.0 como evolución del lenguaje en su totalidad.