República Bolivariana de Venezuela

Ministerio del Poder Popular para la Educación Universitaria

Universidad Politécnica Territorial de los Altos Mirandinos

“Cecilio Acosta”

Programa Nacional de Formación en Informática

Titulo

Profesor: Autor:

Nombre del Profesor Manuel Agüero C.I.31079057

Trayecto II, Sección 3

14 de abril
Unidad 7: Herramientas de Diseño de Interfaz

• Introducción. Descripción del entorno de trabajo. Barras de herramientas.

Configuración de un sitio web. Creación y edición de páginas web. Inserción
y edición de textos e imágenes. Uso de hipervínculos. Tablas. Formularios.
Elementos Interactivos y multimedia. Plantillas. CSS.
Unidad 8: Programación Orientado a la Web.

• Programación de script: Introducción, variables, operadores, sentencias de

control, Vectores (tablas), Formularios, Almacenamiento de información con
BD. Gestión de archivos
Unidad 9: Herramientas Programación Cliente Servidor
• Servidores: características principales, estructura básica, instalación,
conexión y desconexión, resguardo y recuperación de la información.

• Publicación y actualización.

Unidad 7:

• Front End Design

• Introducción a HTML y CSS

• HTML, inserción y edición de textos e imágenes. Hipervínculos. Tablas,

Formularios. Elementos interactivos y multimedia.
• CSS

• Herramientas
• Plantillas

Unidad 8:

• Front End Programming

• Programación orientada a la web

• Introducción a JavaScript y Web Assembly, continua con JavaScript para ->
, variables, operadores, sentencias de control, Vectores (tablas),
Formularios, Almacenamiento de información con BD. Gestión de archivos
Unidad 9:

• Back End

• Herramientas de desarrollo de apps cliente/servidor: características,

estructura , instalación, conexión y desconexión, resguardo y
recuperación de la información. o Publicación y actualización.
 Herramientas de Diseño de Interfaz

El diseño e implementación de interfaces en el desarrollo web es un paso

fundamental para el desarrollo de una página web, esto ya que la interfaz es en sí
el rostro de la marca, por ende, la misma debe ser presentable, entendible y
comprensiva sin importar desde que dispositivo se esté observando. Este proceso
es implementado a través de HTML (HyperText Markup Language) y CSS
(Cascading Style Sheets).

HTML o lenguaje de etiquetas de hipertexto, es el encargado de mostrar el

contenido de una página, botones, enlaces, títulos, párrafos y listas.

El entorno donde se lleva a cabo el diseño de una interfaz web consiste de

una serie de software que permite la visualización de los diseños en tiempo real,
permitiendo a su vez emular las vistas que los usuarios tendrán en diversos
dispositivos, así como en diferentes navegadores, en pocas palabras el entorno de
trabajo de un diseñador de interfaces o también llamado desarrollador UI/UX debe
permitirle avanzar a lo largo del proceso creativo, planeación, diseño e
implementación para que el aspecto gráfico y contenido de la página sean acordes
al estilo de la marca y a su vez sea completamente responsivo, es decir, pueda ser
fácilmente entendible y legible desde cualquier dispositivo o navegador.

Etiquetas HTML

A lo largo del proceso en el cual se define y organiza el contenido de una

página se emplean las etiquetas, cada una cumpliendo un objetivo específico:

• Títulos: Los títulos se agregan mediante las etiquetas

<h1>,<h2>…<h6> cerrando con </h1>, </h2>… </h6> cada número
correspondiendo a un tamaño de fuente (h1 = título más grande, h6 = título más
pequeño) y el formato mediante el cual se usa es: <h1>Titulo</h1>. Ejemplo:
 • Párrafos: La etiqueta correspondiente a los párrafos es <p> cerrando
con </p> y el formato mediante el cual se usa es: <p>Texto aquí</p>. En HTML se
estructura de la siguiente manera:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales nec
augue vitae luctus. Sed vitae facilisis lacus. Aenean tempor sagittis nisi id ornare.
Etiam ullamcorper pellentesque mi convallis consectetur. Proin at metus vehicula,
condimentum mauris et, porttitor neque. Vivamus elementum dolor vulputate enim
pellentesque euismod. Praesent facilisis, velit ac ultricies sagittis, nisl urna placerat
nisi, id accumsan est nunc a erat. Aenean tellus tellu s, volutpat dignissim imperdiet
sit amet, facilisis nec dui. Aliquam eleifend tellus in ultricies pharetra.</p>

Lo cual se ve de la siguiente manera:

• Línea de Texto: Es empleada para encerrar un texto que solo abarca

una línea, es decir, no crea una nueva línea en la cual estará el texto, su etiqueta
es <span> cerrando con </span> y su formato: <span>Texto aquí</span>. En
HTML se estructura de la siguiente manera:

<p>Etiam ullamcorper pellentesque mi convallis consectetur. Proin at metus

vehicula, condimentum mauris et, porttitor neque. Vivamus <span style="font-
weight: bold;">Esto es una linea de texto que no genera una nueva linea</span>
elementum dolor vulputate enim pellentesque euismod.</p>
 Lo cual se ve de la siguiente manera:

• Listas: En HTML existen dos tipos de listas, las listas ordenadas y las
listas no ordenadas:

1. Listas Ordenadas: Tiene como característica especial que todos los

elementos dentro de la misma estarán enumerados. Su etiqueta es <ol>
cerrando con </ol>, y cada elemento de la lista estará encerrado en la etiqueta
<li> cerrando con </li>. En HTML se estructura de la siguiente manera:
<ol>
<li>Elemento N1</li>
<li>Elemento N2</li>
<li>Elemento N3</li>
</ol>

Lo cual se ve de la siguiente manera:

2. Listas No Ordenadas: Se diferencia de las listas ordenadas en que los

elementos no están enumerados, en este caso vienen seguidos de un a viñeta
que distingue un elemento del otro. <ul> cerrando con </ul>, y al igual que las
listas ordenadas, cada elemento usa la etiqueta <li>. En HTML se estructura
de la siguiente manera:
<ul>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ul>

Lo cual se ve de la siguiente manera:

 • Tablas: Las tablas se manejan mediante 4 etiquetas:

1. < table ></table> Define el inicio y final del contenido de la tabla, esto
quiere decir que todo el contenido que pertenezca a la tabla deberá estar
dentro de esta etiqueta.
2. <tr></tr> Define el inicio y final del contenido de una fila, todo el
contenido que pertenezca a una fila determinada deberá estar dentro de esta
etiqueta.
3. <th></th> Define el inicio y final del contenido del título de una
columna.
4. <td><td> Define el inicio y final del contenido de cada celda de la tabla.

En HTML se estructura de la siguiente manera:

<table>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
<tr>
<td>fila 1:Columna 1</td>
<td>fila 1:Columna 2</td>
<td>fila 1:Columna 3</td>
</tr>
<tr>
<td>fila 2:Columna 1</td>
<td>fila 2:Columna 2</td>
<td>fila 2:Columna 3</td>
</tr>
</table>

Lo cual se ve de la siguiente manera:

 • Formularios: Son empleados para obtener datos ingresados por los
usuarios, Aparte de la etiqueta empleada para definir el contenido del formulario
posee gran cantidad de etiquetas mediante las cuales obtener los datos
ingresados, no obstante, a diferencia de las etiquetas anteriores, las etiquetas de
entrada se diferencian por el atributo de tipo (type) que define si el dato a ingresar
es texto, una selección o un botón, además, son etiquetas que no se cierran:

• <form></form> Define todo el contenido que pertenece al formulario.

• <input type=”text”> Define una entrada de texto de una linea.
• <input type=”radio”> Define un botón radial.
• <input type=”checkbox”> Define una checkbox.
• <input type=”submit”> Define el botón que envía los datos ingresados.

En HTML se estructura de la siguiente manera:

<h2>Entrada de datos</h2>

<form>
<label for="Pnombre">Primer Nombre:</label>
<br>
<input type="text" id="Pnombre" name="Pnombre" value="">
<br>
<label for="Apellido">Apellido:</label>
<br>
<input type="text" id="Apellido" name="Apellido" value="">
<br>
<input type="submit">
</form>

Lo cual se ve de la siguiente manera:

 • Hipervínculos: También llamados enlaces, son los elementos en los
cuales el usuario puede hacer clic para ser llevado a otra parte de la página en
cuestión o para hacer referencia a un sitio web externo. Su etiqueta es <a>
cerrando con </a>, esta etiqueta posee el atributo href, que corresponde a la
dirección del documento o página web a la cual se redirigirá.

En HTML se estructura de la siguiente manera:

<a href="[Link]

Lo cual se ve de la siguiente manera:

• Imágenes: Las imágenes son agregadas al contenido de la página

mediante la etiqueta <img>, la misma posee 2 atributos, src que corresponde a la
dirección de la imagen a mostrar, y alt, que corresponde al nombre que el usuario
verá al pasar el mouse por encima.

En HTML se estructura de la siguiente manera:

<img src="[Link] alt="Manzanas">

Lo cual se ve de la siguiente manera:

CSS

CSS o hojas de estilo en cascada, es un lenguaje que permite gestionar el

diseño y presentación de una página, en otras palabras, la manera en que se ve la
página al momento en que el usuario la visita, además funciona junto con HTML.

CSS o hojas de estilo en cascada, es un lenguaje que permite gestionar los

atributos gráficos de todos los elementos de una página, de esta manera
modificando la manera en la cual la misma se ve, la cantidad de atributos
modificables es notablemente extensa. En resumen, los atributos gráficos de un
elemento que se pueden cambiar constituyen las dimensiones que ocupan, sus
posiciones, propiedades de las fuentes tipográficas, colores, animaciones y la
visibilidad de los elementos, de esta manera proveyendo control total de la
apariencia de la pagina al diseñador UI/UX
Creación y edición de Páginas Web.

El diseño de interfaces web puede ser hecho simplemente con un editor de

texto y un navegador que soporte HTML5, CSS y JavaScript, tales como Google
Chrome, Mozilla Firefox u Opera una ves se tenga este software a la mano se podrá
empezar. ¿Pero como se crea una página web?

Para iniciar, una pagina web consiste de contenido, atributos gráficos y

funcionalidades características de dicha pagina web, así como una serie de
recursos tales como multimedia, entre otros; esto (a excepción de los recursos) se
definen en una serie de documentos con su fijos característicos de cada lenguaje
pertinente para cada tarea: HTML (.html), CSS (.css) y JavaScript (.js), no obstante
todos estos lenguajes pueden estar dentro de un mismo documento “.html”
mediante el uso de las etiquetas <script></ script> para JavaScript y <style></ style
> para CSS.

Una vez aclarado esto, para crear una pagina web simple se necesita un
documento .html, en este caso “será [Link]”, este documento consiste de la
pagina principal de un sitio web, será la primera pagina que encontrará un usuario
al entrar al sitio web. Los documentos HTML tienen un formato especifico necesario
antes de ingresar el contenido, este formato consiste de una serie de elementos
similares a las etiquetas previas, debe iniciar con un declarador de tipo de
documento el cual es <!DOCTYPE html>, seguido de esto, todo el contenido del
documento después del declarador de tipo estará dentro de la etiqueta
<html></html>.

El contenido de un documento html está separado en dos etiquetas

contenedoras:

1. <head></head>: En este contenedor se almacena la información del

documento en sí, además puede contener JavaScript y CSS mediante las
etiquetas mencionadas previamente.
2. <body></body>: Define el contenido del documento, todos los elementos
dentro de este contenedor serán visibles en la página, ya sean títulos,
párrafos, imágenes, enlaces, tablas, listas u otros.

Una vez creado este documento se debe definir el contenido, organizarlo e

ingresarlo al documento empleando los elementos HTML pertinentes para ello, una
vez hecho ello se deben diseñar e implementar los atributos CSS, ya sea que este
incluido en el archivo .html mediante la etiqueta <style> o mediante una referencia
al archivo .css.
Herramientas.

Las herramientas de diseño de interfaces entregan a los diseñadores lo que

necesitan para el prototipado y estructuración de la aplicación web, tomando un
enfoque en la experiencia que se desea que el usuario obtenga con la aplicación
web.

Herramientas de Prototipado
Las herramientas que el diseñador empleará dependen directamente del
método que emplee el mismo para el desarrollo, si el diseñador realiza prototipos
de la aplicación web y diseña el aspecto grafico previamente a su implementación,
las herramientas que emplearía para ello serían aplicaciones de prototipado tales
como Axure, InVision Studio, Sketch u otras.

Editores de Texto
Si el diseñador realiza el prototipado directamente desde los documentos
.html y .css, el mismo empleará editores de texto, tales como Atom, Visual Studio
Code u otros. Estos permiten la utilización de frameworks, así como una
visualización de la pagina mientras se modifican los documentos.

Plantillas
Los diseñadores pueden reciclar diseños previos mediante la utilización de
plantillas, que permiten agregar de manera rápida y sencilla elementos con
características graficas predeterminadas.

Frameworks
Los frameworks en lo que respecta al diseño de interfaces, consisten de
paquetes de documentos para implementar diseños específicos a una pagina web.
En pocas palabras facilitan el desarrollo grafico ya que permiten construir la interfaz
de un sitio mediante bloques, en vez de empezar desde cero. No obstante, también
hay otros frameworks tales como Tailwind CSS, que le permiten al desarrollador
tener mayor control de los bloques con los cuales construirá la interfaz de usuario
con la contraparte que el diseñador deberá invertir tiempo en la configuración y
personalización del frameworks. Entre los frameworks disponibles se tiene
Bootstrap, Semantic UI y el previamente mencionado Tailwind CSS.
 Programación Orientada a la Web
Al hablar de programación orientada a la web, nos referimos a la escritura y
codificado relacionado con el desarrollo de aplicaciones web, servidores y seguridad
de la red. Los lenguajes comúnmente utilizados para esta área son XML, HTML,
JavaScript, Perl y PHP. La programación orientada a la web lleva más que solo
programación, requiere conocimiento de varias disciplinas del área de aplicaciones,
clientes, servidor y tecnología de base de datos.

La programación orientada a la web puede ser dividida en el lado del usuario

(Front-End) y el lado del servidor (Back-End).

Front-End.

La programación del Front-End está directamente relacionado con el acceso

a los datos entregados por el usuario y proveerle información; así como asegurarse
de la verificación de datos y el mantenimiento de un nivel de seguridad apto para el
uso de la aplicación web.

El lenguaje utilizado para implementar esta serie de funcionales que mejoran

la experiencia del usuario en la aplicación web es JavaScript, además que es
soportado por defecto en navegadores web, no obstante, no es el único soportado,
WebAsembly es un formato de instrucciones binarias que permite la utilización de
gran variedad de lenguajes de programación diferentes a JavaScript en el desarrollo
de aplicaciones web, no obstante, no suplanta a JavaScript.

Back-End.

La programación Back-End se enfoca principalmente en el manejo de datos,

seguridad y rendimiento. En el desarrollo Back-End se tiene gran variedad de
herramientas a la mano, tales como PHP, MySQL, Java, [Link] y [Link] que
permite la utilización de JavaScript en el lado del servidor.

JavaScript.

Es el tercer lenguaje de programación más popular del mundo, es un lenguaje

de programación interpretado de alto nivel soportado por navegadores web, es
mayormente conocido por el desarrollo Front-End de paginas web, no obstante
JavaScript no esta limitado a paginas web, todo lo contrario, se pueden hacer
aplicaciones Back-End con [Link], aplicaciones de escritorio con Electron, y
aplicaciones móviles con React-Native.
 Variables
En resumen, las variables no son mas que contenedores de datos para que
un programa realice procesos aritméticos y lógicos. Estos datos que almacenan
pueden ser de tres tipos:

• String: Se refiere a texto, el mismo puede contener caracteres

especiales y alfanuméricos. Ejemplo: x = “Texto”;
• Number: Se refiere a valores numéricos enteros y decimales Ejemplo:
x = 4;
• Boolean: Se refiere a que el valor almacenado solo puede ser
verdadero o falso. Ejemplo: x = true;

A su vez hay 4 maneras de declarar una variable, cada una empleando

palabras clave en específico:

• Var: Es empleado para indicar en JavaScript que se está declarando

una variable. Ejemplo: var x = 4;
• Let: Es empleado para indicar que se está declarando una variable
que puede ser modificada posteriormente. Ejemplo: let x = 4;
• Const: Es empleado para indicar que la variable que se está
declarando es una constante y no podrá ser modificada. Ejemplo: const x = 4;

Operadores
En JavaScript existen una variedad de operadores que se pueden clasificar
en:

• Operadores aritméticos:

Los operadores aritméticos son empleados para realizar operaciones

matemáticas, estos operadores son: suma (+), resta (-), multiplicación (*), división
(/), potenciación (**), modulo (%), incrementa (++), decrece (--).

• Operadores de asignación:

Los operadores de asignación son empleados para asignar valores a

variables:

- Igual ( = ) Ejemplo: x = 5;
- Sumar un igual de ( += ) Ejemplo: x += 5;
 - Restar un igual de ( -= ) Ejemplo: x -= 5;
- Multiplicar por un igual de ( *= ) Ejemplo: x *= 5;
- Dividir entre un igual de ( /= ) Ejemplo: x /= 5;
- El modulo de un igual de ( %= ) Ejemplo: x %= 5;
- Elevado a un igual de ( **= ) Ejemplo: x **= 5;

• Operadores de texto:

Existen dos operadores de texto, tienen funciones de:

- Asignación ( = ) Ejemplo: x = “Texto”;

- Concatenar ( + ) Ejemplo: x+= “Texto”;
- Agregar ( += ) Ejemplo: y = “Esto” + “ ” + “es” + “ ” + “Texto”;

• Operadores comparativos:

Son empleados para comparar dos datos, devuelven verdadero si la

comparación es verdadera, de lo contrario devolverá falso:

- Igual que ( == ) Ejemplo: 5 == 5; Devuelve verdadero.

- Tipo y valores iguales ( === ) Ejemplo: 2 === “hola”; Devuelve falso.
- Desigual ( != ) Ejemplo: 5 != 1; Devuelve verdadero.
- De valor y tipo desigual ( !== ) Ejemplo: 5 !== 5; Devuelve falso.
- Mayor que ( > ) Ejemplo: 5 > 4; Devuelve verdadero.
- Menor que ( < ) Ejemplo: 5 < 4; Devuelve falso.
- Mayor o igual que ( >= ) Ejemplo: 2 >= 2; Devuelve verdadero.
- Menor o igual que ( <= ) Ejemplo: 1 <= 2; Devuelve verdadero.
- Operador ternario: Siendo un tanto mas complejo que los previos, se
divide en tres partes, la primera corresponde a una condición, algo que puede
ser verdadero o falso, para ello se emplean los operadores comparativos
previos; la segunda parte corresponde al valor que se devolverá si la
condición es verdadera, y la tercera al valor que se devolverá si la condición
es falsa. Ejemplo: (x > 2) ? “x es mayor que 2” : “x es menor que 2”;

• Operadores Lógicos: Son empleados para crear condiciones más

complejas:
 - And ( && ): Si la condición previa y la siguiente son verdaderas, se
devolverá verdadero, de cualquier otra manera se devolverá falso.
- Or ( || ): Mientras al menos una de las condiciones sea verdadera, se
devolverá verdadero, si ambas son falsas, se devolverá falso.
- Not ( ! ): Se invertirá el resultado de la siguiente condición, si es
verdadero se devolverá falso y viceversa.

• Operadores binarios: Son empleados para realizar operaciones

binarias con los valores binarios de dos números:

- And ( & ) Ejemplo: 5 & 1 = 0101 & 0001 = 0001 = 1

- Or ( | ) Ejemplo: 5 | 1 = 0101 | 0001 = 0101 = 5
- Not ( ~ ) Ejemplo: ~5 = ~0101 = 1010 = 10
- Xor ( ^ ) Ejemplo: 5 ^ 1 = 0101 ^ 0001 = 0100 = 4
- Mover valores a la izquierda ( << ) Ejemplo: 5 << 1 = 0101 << 1 = 1010 =
10
- Mover valores a la derecha ( >> ) Ejemplo: 5 >> 1 = 0101 >> 1 = 0010 =
2
- Mover valores a la derecha y el bit de signo pasa a positivo ( >>> )
Ejemplo: 5 >>> 1 = 0101 >>> 1 = 0010 = 2

Estructuras de Control
Las estructuras de control son empleadas para realizar diferentes acciones
dependiendo de las condiciones. De esta manera se tiene una serie de estructuras
de control:

• If: Se emplea para especificar que el siguiente bloque de código

(encerrado en llaves “{}”) será ejecutado solo si la condición (encerrada en
paréntesis “()”) es verdadera. Ejemplo:

If (x > 2) {

return “x es mayor que 2”;

Esto nos dice que, si x es mayor que 2 entonces se ejecutará el código, si

no, entonces no se hará nada.
 • Else: Se emplea para indicar que el siguiente bloque de código
(encerrado en llaves “{}”) se ejecu tará en caso que la condición del if anterior sea
falsa. Ejemplo:

If (x > 2) {

return “x es mayor que 2”;

} else {

Return “x es menor que 2”;

Esto nos dice que, si x es mayor que 2 entonces se ejecutará el primer bloque
de código, si no, entonces se ejecutará el segundo bloque de código.

• Else if: Es empleado para indicar que el siguiente bloque de código

(encerrado en llaves “{}”) se ejecutará en caso de que la condición del if anterior
sea falsa y la condición del siguiente if sea verdadera. Ejemplo:

If (x < 0) {

return “x es negativo”;

} else if (x == 0) {

return “x es cero”;

} else {

return “x es positivo”;

Esto nos dice que, si x es menor que 0 entonces se ejecutará el primer bloque
de código, si no es menor que 0 pero es igual que 0, se ejecutará el segundo bloque
de código, y si no es menor ni igual que 0 entonces se ejecutará el tercer bloque de
código.
 • Switch: Es empleado para múltiples bloques de código que a su vez
dependen de múltiples condiciones, se monitorean el valor de una condición
(indicada entre paréntesis “()”) y se compara con los valores de los posibles casos,
si coinciden los valores, se ejecuta el bloque de código correspondiente a dicho
caso, estos se indican dentro del siguiente bloque de código, cada caso debe
empezar con “case:” terminar en “break;” o con “return;”, no obstante, puede
obviarse esto ultimo solo en el caso que se quiera ejecutar el mismo código cuando
dos condiciones diferentes son verdaderas; a su vez se puede emplear el caso
“default:” que indica que él siguiente código se ejecutará cuando el valor de la
condición no coincida con ninguno de los casos previos. Ejemplo:

Switch (x) {

Case 1:

Case 2:

Case 3:

Case 6:

[Link]("x es un divisor de 6");

break;

Case 5:

[Link]("x es 5");

break;

Default:

[Link]("x no es 5 ni un divisor de 6");

Vectores
Los vectores, también conocidos como listas o tablas son variables que
pueden tener más de un valor, son empleados para almacenar varios valores de un
mismo tipo. Son favorables cuando se necesita emplear los valores de un grupo de
variables una después de la otra. Pueden ser lineales (de una fila y múltiples
columnas), bidimensionales (de múltiples filas y columnas) y tridimensionales
(varios grupos de múltiples filas y columnas).

Hay varias maneras de declarar vectores en JavaScript:

• Vector y contenido: La manera mas sencilla de declarar un vector es

declarando una variable de la misma manera que con cualquier otra, pero en vez
de asignar un valor, asignamos varios, poniéndolos uno detrás del otro, separados
por comas entre corchetes “[]”. Ejemplo:

Let nombres = [ “María”, “Juan”, “Pedro”, “Valeria”];

• Vector y contenido por constructor: Otro método para declarar un

vector y definir su contenido es mediante “new Array()”, lo cual indica que la
variable que se está declarando es una lista de variables; y al definir los valores
de la lista, se ponen uno detrás del otro separado por comas, pero esta vez dentro
de los paréntesis de “Array()”. Ejemplo:

Let nombres = new Array(“María”, “Juan”, “Pedro”, “Valeria”);

• Vector vacío: Se puede declarar un vector sin que el mismo contenga

ningún dato, mas adelante en el programa se agregarán valores al mismo. Para
declararlo se emplea “new Array”, pero a diferencia de la manera en que se realizó
previamente, esta vez no se agregará valores al vector. Ejemplo:

Let nombres = new Array();

Los elementos de un vector vienen enumerados, de esta manera permitiendo

el acceso a los valores del vector, hay que tomar en cuenta que la posición del
primer elemento dentro del vector siempre es 0, esto quiere decir que en un vector
que almacena 5 valores, el primer valor está en la posición 0 y el ultimo en la
posición 4. Ejemplo:

En caso que quisiésemos asignar a la variable “x” el valor del vector “y” en la
posición 4, se realiza de la siguiente manera.

Let x = y [4];
 Formularios
Mediante JavaScript se puede verificar que la entrada de datos en un
formulario sea la deseada, de esta manera previniendo que se envíen datos
erróneos al servidor, además de que proveen una experiencia intuitiva al usuario.
Ejemplo:

Dado el caso que queramos verificar la entrada de datos del siguiente

formulario:

Ya que se desea un valor numérico entre 1 y 10, se debe verificar que el valor
ingresado cumpla con estas características, este código se ejecutará al momento
del envío, verificará que los valores sean correctos e imprimirá un texto
correspondiente al modificar un elemento ya presente en el documento HTML.

<h2>JavaScript Validación de Formularios</h2>

<p>Ingrese un numero entre 1 y 10:</p>

<input id="num">

<button type="button" onclick="Vformulario()">Enviar</button>

<p id="Salida"></p>

<script>
function Vformulario () {
let x = [Link]("num").value;
let texto;
if (isNaN(x) || x < 1 || x > 10) {
texto = "Datos inválidos";
} else {
texto = "Datos validos";
}
[Link]("Salida").innerHTML = texto;
}
</script>
 Una vez el usuario envíe la entrada, se ejecutará el código el cual
verificará que no haya caracteres que no sean numéricos, en caso de que
los haya, la salida dirá que la entrada no es válida, en caso de que no los
haya y los valores numéricos estén dentro de los valores indicados, la salida
dirá que es válida

Almacenamiento de información con DB

El proceso de almacenar información en la base de datos de una aplicación
web consiste de una serie de procesos empezando en el Front-End, pasando al
Back-End y regresando al Front-End.

1. El usuario envía la información a través de un formulario, esta

información es enviada a través de los métodos de solicitud HTTP, hay varios
de estos, no obstante, los más conocidos son los métodos POST y GET.
Poseen una serie de diferencias, pero una de las mas notables es que GET es
visible para el usuario a través de la URL, por ello su contenido no debe ser
contraseñas u otro contenido sensible, POST por otra parte es empleado para
contenido sensible ya no es visible para el usuario.
2. En el lado del servidor se procesa la información enviada por el método
de solicitud HTTP empleado y después de este procesamiento se incluye a su
tabla pertinente en la base de datos empleada.
3. El lado del servidor envía la respuesta al Front-End con respecto a los
datos recibidos si es necesario.

Los procesos de lectura y actualización de bases de datos son similares al

recientemente presentado en el sentido que empiezan con una solicitud desde el
Front-End que es enviada al Back-End, se procesa, se realiza la tarea y se informa
al Front-End.

Gestión de archivos
Herramientas Programación Cliente Servidor
Servidores:

Los

Características principales

Estructura básica

Instalación

Conexión y desconexión

Resguardo y recuperación de la información.

Publicación y actualización.
 Bibliografía
No hay ninguna fuente en el documento actual.