Programación Web

6 de Mayo 2021, Jesús Díaz

Programación: Html, Html5, Css, Javascript, Php

Lenguaje de etiquetas (HTML)

Sistemas de codificación estándar
ASCII
Cada carácter se codifica con 7 bits y define a qué valor numérico binario se corresponde cada uno de los caracteres de lengua inglesa.
ASCII expandido trabaja con 8 bits. Incluye caracteres especiales y de otras lenguas.
Aparecieron muchas variedades de ASCII especializadas en un grupo de idiomas concreto:
ISO 8859-1
ISO 8859-2
Surgieron algunos inconvenientes ..
Únicamente se generó por idiomas que utilizan el alfabeto latino.
Cada idioma añade sus caracteres particulares al ASCII expandido.
UNICODE
Intenta sustituir los códigos de caracteres ASCII expandido por un genérico que sirva para todas las lenguas y que permita añadir caracteres no latinos.
Por cada símbolo hay un identificador único universal.
Datos estructuradas
Los datos de texto que debe tratar un programa deben estar estructuradas.
Formado CSV wikipedia / CSV
Ficheros de marcas
Ficheros de texto almacenados con algún código de caracteres estándar (ASCII, UTF-8, etc.)
Se pueden abrir y editar con programas de edición estándar.
Se pueden incorporar metadatos.
Definen la estructura de los datos.

LAS ETIQUETAS
Conjunto de códigos que se incorporan a un fichero de texto con datos para determinar el formato, estructura, visualización, etc de estas.
Es necesario que se diferencie claramente de los datos.
ejemplo:
Características de los lenguajes de marcas:
Basados en texto plano.
Permiten utilizar metadatos mediante las marcas.
Fácil de interpretar y procesar.
Las marcas definen la estructura de los datos.
Fácil de crear y flexibles para representar datos diversos (texto, imágenes vectoriales, fórmulas matemáticas, páginas web, etc.).
De presentación:
Orientados a definir cómo se debe representar la información.
Ejemplo: HTML, WIKI Markup
Descriptivos o semánticos:
Orientados describir la estructura de los datos que contiene.
Ejemplo: XML, JSON
Características de XML:
Permite definir un número infinito de etiquetas.
Permite dar estructura a los datos, sin preocuparse de cómo serán representadas.
Permite el transporte de los datos a diferentes plataformas.
Permite la creación de nuevos lenguajes de marcas.
Es extensible. Permite mezclar diferentes lenguajes de marcas en un mismo documento.

Validación de docs. XML
Validación Les técnicas más popular son:
Documento Type Definition (DTD)
W3C XML Definition Language
Relax NG
Schematron
DTD
Es una descripción de la sintaxis y la estructura de un documento XML.
Se puede incluir dentro del mismo documento XML, y también puede ser un documento externo.
DTD – privada
<! DOCTYPE clase SYSTEM «C: \ dtd \ classe.dtd»>
<! DOCTYPE alumnos SYSTEM «alumnes.dtd»>
<! DOCTYPE clase SYSTEM «http://www.ioc.cat/classe.dtd»>
DTD – pública
Definidas por organismos de estandarización.
En la definición se pone un campo nuevo con el identificador del organismo que lo ha definido.
Identificador del organismo (FPI):
«Símbolo // Nombre del responsable de la DTD // Documento descrito // Idioma»

VALORES POSIBLES
‘-‘ Si el estándar no ha sido aprobado
‘+’ Si ha sido aprobado por un organismo no estándar
Referencia, si ha sido aprobado por un organismo de estándares.
Quién es la organización o la persona responsable de definir el estándar.
documento descrito
Un identificador único del documento.
Idioma
El código ISO del idioma en que está escrito documento.
Ejemplos:
<! DOCTYPE clase PUBLIC «+ // IOC // Clase 1.0 // CA» «http://www.ioc.cat/classe.dtd»>
<! DOCTYPE HTML PUBLIC «- // W3C // DTD HTML 4.01 // EN» «http://www.w3.org/TR/html4/strict.dtd»>
Dispone de una nueva serie de etiquetas que nos permite definir como deberán ser:
Elementos
Atributs
Otros
En un archivo XML el contenido de un elemento puede ser datos u otros elementos.
Tipos de elementos:
EMPTY:
Ningún contenido. Elemento vacío.
#PCDATA:
El contenido pueden ser datos.
ANY:
El contenido puede ser cualquier cosa
Cardinalidad: El número de veces que puede aparecer un determinado contenido. Se utilizan símbolos.
<!ELEMENT persona (nombre, apellido +)>
<!ELEMENT persona (nombre, apellido, apellido?)>
<!ELEMENT persona (nombre, apellido *)>
<!ELEMENT escritor ((libro, fecha) * | artículos +)>

DTD – Atributos
ATTLIST – Tipos de datos
ATTLIST – Atributos
DTD – resumen
DTD – Otros etiquetas
<!ENTITY> Definir referencias a archivos externos que no se deben procesar.
<!Notation> Incluir datos que no sean XML en el documento.
<!INCLUDE> Hacer que partes de la DTD añadan al procesamiento.
<!IGNORE> Hacer que partes de la DTD sean ignoradas por el procesador.
Entidades
Elementos XML que permiten indicar texto.
Hay una serie de caracteres que, cuando se utilizan dentro del contenido de un elemento, provocan confusión en la interpretación del documento:
<,>, /, Etc.
Las entidades son valores predefinidos para XML que sustituyen, dentro del contenido, el carácter corresponden que provoca problemas de interpretación:
<- & lt;
«-% quot;
& – & amp;
> – & gt;
‘- & apos;
Limitaciones
No se basa en el lenguaje XML.
No comprueba tipo de datos
Ni podemos definir restricciones a los datos.
Presenta problemas cuando mezclan etiquetas y #PCDATA.
Sólo acepta expresiones deterministas.
UF 1 – HTML
UF 1 – HTML
En este PPT veremos:
Que es un lenguaje de Marcas
Tipos de lenguajes de Marcas
Introducción HTML
Introducción HTML5
¿Qué es un lenguaje de Marcas?
Es una manera de codificar un documento de texto de manera que por medio de las marcas (el equivalente de los metadatos de los archivos binarios) se incorpora información relativa a cómo se debe representar el texto, sobre qué estructura tienen los datos que contiene, etc.

Características del lenguaje de Marcas:
Se basan en texto plano ? los caracteres pueden estar codificados en ASCII, ISO-8859-1, UF8, etc.
Se pueden usar metadatos ? incorporan información sobre los datos
Fáciles de interpretar y procesar
Fáciles de crear
Flexibles para representar datos muy diversas
Son lenguajes estructurados … tienen una sintaxis, semántica que conocen los usuarios y les permite indicar instrucciones orientadas a determinar acciones y interaccionar con ellos.

Tipos de lenguajes de marcas:
Lenguajes procedimentales (dar instrucciones) y de presentación (definir formato):
Orientados a especificar cómo se debe representar la información.
Ex: HTML, CSS, etc ..
Lenguajes descriptivos o semánticos (Define estructura):
Orientados a describir la estructura de los datos que contiene.

Ex: JSON, XML, etc …
Muchos lenguajes combinan las características de los diferentes tipos.

Que es HTML?
Significado de las letras hipertexto Markup Language
Es un lenguaje de marcas.
Permite presentar información muy diversa teniendo presente la estructura del documento.
Es una recomendación de W3C.
Muchas veces, para crear una página web está la combinación de HTML y CSS (hojas de estilo).

Componentes para estructurar una página web son:
Títulos
Párrafos
Agrupación de contenido
Resaltar el texto
Imágenes
Listas (numeradas, no numeradas y definiciones)
Tablas

Esquema básico de un documento HTML:
<Head> ? Contiene la información del documento
<Body> ? Contiene el contenido y estructura del documento

HTML5
HTML5 es una versión mejorada de HTML.
Las ventajas de HTML5 son:
Permite centralizar el desarrollo de aplicaciones con tecnologías Javascript, HTML y CSS en un solo estándar.
CSS (Cascading Style Sheets) un mecanismo simple para añadir estilo a los documentos.
Javascript lenguaje de programación que nos permite darle dinamismo a la página web.
Elimina etiquetas obsoletas y mejora de algunas etiquetas.
Incluye una etiqueta para dibujos sobre una página web.
Incluye etiquetas para vídeos y audios.
Posibilidad de ejecutar peticiones desconectado.

<Meta> Proporciona información sobre la página web.
Esta etiqueta funciona con la pareja nombre y valor: <meta name = «valor» content = «valor»>
El nombre de las propiedades pueden ser author, description, keywords, description about, keyword used, generator, refresh, content-type, default-style, etc.

Los atributos de meta son:
name Nombre de la propiedad
http-equiv Obtiene un mensaje http de respuesta a la cabecera
scheme Especifica un esquema para interpretar el valor de la propiedad
contento Valor de la propiedad
Enlaces a un documento:
-Los enlaces es el recurso que nos permiten conectar con otro recurso, como por ejemplo una página web.
<a>: es la etiqueta se utiliza para poner un texto al que enlaza a otro recurso.
href: es un atributo que se utiliza para indicar el recurso a enlazar.
target: indica el lugar donde será abierto. Los valores posibles son:
«_Blank»: abre el recurso en una nueva pestaña o ventana.
«_Self»: abre el recurso al mismo lugar el que se ha llamado.
«_Parent»: abre el recurso al marco principal.
«_Top»: abre el recurso al cuerpo completo de la ventana.

Validación de documentos XML.
Introducción
Utilización de los lenguajes de marcas en entornos web
Cascading style sheets (CSS)
Navegadores web.
Asociar una hoja de estilo a un documento
Reglas CSS
Modelo de cajas
Propiedades
Ocultar contenido
Añadir contenido a XML
Validación
HTML / XHTML
HTML
Convertir de HTML a XHTML
Herramientas de diseño web
Definición de esquemas y vocabularios en XML
Validación de documentos XML
Procesadores de XML
Bibliotecas para validar XML
Programas
DTD
Asociar una DTD a un documento XML
Definición de esquemas con DTD
Limitaciones
Ejemplo de creación de una DTD
XML Schema Definition Language
Asociar un esquema a un archivo XML
Definir un archivo de esquema
Ejemplo de creación de un XSD
Conversión entre esquemas