Arquitectura cliente-servidor, lenguajes HTML,CSS

 

Noviembre 2022.

La arquitectura cliente servidor, es un estilo de arquitectura diseñado por dos componentes

principales, el proveedor y el consumidor(clientes), entre los que se reparten las tareas a

realizar. El proveedor es el servidor que brinda los servicios o recursos solicitados por el

cliente.



                        Imagen [1] https://reactiveprogramming.io/blog/es/estilos-arquitectonicos/cliente-servidor

 

Este modelo puede existir un servidor y diferente tipo de clientes que se conectan y realizan

las peticiones de los recursos necesarios para funcionar. El cliente se encarga de representar

los datos y realizar las acciones que modifican el estado del servidor; mientras que este a su

vez debe procesar todos los datos de los múltiples clientes.

Su funcionamiento generalmente se da por medio de protocolos TCP/IP, la cual permite

una comunicación entre el servidor y el cliente de manera continua y bidireccional, que

permiten el envío y la recepción de datos entre los mismos.

Este diseño esta fundamentado en que el uno no puede existir sin el otro, es decir, si un

cliente no existe no habría razón de uso de un servidor, a su vez, si no existe un servidor no

es viable la creación y existencia de un cliente al no haber un recurso al cual acceder para la

información requerida por el cliente.

Se considera una arquitectura distribuida al ser creada en diferentes equipos, aunque puede

darse de igual manera la creación en la misma maquina, sin embargo, su diseño es

independiente y su comunicación se realiza a través de la red o internet.

Su estructura a pesar de ser de manera independiente, sin importar las tecnologías

utilizadas para la creación tanto del cliente como del servidor, deberá respetar siempre el

mismo protocolo de comunicación, ya que de no ser así no podría existir la comunicación

entre los dos ni el intercambio de datos entre ellos.

Este es un modelo de software diseñado con el fin de centralizar la información, separando

las acciones y funciones de las partes, en donde el servidor sera el único que tendrá acceso

a los datos y este sera el encargado de entregarlo a los clientes que sean seguros, con el fin

de proteger la información y los datos almacenados.

Por otra parte, el cliente se encarga de hacer las solicitudes al servidor con la información

de datos requerida, ya que es el cliente el que se encarga de hacer visual la información

recibida por el servidor no de procesarla como tal.

Cuando un navegador como, por ejemplo, Chrome, Mozilla, Opera, etc, se conectan a un

servidor como Facebook, Gmail, e-Bay, etc, dichos navegadores actúan como cliente y los

servidores a través de sus bases de datos envían la información solicitada por estos clientes

y se encargan de mostrar los datos al usuario final.

Dentro de la creación de la estructura de la arquitectura cliente-servidor, podemos encontrar

adicionalmente librerías, las cuales contienen modelados DTO (Objetos de Entidad),

interfaces y clases bases, objetos utilizados que permiten compartir la información entre

procesos [2], hecho esto con el fin de no repetir código.

Frente a las etiquetas HTML, podemos encontrar las mas comunes y las mas utilizadas a su

vez, ejemplo de ello las siguientes [3]:

1. <html> (Etiqueta que indica que lo que viene a continuación es un documento

HTML)

• <head> (Etiqueta de apertura de la cabecera)

• </head> (Etiqueta de cierre de la cabecera)

• <body> (Etiqueta de apertura del cuerpo)

• </body> (Etiqueta de cierre del cuerpo)

Otras etiquetas usas comúnmente son [4]:

• <p> (Etiqueta utilizada para crear párrafos)

• <img> (Etiqueta para insertar imágenes en la pagina web)

• <table> (Etiqueta para creación de tablas)

• <ul> <li> (Etiqueta para resaltar palabras o frases en negrita)

Para utilizar las etiquetas en HTML se debe básicamente dar apertura a la etiqueta a utilizar

dentro del símbolo <menor y mayor que> , al finalizar el comando de etiqueta se debe

finalizar al tag del código dentro de la misma estructura solo que se le agrega la barra

inclinada antes de cerrar el símbolo <menor y mayor que/>.

Para la sintaxis de CSS, encontramos los siguientes ejemplos de estructura[5]:

• selectorlist {

 property: value;

 [more property:value; pairs]

}

...where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]

Ver selector, pseudo-elemento, pseudo-clase más abajo.

• strong {

 color: red;

}

div.menu-bar li:hover > ul {

 display: block;

}

El lenguaje CSS sirve para diseñar, definir y crear la presentación de un documento, escrito

en un lenguaje de marcado como HTML. Su definición hojas de estilo en cascada, se

encargan de mostrar gráficamente lo que se quiere mostrar al usuario, mientras que HTML

realiza y crea las bases que conforman una pagina web, CSS se encarga de hacer la parte de

los detalles, por ejemplo, la forma en que se mostrara un tipo de letra, el tamaño, color, etc.

La sintaxis esta compuesta por una propiedad (que es un identificador), nombres o códigos

en lenguaje humano y el valor (características), describe como deben ser manejadas por el

motor del navegador.

Dado que CSS define casi todo el aspecto visual de un sitio web[7], este se escribe en un

único archivo llamado styles.css o style.css en donde todos los archivos HTML tienen un

vinculo hacia el.

El lenguaje siempre contiene un selector, que es el elemento que quiero modificar, y una

declaración, que son las características que le quiero agregar o modificar. Las

declaraciones van encerradas dentro de llaves {} y dentro de ellas se escriben todas las

propiedades con sus valores que modificaran el selector, cuando existen mas de una

propiedad, estas se separan con un punto y coma.

Referencias:

[1] imagen 1, [Blancarte Oscar], https://reactiveprogramming.io/blog/es/estilosarquitectonicos/cliente-servidor

[2] https://es.wikipedia.org/wiki/Objeto_de_transferencia_de_datos

[3] https://webs.um.es/jmz/IntroFisiCompu/Introduccion/Curso_html_CNICE/Materiales/formato1.html

[4] https://websgalicia.es/blog/etiquetas-html/

[5] https://developer.mozilla.org/es/docs/Web/CSS/Reference

[6] https://developer.mozilla.org/es/docs/Web/CSS/Syntax#:~:text=La%20meta%20b%C3%A1sica%20del%20lenguaje,los%20bloques%20b%C3%A1sicos%20de%20construcci%C3%B3n

Comentarios

Entradas populares