Diseño Web para

Hostelería

HTML y CSS
HTML
PÁRRAFOS <p> titulo de secciones encabezados
La gran mayoría del contenido
Una página se divide en <h1> ostenta la máxima
de una página Web es texto, por
diferentes secciones relevancia y se emplea para los
lo tanto, se debe de tener en
jerárquicas encabezados principales de la
cuenta de que debe estar
HTML permite 6 secciones página
estructurado, la forma más
<h1> <h2> <h3> ...
sencilla de estructurarlo es
separarlo por párrafos.

HTML permite incluir títulos que

delimitan cada una de las formato de texto. básico formato de texto.
secciones. avanzado
<em> <i> resaltar texto, cursiva <abbr> abreviatura
<p> <strong> <b> negrita. <acronym> acrónimos o siglas
es una de las etiquetas más <blockquote> indica que el <dfn> definición o explicación
utilizadas en HTML, define los texto contenido es una cita <span> contenedor genérico
párrafos de un documento, es textual. al que se pueden aplicar
un elemento tipo bloque.
atributos como "id" y "class"
HTML Y ESPACIOS EN BLANCO

El problema de la uni cacion de

espacios en blanco
En HTML, se considera que cualquier espacio en blanco,
tabulador, retorno de carro o salto de línea se trata como
espacios en blanco, a menos que se especi quen de
manera explícita.

Cuando un documento HTML contiene varios espacios

consecutivos en blanco, HTML tiende a ignorarlos y
reemplazarlos por un solo espacio en blanco.

Este comportamiento puede resultar inconveniente si se

desea incluir múltiples saltos de línea o espacios en
blanco
HTML soluciones a los espacios en blanco

Nuevas líneas Espacios en blanco Texto preformateado

Para lograr que el texto continúe en Para incluir múltiples espacios en <pre>
una nueva línea, se utiliza la blanco en el contenido, en HTML Sirve para presentar el texto de
etiqueta <br> en HTML existe manera precisa.
Conserva los espacios en blanco,
Esta etiqueta equivale a presionar "" muestra el texto en un formato de
la tecla "Enter" en el teclado.
Esta entidad debe comenzar con el "ancho fijo"
Su forma completa es "<br></br>". símbolo "&" y finalizar con el ";" para y no ajusta automáticamente la
HTML la abrevia de dos maneras: que funcione correctamente. longitud de las líneas
"<br/>" "<br />"
caracteres especiales

, ñ
mayúsculas
y
minúsculas

<, > y " acentos y el carácter "ñ" algunos ejemplos:

Estos caracteres deben codificarse debido a Pueden generar inconvenientes si la &ntilde, ñ &Ntilde, Ñ
que pueden confundirse con las codificación no corresponde a UTF-8.
etiquetas HTML. &atilde, á &Atilde, Á
Se requiere realizar una codificación de &etilde, é &Etilde, É
Para representar estos caracteres se utilizan estos caracteres al incluirlos en el
entidades HTML. contenido del documento. &itilde, í &Itilde, Í
&otilde, ó &Otilde, Ó
Estas entidades se inician con el símbolo
"&" y finalizan con ";", lo que permite que
&utilde, ú &Utilde, Ú
el navegador las interprete correctamente
sin interferir con el marcado HTML.
Conocimiento de los conceptos básicos del
lenguaje HTML
Consorcio WWW (World Wide HTML5 Elementos del estándar
Web Consortium o W3C)
Organización que se dedica a crear Principales mejoras en esta nueva Las etiquetas semánticas hacen posible
recomendaciones y estándares que versión de HTML5 un contenido mejor estructurado, más útil
promueven el desarrollo a largo plazo de y que puede ser procesado de manera
la World Wide Web. más e ciente.

HTML5 representa la quinta versión Reducción de plugins externos Elementos semánticos: etiquetas que
importante del lenguaje básico de la Posibilidad de crear una estructura de asignan significado a las partes del
www HTML5 define dos variantes de página web más eficiente. documento
sintaxis para el HTML: Un doctype web más corto y sencillo.
La capacidad de editar cualquier Elementos multimedia: Etiquetas
"clásica" conocida como HTML5 elemento de texto directamente en el específicas para el contenido multimedia,
variante XHTML llamada sintaxis navegador como:
XHTML5, que debe servirse con una Mejora en la geolocalización
sintaxis XML. Nuevas funcionalidades, con una <audio> </audio>
Las versiones más antiguas de los interfaz estandarizada. <video> </video>
navegadores no reconocen la La opción de guardar aplicaciones <canvas> </canvas>
nueva versión de HTML web para su uso sin conexión <source> </source>
ESTRUCTURA WEB-Etiquetas de contenido
IMAGEN de la <HEADER>

estructura de una <NAV>

página web en <SECTION> <ASIDE>

HTML5 <ARTICLE>

<ARTICLE>

<ARTICLE>

<FOOTER>

Elementos para estructura Nuevas APIs que aportan características esenciales para el
desarrollo web basado en estándares abiertos
del contenido Nuevos elementos estructurales que proporcionan
características específicas para las páginas web con
HTML5 introduce dos funcionalidades innovadoras una semántica mucho más precisa que la que estaba
disponible en HTML4
Nuevos elementos para formularios
HTML5 simplifica considerablemente el desarrollo de formularios.
Los elementos y atributos introducidos en HTML5 ofrecen un nivel más avanzado de marcado semántico en comparación con
HTML4 y reducen significativamente la labor para programar y diseñar formularios en HTML4.

Se han incorporado dos nuevos métodos que

pueden emplearse en la acción de formularios
(update y delete).

nuevos tipos de entrada y elementos de

formulario

elementos nuevos a veces que incluyen

validaciones específicas para sus datos, lo que
elimina la necesidad de utilizar JavaScript

el elemento "input" ha sido enriquecido

con nuevos atributos que permiten definir su
comportamiento
Modelo de Objetos del Documento (DOM)
Es una interfaz de programación de
aplicaciones (API) diseñada para documentos
HTML y XML.

El DOM está estandarizado por el World Wide Web

Consortium (W3C).

Su función es definir la estructura lógica de estos

documentos y proporcionar un medio para acceder y
manipular su contenido.
Jerarquía DOM. Los objetos de un documento se organizan
en una jerarquía en forma de árbol, los programadores
pueden utilizar esta API para construir documentos, navegar
por su estructura y realizar acciones como agregar, modificar
o eliminar elementos y contenido.
Aplicación de las herramientas necesarias
para la creación web
Herramientas en el proceso de creación web
Editor de Texto o Entorno de Desarrollo Integrado (IDE)
Navegadores Web: Chrome, Mozilla, Firefox, Microso Edge, Safari y Opera
Lenguajes de Programación Web: HTML, CSS y JavaScript
Framework Front-end: Bootstrap, Foundation o Materialize
Herramientas de Diseño Gráfico: Adobe Photoshop, Illustrator,Canva
Sistema de Control de Versiones: Git yplataformas GitHub o GitLab
Servidores Web Locales: XAMPP, WampServer o MAMP
Herramientas de Pruebas y Depuración: DevTools o el Inspector
Gestor de Contenidos (CMS): WordPress, Joomla o Drupal
Herramientas de Optimización: PageSpeed Insights de Google
Servidor de Alojamiento Web: Bluehost, SiteGround, HostGator o AWS
Certificado SSL.
Comprensión de la estructura en HTML
Arquitectura de la
Información
Esta tarea implica la estructuración,
clasi cación y etiquetado de los
contenidos del sitio web
Recuperación de la información
El principal objetivo de una arquitectura de
información adecuada es facilitar a los usuarios
la recuperación de información.
Esto se logra mediante la definición de un diseño
y estructura de índices, clasificaciones,
La arquitectura de la información es la disciplina taxonomías y sistemas de recuperación de
que organiza espacios con el propósito de información o motores de búsqueda en el sitio
ayudar a los usuarios a satisfacer sus web.
necesidades de información. Diseño a nivel conceptual
Las técnicas específicas de la arquitectura de la
información se aplican en las fases de diseño
Regla de oro NADA A MAS DE 3 CLICs conceptual del desarrollo del sitio web.
Manejo de CSS:
CSS (Cascading Style Sheets)
Es un lenguaje de hojas de estilo utilizado para controlar
la presentación y el diseño de documentos HTML y XML
en la web.
A través de reglas CSS se define cómo se verán los elementos HTML :

Definición de Estilos
Separación de Contenido y Presentación: permite separar el
contenido del diseño
Sintaxis de Reglas CSS: las reglas CSS consisten en un selector que
apunta a elementos HTML
Selección de Elementos
Herencia y Cascada
Propiedades y Valores
Medios y Responsividad
Animaciones y Transiciones
Manejo de CSS:

sintaxis y reglas css

Para aplicar la sintaxis CSS, es
necesario utilizar reglas CSS propiedades CSS y CSS3
que incluyan un selector y un
bloque de declaración
Es necesario conocer las principales propiedades
CSS y CSS3 es fundamental para diseñar y dar
Estructuración de las estilo a elementos en una página web.
reglas

Se refiere a la organización y disposición de

las reglas CSS dentro de un archivo de hoja de
Aplicación de la sintaxis estilo o en la sección de estilo de un documento
HTML.

Para aplicar la sintaxis CSS, es necesario utilizar

reglas CSS que incluyan un selector y un bloque de
declaración
Propiedades css y css3
CSS CSS3
color color del texto. border-radius bordes redondeados en elementos.
font- family fuente para el texto. box-shadow sombras a elementos.
font-size tamaño de la fuente. text-shadow sombras al texto.
text-align grosor de la fuente transform transformaciones 2D y 3D
background-color decoraciones transition transiciones suaves de propiedades
margin color de fondo de un elemento.
CSS.
padding espacio exterior alrededor
border espacio interior de un animation animaciones CSS personalizadas.
elemento. gradients gradientes de colores para fondos.
width y height bordes de un elemento. flexbox diseño flexible de elementos en un
display muestra un elemento en el flujo contenedor.
position modelo de posicionamiento grid sistema de diseño de cuadrícula avanzado.
float alineación horizontal media queries estilos específicos para diferentes
z-index apilamiento de elementos tamaños de pantalla
opacity opacidad de un elemento
fin repaso tema 4