miércoles, 1 de marzo de 2023

Diseño web 2.- EDICIÓN: ENGUAJES: HTML, CSS, JAVASCRIPT

Notepad++
Imagen en Wikipedia de Dan Ho bajo licencia Creative Common CCO

Existen multitud de programas destinados a la creación y desarrollo de páginas web...pero: 

EN CLASE:
Cómo son las paginas web por dentro: Botón derecho, "ver página web por dentro".

Vamos a crear nuestra primera página web con el simple bloc de notas pero de la manera más elegante, según las normas del W3C....teclea esto en el bloc de notas

<!DOCTYPE html>
<html>
  <head>
    <title>TÍTULO DE LA PESTAÑA DEL NAVEGADOR</title>
  </head>
  <body>
    <h1>MI PRIMERA PÁGINA</h1>
    <!-- this is a comment -->
  </body>
</html>

guarda tu archivo con extensión .html y abre con el navegador...ENHORABUENA!

Los editores se clasifican en tres categorías...bueno, incluso hasta cuatro:

Editor texto sin formato: son simples editores de texto planos que se limitan a resaltar la sintaxis del lenguaje utilizado (HTML, CSS, JavaScript, XML etc.). El usuario debe desarrollar todo el contenido. Algunos ejemplos son Notepad++, Sublime Text, gedit, Kate y Geany.

Editor de texto con ventanas:
es un editor más avanzado que consta de ventanas y diferentes áreas de trabajo que permiten previsualizar el documento generado. Ejemplos de estos editores son Eclipse, NetBeans, Aptana Studio, WebStorm y Visual Studio Express. 


Editores WYSIWYG : la última categoría de editores son los llamados visuales o del inglés What You See is What You Get, en español ‘Lo que ves es lo que obtienes’. Permiten crear contenido web de forma visual, sin necesidad, en muchos casos de escribir código directamente. Se caracteriza por ser similar a la que se usa cuando se trabaja con un procesador de texto como LibreOffice Writer o Microsoft Word. Algunos ejemplos de este tipo son Kompozer, BlueGriffon o Dreamweaver.

EJERCICIO: Este editor es online, echa un ojo, puedes compararlo con editar entradas en tu blog...seguro que ya te habías dado cuenta de la pestaña "html"! Prueba a cambiar formatos, añadir imágenes, observa cómo va evolucionando el código...¿cuáles son las etiquetas relacionadas con la inserción de imagen?¿y con la inserción de un vínculo?
CÓMO FUNCIONA el tema...
web
Las páginas web se alojan en los denominados <<servidores web>> ordenadores locales o de acceso público en Internet.  El cliente (navegador web) a partir de la URL realiza una conexión con servidores que procesan la petición, tras realizar la búsqueda, se devuelve el código de la página web solicitada. Esta página es interpretada por el navegador mostrándose correctamente al usuario.
En la WWW se sigue la arquitectura cliente-servidor, que determina en qué lado se ejecutan, en cliente o en servidor, los lenguajes de programación que permiten generar la estructura de la página web.
En el lado del servidor:
  • Java, PHP, .NET, Ruby, Python, SQL. 
En el lado del cliente:
  • HTML: lenguaje de marcas de hipertexto esta formado por etiquetas que describen y estructuran el contenido de una página Web. Se considera esencial para el desarrollo de la WWW cuyo desarrollo regula la W3C. Se han estandarizado versiones más estrictas como XHTML pero actualmente se trabaja en HTML5 con numerables mejoras y posibilidades.
  • CSS: hojas de estilo en cascada es un lenguaje desarrollado para definir y crear la presentación (estilo) de un documento estructurado escrito en HTML. La versión actual CSS3 tiene como objetivo la adaptación  a diferentes dispositivos con distinta resoluciones (ordenadores, teléfonos inteligentes, tabletas, etc.) y la inclusión de contenido multimedia ( animaciones, mayores efectos visuales etc.)
  • JavaScript: lenguaje de programación interpretado por el navegador o cliente web. Este lenguaje permite añadir dinamismo a la página modificado su estructura y estilo entre otras cosas. Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web, evitando realizar peticiones al servidor.

No hay comentarios:

Publicar un comentario