LENGUAJE CLIENTE:
Es aquel que se interpreta en el navegador del cliente.
El servidor le envía el código para reproducir dicha página web, y es el navegador el que interpreta dicho código y el que hace que la página se represente con el formato y diseño deseado.

EJEMPLOS: HTML, XHTML, XML, javascript, css ...
​
LENGUAJE SERVIDOR:
El cliente envía una solicitud y es el servidor el que ejecuta el código y envía al cliente la respuesta, pero con dicha parte de código ejecutada.
El cliente solicita una web que contiene un formulario y dentro de este un desplegable que se tiene que cargar con la información de una base de datos. La conexión a la base de datos y la consulta se ejecuta en sel servidor. Cuando el servidor envía la página web al usuario lo hace con lenguaje HTML.

EJEMPLOS: ASP, PHP, Perl ...
​
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

HERRAMIENTAS PARA LA CONSTRUCCIÓN DE COTENIDOS HTML:

 

• Bloc de Notas (editor texto)

• Notepad++ (editor de código)

• Ultraedit (editor de código)

• Visual Studio Code (editor de código)

• Adobe Dreamweaver (editor WYSIWYG)

• Microsoft Frontpage (editor WYSIWYG)

 

GESTORES DE CONTENIDOS (CMS):

Herramientas para la creación y administración de contenidos, principalmente en páginas web, por parte de los administradores, editores, participantes y demás roles. Consiste en una interfaz que controla una o varias bases de datos donde se aloja el contenido del sitio web. El sistema permite manejar de manera independiente el contenido y el diseño y así es posible manejar el contenido y darles en cualquier momento un diseño distinto al sitio web sin tener que darle formato al contenido de nuevo, además de permitir la fácil y controlada publicación en el sitio a varios editores.

​

Los más usados son:

​

• Joomla!

• Drupal

• Wordpress

​​

NAVEGADORES WEB:

 

• MOSAIC (navegador primigenio)

• NETSCAPE (nuevo estándar de 1994 desarrollado por los creadores de MOSAIC)

• Internet Explorer (dominante del mercado en los años 90 y principios de los 2000)

• Opera

• Google Chrome

• Chromium

• Mozilla Firefox

• Safari

• Tor

• DuckDuckGo

 

Para testear un navegador, si cumple con los estándares web, se pueden realizar varios tests en la web https://www.acidtests.org:

​

• ACID1 fue importante para establecer la interoperabilidad entre principios de base de referencia los navegadores web.

• ACID2 prueba aspectos de marcas HTML, estilo CSS, imágenes PNG y data URIs.

• ACID3 se centra básicamente en Javascript y Webs 2.0.

​​

​

¿QUÉ ES UN LENGUAJE DE MARCAS?:

Una MARCA (o ETIQUETA) es una señal colocada DENTRO de un texto que da unas características especiales a dicho texto, normalmente suelen ir entre los caracteres < y > en HTML.

​

POR TANTO: un Lenguaje de Marcas NO es un lenguaje de programación. La diferencia es que los primeros NO utilizan estructuras de control ni elementos típicos de la programación como variables, arrays, bucles, funciones...

​

En concreto, de HTML podemos decir que es un LENGUAJE DE MAQUETACIÓN. Nos permite poner un texto de forma vistosa y atractiva, con distintos tipos de texto, imágenes, etc, en lugar de un texto plano.

​

Las etiquetas son interpretadas por el navegador y puede que haya ciertas diferencias entre visualizarlas con un navegador u otro. Nos podemos encontrar con que la misma letra puede tener un grosor diferente o un tamaño distinto.

​

En un documento HTML, es importante distinguir entre el contenido y el diseño (colores, tamaños de letras, columnas...). El hecho de que las etiquetas estén intercaladas en el texto puede dar lugar a que se creen documentos muy largos y difíciles de interpretar. Para solucionar esto, se creó CSS, que se denomina LENGUAJE DE ESTILOS, y diferencia entre el  contenido del estilo (color, tipo de letra, color de fondo y de letra, posición en la página, etc).

​​

EVOLUCIÓN DE LOS LENGUAJES DE MARCAS (algo de historia):

Al principio no había estandarización a nivel de código entre las diferentes empresas que se dedicaban al software informático, por lo que el contenido no era versátil ni se podía pasar de una aplicación a otra.

​

• IBM, en los años 70, fue la primera en crear un lenguaje de marcas denominado GML (Generalized Markup Languaje) que introduce etiquetas para diseño de textos, títulos, subtítulos, listas, tablas...

• En 1986 la Organización Internacional de Estándares (ISO) decidió lanzar un lenguaje de marcas para la creación de documentos estandarizados. ISO creó su lenguaje a partir de GML de IBM y lo llamó SGML (Standard Generalized Markup Languaje) en español lenguaje de marcas generalizado estándar. SGML define estructura de un documento genérico, las entidades que lo pueden componer y su jerarquía. SGML realmente no es un lenguaje, si no un "metalenguaje", es decir, un conjunto de normas que permiten crear otros lenguajes de marcas. Por ejemplo, HTML es una versión reducida y simplificada de SQML, que no se popularizó por ser MUY complicado. No se diseño pensando en el usuario medio y las herramientas para la creación de SGML eran caras.

• HTML apareció en los principios de los años 90. El británico TIM BERNERS-LEE, que trabajada en el CERN (Centro Europeo de Investigación Nuclear) de Ginebra, es considerado el PADRE de la web, ya que desarrolló el lenguaje HTML basándose en SGML. La gran revolución que tuvo este lenguaje hizo que surgiera la necesidad de ir creando nuevas versiones y mejoras (como css o javascript).

• Debido a que HTML creció de una manera descontrolada y no cumplió todos los problemas que planteaba la sociedad global de Internet, el organismo W3C (propiedad de TIM BERNERS-LEE) en 1998 empezó con el desarrollo de XML (Extended Markup Languaje). En realidad XML NO es un lenguaje, si no un "metalenguaje", o mas bien una forma de definir lenguajes. XML se está convirtiendo en un ESTÁNDAR para intercambiar información. Se considera una base de datos ligera sin restricciones de las bases de datos relacionales. XML es MÁS estricto que HTML, ya que por ejemplo, hay que escribir todos los elementos en minúsculas, los atributos deben ir siempre entre comillas, hay que cerrar todas las etiquetas, etc.

• El lenguaje XHTML es muy similar a HTML, solo que es MUCHO más estricto. HTML sigue las normas de XML.

• HTML5 en una evolución de HTML. Aporta nuevos elementos de diseño y permite incluir audio y video. También pretende tener una biblioteca de funciones amplia para que el comportamiento sea el mismo independientemente del navegador. Algunos elementos AÚN no son soportados por algunos navegadores.

• Sobre ele Lenguaje de Marcas TeX, no es un lenguaje de programación convencional, sino un lenguaje de marcado declarativo y procedural a la vez, diseñado para describir cómo debe presentarse un texto en una página. Su naturaleza es única: combina conceptos de tipografía, macros, flujo de control y procesamiento de texto en un mismo entorno. TeX puede considerarse un lenguaje de macros tipográficas, cuyo propósito es especificar la estructura y formato de un documento mediante marcas (comandos precedidos por barras invertidas \). A diferencia de lenguajes de marcado puramente estructurales (como HTML o XML), TeX es turing-completo: puede realizar cálculos, condicionales, bucles y definiciones recursivas de macros.

​​

TIPOS DE LENGUAJES:

​

1. LENGUAJES DE MARCAS DE PRESENTACIÓN: Describen el diseño del texto, es decir, la fuente, el tamaño, el color, etc. Este tipo de marcado es útil para maquetar la presentación de un documento para su lectura, pero resulta insuficiente para el procesamiento automático de la información. EJEMPLO: TeX

2. LENGUAJES SEMÁNTICOS: El marcado descriptivo o semántico utiliza etiquetas para describir los fragmentos de texto, pero sin especificar cómo deben ser representados, o en qué orden. EJEMPLOS: SGML, XML

3. LENGUAJES HÍBRIDOS: Una mezcla de los anteriores. EJEMPLOS: HTML y XHTML.

​​

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

​

CONSIDERACIONES PARA CREAR UN SITIO WEB:

​

Organización de Archivos:

Es una buena costumbre realizar un esquema indicando los elementos proncipales de una página web (títulos, párrafos, enlaces, imágenes, etc). Por norma general se crea la carpeta de la web, y dentro de ésta, aquellas subcarpetas para cada tipo de elemento que se vaya a utilizar (imágenes, música, etc).

​

Normas a la hora de nombrar Archivos:

• Utilizar siempre MINÚSCULAS

• NO utilizar caracteres especiales, ni acentos, ni espacios, ni letra "ñ"

• Remplazar los espacios por "_"

• Llamar la página principal "index.html"

​

Direccionamiento ABSOLUTO:

Cuando se usa una URL de internet para referirnos a una página o un recurso de una web:

https://www.mipagina.com/images/pepepardo.png

​

Direccionamiento RELATIVO:

Cuando se usa una RUTA dentro del servidor o directorio en el que se encuentra la página web:

imagenes/pepepardo.png

​

Extensiones de imágenes:

• BMP: Propio de Windows. Poco eficiente, imágenes pesadas.​

• JPEG: Ideal para representar fotografías. Admite 16 millones de colores. Pierde calidad respecto de imágenes originales.

• PNG: Formato de compresión SIN pérdida de calidad, a diferencia de JPEG. También puede representar hasta 16 millones de colores. Admite transparencias, pero no animación. No es adecuado para la compresión de fotografías.

• TIFF: No es adecuado para publicación web, pero sí para almacenar las fotografías con gran calidad.

• GIF: Admite hasta 256 colores, por lo que es más adecuado para iconos, thumbnails, favicon, etc. No apto para fotografías. Acepta transparencia y animación limitada.

• SVG (vectoriales): Imágenes que NO se pixelan al expandirlas. No están compuestas por píxeles, si no por algoritmos que indican que tienen datos y rutas para dibujar la imagen.

​

Extensiones de sonido:

• AIFF: Almacenamiento de audio sin comprimir, muy usado por Apple.

• WAV: Creado por Microsoft. No suele utilizar compresión, muy buena calidad, pero poco apropiado para web. CALIDAD: CD, TAMAÑO: 10MB

• MP3: Formato de compresión con pérdidas muy utilizado. Poco tamaño y relativamente buena calidad. Adecuado para web. Ocupa hasta 10 veces menos que WAV. CALIDAD: CD, TAMAÑO: 1MB.

• OGG: De Código Abierto. Compresión algo superior a MP3. No todos los reproductores pueden reproducirlo. Requiere PLUGINS.

• AU: Formato sin compresión desarrollado por SUN y muy utilizado en GNU/LINUX.

• MIDI: Son instrucciones de ordenador. Ocupan poco, pero si no hay una buena tarjeta de sonido se escuchan con poca calidad.

 

Extensiones de video:

• MPEG-1: Calidad CD

• MPEG-2: Calidad DVD

• MPEG-4: Calidad ALTA

• FLV: Formato de Adobe. Muy usado para los repositorios de videos por internet. Requiere reproductor o plugin de Adobe Flash Player.

• WMV: Formato de Microsoft. Requiere CODECS. CALIDAD: normal.

• MOV: Formados por una o más pistas de audio y video, ofreciendo gran calidad. Formato creado por Apple.

• AVL: Almacena audio y vídeo con distintos CODECS.

• WebM: Formato de Código Abierto desarrollado por Google.

• H.264: Evolución de MPEG-4, con gran compresión y calidad. Ideal para web. Utilizado para HD. Extensión MP4 y AVI.

• OGG: Puede contener información de audio y vídeo.

​

Ley de Propiedad Intelectual:

Otra cosa que tenemos que tener en cuenta cuando escojamos materiales para nuestra web es la autoría del contenido. Tenemos que tener en cuenta que el contenido no tenga derechos registrados, sino que sea de licencia libre para poder utilizarlo. Existen varios sitios web donde podemos obtener recursos libres de derechos. Actualmente también se opta por crear contenido con inteligencia artificial.

​

IMÁGENES LIBRES EN:

www.freepick.es

www.stock.xchng

www.imageafter.com

​

MÚSICA LIBRE EN:

www.jamendo.com

www.musica-libre-de-derechos.es

​

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

​

VERSIONES DE HTML:

​

dsfsdfdsf:

gfdgfdg