Módulo 2: Estructura web: Elementos, Componentes, Símbolos

HTML, CSS y JS

HTML: Contenido y estructura

**Hyper Text**: hace referencia a que un documento HTML puede contener enlaces que redirigen a otros documentos.

**Markup**: Un lenguaje de marcado utiliza etiquetas para decorar el contenido del documento con metadatos.  P.e. una etiqueta <h1> indica al navegador que el texto asociado a la etiqueta es un párrafo, y permite que el navegador pueda renderizarlo adecuadamente.
‍**HTML** es el acrónimo de **Hyper Text Markup Language**. Es un lenguaje de marcado que se utiliza para codificar el contenido de una página web.

CSS: Estilos y presentación

**CSS**: Mientras que HTML se utiliza para definir la estructura y la semántica del contenido, CSS se usa para darle estilo y posicionarlo visualmente. CSS se puede usar, por ejemplo, para cambiar la fuente, el color, el tamaño y el espaciado del contenido, para formar multiples columnas, añadir animaciones y otros elementos decorativos.

JS: Comportamiento

**JavaScript es el lenguaje de programación que debes usar para añadir características interactivas a tu sitio web, (por ejemplo, juegos, eventos que ocurren cuando los botones son presionados o los datos son introducidos en los formularios, efectos de estilo dinámicos, animación, y mucho más). Este artículo te ayudará a comenzar con este lenguaje extraordinario y te dará una idea de qué es posible hacer con él.

HTML, CSS y JS
La web semántica

La web semántica

La web semántica (del inglés semantic web) es un conjunto de actividades desarrolladas en el seno de World Wide Web Consortium con tendencia a la creación de tecnologías para publicar datos legibles por aplicaciones informáticas (máquinas en la terminología de la Web semántica).1​ Se basa en la idea de añadir metadatos semánticos y ontológicos a la World Wide Web.

Esas informaciones adicionales —que describen el contenido, el significado y la relación de los datos— se deben proporcionar de manera formal, para que así sea posible evaluarlas automáticamente por máquinas de procesamiento. El objetivo es mejorar Internet ampliando la interoperabilidad entre los sistemas informáticos usando "agentes inteligentes". Agentes inteligentes son programas en las computadoras que buscan información sin operadores humanos.

El precursor de la idea, Tim Berners-Lee, intentó desde el principio incluir información semántica en su creación, la World Wide Web, pero por diferentes causas no fue posible.2​ Por ese motivo introdujo el concepto de semántica con la intención de recuperar dicha omisión.

CSS Box Model

En CSS, el término "modelo de caja" se usa cuando se habla de diseño y maquetación.El modelo de caja CSS es esencialmente una caja que envuelve cada elemento HTML.

Consiste en: márgenes, bordes, relleno y el contenido real. La siguiente imagen ilustra el modelo de caja:

Explicación de las diferentes partes:
- Content: el contenido del cuadro, donde aparecen el texto y las imágenes.
- Padding: limpia un área alrededor del contenido. El padding es transparente
- Border: un borde que rodea el relleno y el contenido.
- Margin: borra un área fuera del borde. El margen es transparente

El modelo de caja nos permite agregar un borde alrededor de los elementos y definir el espacio entre los elementos.

CSS Box Model

HTML References

Cada vez son más las herramientas de NoCode, combinándolas entre ellas está naciendo un nuevo tipo de profesional, cada uno con su NoCode Stack. Puede ser un profesional del marketing, de diseño, etc.

The Designer

The Designer: Un paseo por la interfaz

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

AZPJ
SDGH
1234

Webflow Key Shortcuts

General keyboard shortcuts

Show shortcut cheatsheet: Shift + /
Save as Snapshot: Shift + Command + S (Mac) or Shift + Control + S (Windows)
Deselect Element/Exit: Esc
Delete Element: Delete
Show Publish Dialog: Shift + P
Show Export Code Dialog: Shift + E
Edit element: Enter

View shortcuts

Preview mode: Shift + Command + P (Mac) or Shift + Control + P (Windows)
Guide overlay: Shift + Command + G (Mac) or Shift + Control + G (Windows)
Show element edges: Shift + Command + E (Mac) or Shift + Control + E (Windows)
X-ray mode: Shift + Command + X (Mac) or Shift + Control + X (Windows)

Left-hand toolbar shortcuts

Show Add panel: A
Show Navigator tab: Z
Show Pages panel: P
Show Symbols panel: Shift + A
Make selected element a Symbol: Command + Shift + A (Mac) or Control + Shift + A (Windows)
Show Asset Manager: J

Right-hand tabs shortcuts

Show Style tab: S
Show Settings tab: D
Show Style Manager tab: G
Show Interactions tab: H

Copy/paste shortcuts

Copy: Command + C (Mac) or Control + C (Windows)
Cut: Command + X (Mac) or Control +X (Windows)
Paste: Command + V (Mac) or Control +V (Windows)
Duplicate: Hold Alt + Drag

Undo/redo shortcuts

Undo: Command + Z (Mac) or Control + Z (Windows)
Redo: Shift + Command + Z (Mac) or Shift + Control + Z (Windows)

Device view shortcuts

Desktop: 1
Tablet: 2
Phone (landscape): 3
Phone (portrait): 4

Style panel shortcuts

Margin / padding (all sides): Hold Shift + Drag
Margin / padding (top + bottom or left + right): Hold Alt + drag
Add class to selected element: Command + Enter (Mac) or Control + Enter (Windows)
Rename Last Class on Selected Element: Command + Shift + Enter (Mac) or Control + Shift + Enter (Windows)

Other shortcuts

Expand/collapse panel sections: Alt + click on section
Select parent / child element: Up arrow / Down arrow
Select sibling element: Left arrow / Right arrow
Select next / previous element: Alt + Left arrow / Right arrow
Toggle Collaborators on selected element: Command + Shift + L (Mac) or Control + Shift + L (Windows)

Find

Quick Find: Command + E (Mac) or Control + E (Windows) / Command + K (Mac) or Control + K (Windows)

Elementos

Section

Utiliza secciones para crear bloques de contenido separados y divida la página en segmentos significativos.

Container

Utiliza contenedores para mantener su contenido centrado y legible.

Grid

Utiliza Grids para layouts y RWD.

Div Block

El elemento más básico y versátil en la construcción de sitios.

Button

Utiliza botones para CTAs, links, Assets, forms, etc.

Link Block

Bloques que linkan totalmente.

List

Para crear listas ordenadas o desordenadas.

Heading

Utiliza Encabezados para guiar a las personas y a los motores de búsqueda a través de su contenido.

Paragrapah

Utiliza el elemento Párrafo para agregar, aplicar estilo y dar formato al texto en línea.

Image

Puede moverlo independientemente de otros elementos. El elemento de imagen es distinto de una imagen de fondo que se establece en otro elemento como una sección o un bloque div.

Video

Puedes subir directamente el vídeo a Webflow o utilizar terceros como YouTube o Vimeo.

Lottie Animation

Cree animaciones en After Effects, expórtalas como archivos Lottie JSON con la extensión bodymovin y anímalas en Webflow.

Forms

Los formularios de webflow son totalmente personalizables.

Componentes

Navbar

Navegación estándar para sitios web.

Lightbox

Utiliza modales para mostrar imágenes, vídeos u otros.

Slider

Configura slideshows, heroes, fichas de producto, reviews, etc.

Maps

Integración de Google Maps en Webflow.

Tabs

Utiliza pestañas de navegación para mostrar contenido de forma rápida.

Social Media

Añade botones de Facebook, Twitter o Instagram.

Site Search

Agrega un campo de búsqueda a tu sitio, personaliza el diseño de su página de resultados de búsqueda y controle el contenido en los resultados de búsqueda.

Symbols

Create

Puedes crear un símbolo para cualquier elemento o grupo de elementos en tu proyecto (salvo para el elemento Body).

Edit

Haz doble click sobre el símbolo y entrarás en el modo de edición.

Rename

Desde el panel de símbolos o editándolo.

Delete

Elimina primero todas las instancias del símbolo, después elimina el símbolo desde el panel de símbolos.

Override

Define qué elementos de un símbolo pueden tener distintos valores.

Unlink

Con el botón derecho sobre el símbolo.

Nested Symbols

Símbolos dentro de otro símbolo.

Webflow symbols