# data[].attributes.body
Término muy común que generalmente es usado para hacer referencia a modelos de diseño de páginas web y otras especificaciones. Podríamos decir que son métodos que definen y describen cualidades de la world wide web

# data[].attributes.body
HTML estas siglas quieren decir HyperText Markup Language y su función es definir la estructura de los documentos dentro de un sitio web.

XML el significado de estas siglas es Extensible Markup Language, Este tiene la función de ser una base para un extenso número de tecnologías.

CSS que significa cascading style sheets permite la asignación de estilos para representar documentos.

Javascript, el cual nos permite dar dinamismo y rendimiento dentro de una web.

# data[].attributes.body
Un dominio de internet es un nombre único que identifica a una subárea de Internet. El propósito principal de los nombres de dominio en Internet y del sistema​ de nombres de dominio, es traducir las direcciones IP de cada activo en la red, a términos memorizables y fáciles de encontrar.

# data[].attributes.body
La maquetación wed consiste en transformar el diseño de una web en un conjunto de archivos (html, css y js) para que los navegadores web puedan interpretarlos y reproducirlos correctamente en diferentes dispositivos. La maquetación es una fase avanzada del proceso de desarrollo web.

# data[].attributes.body
El alojamiento web u hospedaje web es el servicio que provee a los usuarios de Internet un espacio de almacenamiento en línea, también conocido como webspace, que permite publicar todo el contenido relacionado con un sitio web.

# data[].attributes.body
Así como los edificios y las casas tienen una dirección postal, las páginas web también tienen direcciones únicas que permiten que los usuarios las localicen. En Internet, estas direcciones se conocen como URL (Localizador uniforme de recursos).

Un LRU o localizador de recursos uniforme ​ es un identificador de recursos uniforme cuyos recursos referidos pueden cambiar, esto es, la dirección puede apuntar a recursos variables en el tiempo.

# data[].attributes.body
Es un espacio virtual que contiene toda la información que una persona o empresa quiere difundir a través de internet.

# data[].attributes.body
El encabezado es una sección del documento que aparece en la margen superior, mientras el pie de página es una sección del documento que aparece en la margen inferior. Generalmente, éstas secciones contienen información como el número de la página, la fecha, el nombre del documento, etc.

# data[].attributes.body
Las tablas pueden presentar información tabulada, es decir, usando filas y columnas. Sin embargo, este uso lo podemos extender a toda la página web y crear una macrotabla que englobe todos los contenidos que se van a mostrar en la página entera. Como las tablas tienen filas y columnas, servirán para crear varias áreas donde se mostrarán los contenidos maquetados como si fuera una revista o un portal.

# data[].attributes.body
Un menú de navegación es una lista organizada que resume la información que un visitante puede encontrar dentro de un sitio web. El menú incluye enlaces a diferentes páginas del mismo sitio, por lo que funciona como un directorio de sus contenidos.

# data[].attributes.attachment_link.readable_text
¿Qué son los estándares web?

Cuando hablamos de estándares web, nos estamos refiriendo a un término muy común que generalmente es usado para hacer referencia a modelos de diseño de páginas web y otras especificaciones. Podríamos decir que son métodos que definen y describen cualidades de la world wide web, aunque queremos que conozcas lo principal, y eso es cuáles son los estándares del diseño web en la actualidad.

En los años más recientes, este término ha sido continuamente afiliado con la tendencia de certificar un grupo de mejores prácticas estandarizadas para elaborar sitios web y a la filosofía del diseño y el desarrollo de las páginas web que también incluyen estos métodos.

Estos términos fueron introducidos para así poder brindarle protección al ecosistema web. De esta manera se puede mantener abierto de manera gratuita y accesible para todo el que lo requiere.

Cuando decidieron introducir los estándares del diseño web, los creadores de navegadores fueron alentados a conectarse a una manera estandarizada de elaborar las cosas. Esto dio resultados en forma de una compatibilidad cruzada cada vez más sencilla para los elaboradores de contenido y ya no existe la necesidad de inventar diversas versiones del mismo sitio web, algo que representa un alivio para cualquier desarrollador de la época.

¿Cuáles son los estándares del diseño web?

Bien, ahora conozcamos cuáles son los estándares del diseño web. La elaboración de un estándar web requiere de un proceso vigilado que trata de diferentes fases que nos afirman la buena calidad de la descripción.

Es un procedimiento que nos permite la mediación de absolutamente todos los usuarios de la web con la finalidad de que ellos mismos puedan hacer un aporte a partir de su conocimiento y opiniones propias para colaborar con la mejora de los documentos.

Detrás de este procedimiento creado por expertos en el área, se obtienen ciertos modelos de excelente calidad, aunque al estar abierto para todo el mundo, las especificaciones se revisan exhaustivamente antes de ser siquiera consideradas como un estándar o una recomendación.
Los siguientes son algunos de los estándares del diseño web que debes conocer:

HTML, estas siglas quieren decir HyperText Markup Language y su función es definir la estructura de los documentos dentro de un sitio web.

XML, el significado de estas siglas es Extensible Markup Language, Este tiene la función de ser una base para un extenso número de tecnologías.

CSS, que significa cascading style sheets permite la asignación de estilos para representar documentos.

Y por último está Javascript, el cual nos permite dar dinamismo y rendimiento dentro de una web.

Razones por las que necesitamos de los estándares del diseño web

Conociendo un poco acerca de cuáles son los estándares del diseño web y por qué fueron introducidos podemos comenzar a explicar las razones por las que necesitamos tener estándares para el diseño web.

Los beneficios de seguir y conocer los estándares del diseño web son:

Te permite mantener la web de manera gratuita y accesible para todos.

Ayuda a reducir el tiempo de mantenimiento y desarrollo.

Te ayuda a tener un código de fuente más sencillo.

Permite compatibilidad y validación hacia atrás con todos los navegadores que se utilizan en la actualidad.

Hacen que la página sea un sitio más accesible para cualquier persona, lo que otorga una gran visibilidad y capacidad de crecimiento.

Permite mantener un excelente SEO (estandarización de motores de búsqueda).

Usos más comunes de los estándares del diseño web

1. Sugerencias para códigos de marcado, como el código de marcas de HTML, código extensible de marcado de HTML, de W3C, entre otros.

2. Sugerencias para las hojas de estilo, principalmente hojas de estilo en forma de cascada (CSS), de W3C.

3. Te ofrece modelos para ECMAScript, especialmente JavaScript, de Ecma nacional.

4. También están las sugerencias para DOMS (Document Object Models), de W3C.

5. Direcciones y nombres para las páginas desarrolladas, correctamente formulados y otros recursos con las referencias de sus URIs, basándose en RFC 2396, de IETF8.

Si quieres volverte un experto en diseño web y conocer a la perfección cuáles son los estándares del diseño web, te recomendamos ingresar en Euroinnova, una Escuela de Negocios especializada en la formación online que tiene los mejores programas educativos para ti. En la misma podrás obtener un título acreditado por excelentes universidades de alcance internacional que te permitirán trabajar al mejor nivel en cualquier lugar en el que te encuentres.

Cursos de Diseño Web

# data[].attributes.attachment_link.title
¿Cuáles son los estándares del diseño web? - Euroinnova

# data[].attributes.attachment_link.description
¿Qué son los estándares web? Cuando hablamos de estándares web, nos estamos refiriendo a un término muy común que generalmente es usado para hacer referencia a modelos de diseño de páginas web y otras especificaciones.

# data[].attributes.body
Call-to-Action (CTA) es cualquier llamada, visual o textual, que lleve al lector o visitante de una página a realizar una acción. Por lo tanto, es una herramienta primordial para promover tus ofertas de Marketing Digital y generar leads

# data[].attributes.body
En la maquetación web exististe la etiqueta <div> que define una división. Esta etiqueta permite agrupar varios elementos de bloque (párrafos, encabezados, listas, tablas, divisiones, etc). En principio, los navegadores no muestran nada especial cuando se crea una división, salvo que se dé formato a la división con la hoja de estilo.

# data[].attributes.body
Es un documento accesible desde cualquier navegador con acceso a internet, y que puede incluir audio, vídeo, texto y sus diferentes combinaciones.

# data[].attributes.body
Las imágenes destacadas se utilizan como miniaturas cuando las páginas o publicaciones de blog se comparten en las redes sociales. Puedes elegir si establecer una imagen destacada en cada página o publicación individual. También tienes la opción de mostrar imágenes destacadas en tu página de listado de blog.

# data[].attributes.body
Las clases o elementos de la lista se muestran uno debajo de otro. Pero por cuestiones de diseño, podemos preferir que se muestren en horizontal, uno al lado del otro. Esto podemos conseguirlo, por ejemplo poniendo los elementos como flotantes.
Podemos personalizar las clases por, el ancho (width) de una lista es del 100% del elemento que la contiene. Su alto (height) depende de la cantidad de elementos que contenga. El ancho de los elementos es del 100% de la lista cuando están en vertical, y ajustado al contenido cuando están en horizontal. El alto, se ajusta siempre al contenido.

# data[].attributes.body
Un buscador de Internet o motor de búsqueda es un servidor informático especializado en la búsqueda de información en la web. Los resultados de búsqueda de una consulta suelen aparecer en forma de lista y pueden consistir en páginas web, imágenes, vídeos y otros formatos

# data[].attributes.body
Un formulario es un documento, físico o digital, elaborado para que un usuario introduzca datos estructurados en las zonas correspondientes, para ser almacenados y procesados posteriormente.

# data[].attributes.body
El menú es un conjunto de enlaces a las distintas partes de nuestro sitio, y lo más habitual es encontrarlo en el html de la página, o en un archivo javascript.

La estructura puede ser cualquiera: podemos hacer un menú con divs, con tablas, etc. Pero lo más común, por ser una estructura sencilla de manejar, es utilizar una lista (<ul></ul>),

# data[].attributes.body
El favicon es el icono o símbolo que acompañará a tu URL en los navegadores. Esta pequeña imagen tiene como función principal ayudarte a identificar más fácilmente una determinada URL.

# data[].attributes.body
Los datos de contacto son conjuntos de datos que contienen información sobre personas relevante para la proyección de la empresa. Estos conjuntos de datos están predominantemente vinculados o relacionados con datos organizacionales o institucionales de las personas

# data[].attributes.body
Una nota al pie es una referencia colocada en la parte inferior de una página o pie de página. Cuando escriba su trabajo de investigación, usaría una nota al pie para citar fuentes de hechos o citaciones. Las notas al pie de página se mencionan en el texto de la misma manera que una citación.

# data[].attributes.body
La estructura HTML de una página web se compone de las etiquetas <html>, que indica el comienzo de la página; <head>, que contiene información más descriptiva sobre el sitio; y <body>, que conforma todos los elementos visibles de la página.

# data[].attributes.body
Los elementos básicos de un sitio web se componen a modo de maqueta para la llamada estructura básica, dicha estructura es lo que hace de un sitio web un espacio organizado e intuitivo para todos en términos generales.

# data[].attributes.body
El texto es el elemento más significativo de cualquier sitio Web porque los usuarios navegan por la Web fundamentalmente en busca de información expresada en hipertexto.

# data[].attributes.body
Todas las etiquetas están constituidas al inicio y al final por los signos < y >, que representan precisamente la apertura y el cierre de cada elemento para que el lenguaje HTML pueda funcionar. En este sentido, existen dos tipos de etiquetas HTML:

Etiquetas emparejadas. Vienen en pares y tienen una apertura y cierre. Tal como las que conoces: < >.

Etiquetas vacías. Se refiere a las etiquetas que no requieren cierre.

# data[].attributes.body
Aunque no debe abusar de las imágenes por el riesgo de aumentar el peso de la página, y por lo tanto, los tiempos de descarga. Las imágenes constituyen un elemento esencial para ofrecer información visual del contenido y mostrar un diseño atractivo y personal.

# data[].attributes.body
Cualquier página web debe contener al menos este código para desarrollarse correctamente. Te explicamos al detalle el significado y contenido de cada etiqueta a continuación.

<!DOCTYPE html>: se utiliza para indicar la versión HTML 5.0 (la usada actualmente).

<html> </html>: es el elemento raíz y es el más importante dentro de la estructura HTML, pues es el que contendrá el resto de las etiquetas de atributos de la página web.

<head> </head>: es la etiqueta principal que incluye metadatos; son atributos que no se muestran al usuario, solo describen referencias de la página, por ejemplo, título o página CSS.

<body> </body>: es la etiqueta para desarrollar todo el cuerpo de la página web y engloba datos desde textos hasta enlaces.

Dentro de la etiqueta <body> se desglosan más etiquetas y elementos como:

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: que representan las etiquetas de títulos.

<p>: sirve para indicar la apertura y cierre de un párrafo.

<div>: significa «división» y funciona para crear secciones o agrupar contenidos.

<span>: su traducción es «abarcar» y sirve para aplicar estilo al texto o agrupar elementos en línea.

<b>, <i>, <u>: para agregar un texto en negritas, cursiva y subrayado, correspondientemente.

<a>: permite agregar un vínculo o enlace.

<img>, <audio>, <video>, <iframe>: dentro de la estructura HTML estas etiquetas sirven para insertar una imagen, audio, video o incrustar un documento HTML.

<form>: funciona para insertar un formulario.

<label>: representa la etiqueta para un elemento en una interfaz de usuario.

<input>: crea controles interactivos para formularios, con el fin de recibir datos del usuario.

Cada etiqueta, debe tener una apertura y un cierre; de lo contrario, el código marcará error y los cambios no se visualizarán correctamente en la página web.

# data[].attributes.body
En la wed un hipervínculo, es una conexión directa entre dos espacios virtuales en el mundo digital. Es la forma más rápida que existe en internet de llegar de un punto a otro, con este viajamos a la velocidad de 1 clic.

Esta conexión es creada a través de tags, que le asignan a dos elementos atributos unidireccionales:

punto de origen o ancla: es el punto de partida, en los textos generalmente están en azul y subrayados;

punto de destino: es aquel que etiquetamos como llegada, El lugar al que queremos dirigir al navegante.

# data[].attributes.attachment_link.readable_text
El 94 % de las primeras impresiones están relacionadas con el diseño de tu sitio web y el 75 % de su credibilidad proviene precisamente de este elemento. Por ello es sumamente importante invertir en su optimización para diferenciarte de tus competidores. Una forma de personalizar tu sitio es a través de la estructura HTML para garantizar que tu contenido se muestre de forma estratégica.

Sin embargo, a pesar de ser un lenguaje de marcado que existe desde la década de 1990, aún quedan muchas dudas sobre su implementación. Y, seamos sinceros, no es un tema que pueda dominarse de la noche a la mañana. No obstante, si conoces la estructura HTML básica es posible formar tu sitio de inicio a fin. Y sí, vale totalmente la pena saber cómo hacerlo.

¿Para qué sirve conocer la estructura HTML?

La estructura HTML hace uso de etiquetas y atributos predefinidos para indicarle al navegador cómo mostrar su contenido; es decir, en qué formato, estilo, tamaño de fuente, imágenes o videos se debe configurar. Básicamente, su función es describir la estructura general de una página y organizar la forma en que los usuarios podrán visualizarla.

Es importante recalcar que el lenguaje HTML no es un lenguaje de programación, sino de marcado. Esto significa que solo sirve para crear páginas web estáticas. Sin embargo, sí es posible combinar este lenguaje con otros para desarrollar sitios mucho más dinámicos y atractivos.

Una vez que conoces las definiciones más relevantes sobre el lenguaje y la estructura HTML, te diremos cómo se integran y te damos un ejemplo para que comprendas mejor su contenido.

¿Qué incluye la estructura HTML?

La estructura HTML de una página web se compone de las etiquetas <html>, que indica el comienzo de la página; <head>, que contiene información más descriptiva sobre el sitio; y <body>, que conforma todos los elementos visibles de la página.

Como puedes notar, todas las etiquetas están constituidas al inicio y al final por los signos < y >, que representan precisamente la apertura y el cierre de cada elemento para que el lenguaje HTML pueda funcionar. En este sentido, existen dos tipos de etiquetas HTML:

Etiquetas emparejadas. Vienen en pares y tienen una apertura y cierre. Tal como las que conoces: < >.

Etiquetas vacías. Se refiere a las etiquetas que no requieren cierre.

En la siguiente imagen te mostramos un ejemplo de cómo se ve una etiqueta básica de HTML con su apertura y cierre:

Los atributos se refieren a toda la propiedad adicional de las etiquetas HTML. Esto significa que definen cualquier elemento de la página web; por ejemplo, ancho, entrada, texto. Estos también ayudan a almacenar información en metaetiquetas con la atribución de nombre, contenido y tipo.

Ejemplo de una estructura HTML básica

Ya que conoces qué incluye la estructura HTML básica, te mostramos de forma más desglosada un ejemplo que te servirá para visualizar mejor los elementos previamente mencionados.

En la imagen siguiente puedes ver cómo se visualiza la estructura básica en lenguaje HTML para formar una página web:

Cualquier página web debe contener al menos este código para desarrollarse correctamente. Te explicamos al detalle el significado y contenido de cada etiqueta a continuación.

<!DOCTYPE html>: se utiliza para indicar la versión HTML 5.0 (la usada actualmente).

<html> </html>: es el elemento raíz y es el más importante dentro de la estructura HTML, pues es el que contendrá el resto de las etiquetas de atributos de la página web.

<head> </head>: es la etiqueta principal que incluye metadatos; son atributos que no se muestran al usuario, solo describen referencias de la página, por ejemplo, título o página CSS.

<body> </body>: es la etiqueta para desarrollar todo el cuerpo de la página web y engloba datos desde textos hasta enlaces.

Dentro de la etiqueta <body> se desglosan más etiquetas y elementos como:

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: que representan las etiquetas de títulos.

<p>: sirve para indicar la apertura y cierre de un párrafo.

<div>: significa "división" y funciona para crear secciones o agrupar contenidos.

<span>: su traducción es "abarcar" y sirve para aplicar estilo al texto o agrupar elementos en línea.

<b>, <i>, <u>: para agregar un texto en negritas, cursiva y subrayado, correspondientemente.

<a>: permite agregar un vínculo o enlace.

<img>, <audio>, <video>, <iframe>: dentro de la estructura HTML estas etiquetas sirven para insertar una imagen, audio, video o incrustar un documento HTML.

<form>: funciona para insertar un formulario.

<label>: representa la etiqueta para un elemento en una interfaz de usuario.

<input>: crea controles interactivos para formularios, con el fin de recibir datos del usuario.

Cada etiqueta, debe tener una apertura y un cierre; de lo contrario, el código marcará error y los cambios no se visualizarán correctamente en la página web.

En la siguiente imagen te compartimos un ejemplo más elaborado de cómo se vería la estructura HTML ya conformada con mayor contenido. Recuerda que esta solo representa elementos muy básicos.

De esta manera puedes estructurar tu página web con tantos elementos y etiquetas que consideres necesarios. Si has cometido algún error en la apertura o cierre de alguna etiqueta podrás darte cuenta al visualizar una página de error, que el navegador se quede en blanco o simplemente al no ver configurado ningún cambio.

Para hacer una estructura HTML es necesario crear un documento HTML con la extensión .html. Hacerlo es más simple de lo que crees, pues solo debes abrir algún desarrollador de texto, como lo puede ser el bloc de notas de tu sistema y comenzar a escribir el texto y las etiquetas necesarias para desarrollar tu página web. También puedes hacer uso de otras herramientas en línea como Tryit Editor de W3Schools.

La estructura HTML puede ser tan extensa como lo necesites. Sin embargo, con los elementos básicos que te compartimos en esta publicación puedes comenzar a explorar y crear algunos aspectos de diseño de tu página web. Si bien, el lenguaje HTML puede ser un poco complejo, con un algo de práctica puedes llegar a dominarlo hasta construir un sitio completo con los atributos y cualidades que deseas.

# data[].attributes.attachment_link.title
¿Cuál es la estructura HTML de una página web?

# data[].attributes.attachment_link.description
El 94 % de las primeras impresiones están relacionadas con el diseño de tu sitio web y el 75 % de su credibilidad proviene precisamente de este elemento. Por ello es sumamente importante invertir en su optimización para diferenciarte de tus competidores.

# data[].attributes.body
El vídeo no solo sirve para enviar un mensaje que capte la atención de los usuarios, sino que también ayuda a mejorar el posicionamiento de nuestra marca y de nuestro sitio web. Conseguir posicionar un vídeo en Google puede ser una buena fuente de visitantes y reportarnos mayor visibilidad.

# data[].attributes.attachment_link.readable_text
Incluir el vídeo marketing en la estrategia de contenidos es una opción cada vez más extendida entre las empresas. Según un estudio de Hubspot, publicado a principios de 2018, el 81% de las marcas ya lo está haciendo.

El vídeo marketing no solo sirve para enviar un mensaje que capte la atención de los usuarios, sino que también ayuda a mejorar el posicionamiento de nuestra marca y de nuestro sitio web. Conseguir posicionar un vídeo en Google puede ser una buena fuente de visitantes y reportarnos mayor visibilidad.

Pero ahora viene la cuestión más importante. Una vez que tengamos nuestro vídeo, ¿cómo lo insertamos en nuestro sitio web?

Insertar vídeo desde Youtube

En primer lugar, si no tenemos muchos conocimientos de diseño web, lo mejor es que acudamos a una plataforma externa como Youtube, que nos permita subir nuestro vídeo de una forma intuitiva. Una vez lo tengamos subido, tan solo tendremos que seguir estos sencillos pasos para insertarlo en nuestra web:

1. Abrimos Youtube y buscamos nuestro vídeo.

2. Debajo del vídeo, habrá un botón para compartir. Lo clicamos.

3. Nos aparecerá una ventana, con los distintos logotipos de las redes sociales. En uno de ellos aparecerá la palabra 'Insertar'. Si clicamos, se nos desplegará el vídeo y a la derecha aparecerá un código parecido a este:<iframe width="560″ height="315″ src="https://www.youtube.com/embed/Ze7Ms449WmY" frameborder="0″ allow="autoplay; encrypted-media" allowfullscreen></iframe>

4. Copiamos y pegamos en nuestro sitio web el código. Podemos modificar el ancho variando la cifra "width" o el alto variando la cifra "height".

Esta es la opción más recomendada, ya que nos permite visualizar el vídeo en HD en cualquier dispositivo y no nos ocupa espacio en nuestro servidor. Además, como Youtube pertenece a Google, es posible que lo tenga más en cuenta a la hora de posicionarlo.

Insertar vídeo por HTML

Sin embargo, si lo que queremos es insertar nuestro vídeo por HTML hay otros aspectos que debemos tener en cuenta.

En primer lugar, debemos considerar el formato del vídeo. Como aún no se ha establecido un estándar único, podemos afirmar que el más extendido y soportado por los dispositivos y navegadores es el formato MP4. Sin embargo, también debemos incluir el vídeo de sustitución en los formatos WEBM u OGG, por si acaso.

También es importante el sistema de codificación del vídeo. Si escogemos la codificación H.264 no deberíamos tener problema para visualizarlo.

El peso del vídeo es otro factor decisivo, ya que si el archivo pesa demasiado puede ralentizar la carga de la página. Es muy importante que el tiempo de carga sea el mínimo posible y para ello, debemos reducirlo al peso máximo que nos permita sin perder calidad.

Reducir tamaño del vídeo

Si quieres modificar el formato o reducir el tamaño del vídeo y no sabes cómo hacerlo puedes utilizar el reproductor VLC. Tan solo tendrás que seguir los siguientes pasos:

1. Abre el VLC.

2. Selecciona Medio > y dale a Convertir

3. Añade el vídeo que quieras reducir de tamaño.

4. Clica el botón de Convertir/Guardar

5. Selecciona el perfil H.264 + MP3 (MP4), o Webm, o OGG.

6. Selecciona la ubicación donde quieres que se guarde y dale a Iniciar.

Una vez que tenemos el vídeo en un formato adecuado, podemos insertarlo en la página web mediante el elemento HTML <video>. El código quedaría así. Solo tendríamos que modificar la ruta y poner la de nuestro vídeo.

<video src="videos/2018/09/videodeprueba.mp4" width="560″ height="315″></video>

Al igual que ocurría en el código de Youtube podemos modificar el ancho variando la cifra "width" o el alto variando la cifra "height".

Insertar diferentes formatos

Para que se nos muestre en el formato más adecuado de los que hemos mencionado anteriormente, deberíamos utilizar la etiqueta vídeo que quedaría de la siguiente forma:

</video>

El mundo del vídeo en HTML es bastante complejo, pero siguiendo estos sencillos pasos no deberíais tener ningún problema en insertar un vídeo en vuestro sitio web y que se visualice correctamente en todos los dispositivos y navegadores.

Asimismo, en Top Position, mediante un sistema propio de análisis de más de ochenta variables y un equipo de expertos en esta disciplina, conseguiremos que el usuario consiga de forma fácil, efectiva y agradable su objetivo.

Para ello, nuestra estrategia se compone de cuatro pilares: una Auditoría UX - Usabilidad Web, un Boceto o Prototipado, la Evaluación del trabajo realizado y la ayuda en la implementación.

# data[].attributes.attachment_link.title
¿Cómo insertar un vídeo en tu web sin morir en el intento?

# data[].attributes.attachment_link.description
Incluir el vídeo marketing en la estrategia de contenidos es una opción cada vez más extendida entre las empresas. Según un estudio de Hubspot, publicado a principios de 2018, el 81% de las marcas ya lo está haciendo.

# data[].attributes.attachment_link.readable_text
Los componentes de una página web son: imágenes, texto, audio, video, animaciones y otros contenidos multimedia interactuando con usuarios de Internet.

El diseño Web Profesional puede ser fascinante.

Crear sitios Web atractivos y profesionales es el sueño de millones de diseñadores de todo el mundo que utilizan las tecnologías de Internet.
Un sitio Web debe ser sobre todo accesible, intuitivo y agradable.
La organización inicial es muy importante para poder utilizar eficazmente las herramientas y tomar decisiones oportunas.

Vamos a iniciar con la concepción del diseño Web, a explicar las estrategias de diseño y a cómo organizar las ideas.

El comprender el proyecto desde ésta etapa, permite un ahorro significativo de recursos en el momento de la implementación.

Las páginas Web

Posiblemente el término página Web sea el más utilizado en Internet, precisamente porque cuando navega por la red lo hace en busca de páginas electrónicas.
Las páginas Web son el soporte de la información en la Web.
Los componentes de una página web son: imágenes, textos y otros contenidos multimedia. Las secciones internas se encuentran enlazadas de manera que el usuario puede navegar de una página a otra utilizando hipervínculos, un concepto de interactividad surgido con el fenómeno Internet.

NOTA:
Las partes que forman a una página Web son conjunto de textos, imágenes, audio, video y otros contenidos.

Los Sitios Web

Un sitio Web es una localización en la Web que contiene varias páginas Web organizadas jerárquicamente.

Cada sitio tiene una página de inicio que corresponde a la página principal, llamada en inglés Home Page.

Es la primera página que se visualiza cuando se accede a un sitio tecleando el nombre del dominio en la barra del navegador.

Un sitio tiene generalmente más de una página Web y su objetivo principal es ofrecer la información que necesitan los usuarios y proporcionársela de manera que puedan asignarla fácilmente.

NOTA:
En ocasiones se utiliza el término página Web para referirse a un sitio Web. Un sitio Web es un conjunto de páginas Web. Las páginas Web constituyen archivos únicos con un nombre asignado.

Elementos que componen una página Web

¿Cómo esta compuesta una página Web?

¿Que información debe tener una página Web?

Las principales características que constituyen una página en Internet son:

Texto

El texto es el elemento más significativo de cualquier sitio Web porque los usuarios navegan por la Web fundamentalmente en busca de información expresada en hipertexto.

NOTA:
Los textos han convertido el inglés en el idioma universal de la red. En su objetivo por alcanzar la mayor audiencia posible, muchos sitios ofrecen su información y sus servicios en su idioma natal y en otros idiomas, fundamentalmente en inglés.

Imágenes

Aunque no debe abusar de las imágenes por el riesgo de aumentar el peso de la página, y por lo tanto, los tiempos de descarga. Las imágenes constituyen un elemento esencial para ofrecer información visual del contenido y mostrar un diseño atractivo y personal.

Espacio Web

Para que nuestro sitio Web sea visible ante todos necesitamos colocarlo en un servidor. Si utilizas CMS, te puede interesar saber cuáles son los mejores hosting para WordPress.

Un nombre de dominio

El nombre de dominio es la primera parte de una dirección Web que identifica al servidor que almacena y sirve su sitio.

Hipervínculos

Por sí misma, una página Web no puede hacer mucho. La magia de verdad comienza cuando relaciona varias página mediante enlaces.

Video

Mientras Internet es cada vez más asequible, confiable y veloz, los programas de edición de video se hacen más cercanos a los usuarios.

Ahora es más fácil realizar un video desde una cámara digital o un teléfono móvil con cámara incorporada y que termine subiendo a la Web para ponerlo al alcance de todos.

Animaciones en Flash

Es una imagen animada, fácil de crear y sobre todo que ocupa poca memoria. Tiene diferentes usos, desde la creación de dibujos animados hasta el despliegue de dibujos interactivos.

Sonidos

Un elemento cada vez más importante. La comercialización de nuevos dispositivos digitales móviles como el iPhone ha potencializado este elemento.

Además de incorporar sonido en la página Web puede descargar de ellas archivos de audio para sus dispositivos móviles.

El formato MP3 es el más conocido y más usado por su calidad y nivel de compresión.

Otros elementos

Otros elementos bastante comunes son:

Banner: Una imagen fija o animada utilizada generalmente para publicidad.

Marcos: También llamados frames, son una especie de recuadro independiente en el que puede cargar una página Web.

De esta forma es posible dividir una página Web en diferentes partes o ventanas, cada una con sus propios bordes y barras de desplazamiento, cargando dentro de cada una de ellas una página web externa independiente.

Los marcos se usaron mucho en un momento determinado, pero además de crear algunos inconvenientes en el diseño, es una opción que no se recomienda ya que los motores de búsqueda no indexan correctamente los sitios realizados con marcos.

Actualmente se pueden obtener los mismos resultados con CSS.

Formulario: Zona para introducir datos o comentarios. Una plantilla o página con espacios vacíos para llenarse con alguna finalidad.

También se utiliza para referirse al conjunto de campos solicitados por un determinado programa, los cuales se almacenan para su manipulación y uso posterior.

El diseño Web

La Web se ha convertido en el medio de comunicación más importante del mundo gracias a su facilidad para ofrecer información con una rapidez nunca antes alcanzada por ningún otro medio.

Esta información puede ser consumida por cualquiera que tenga una conexión a Internet desde cualquier parte del mundo.
El desarrollo Web es una mezcla de tecnología, contenidos, arquitectura del sitio, diseño e interactividad.
El éxito de un sitio depende de la forma en que se combinan estos cinco factores que determinan en gran medida la rapidez con que se genera y ofrece la información, y por supuesto el éxito de un sitio.

Antes de analizar estos factores independientemente, debe considerar que ellos deben garantizar que el sitio sea fácil de mantener, flexible para cambiar de tamaño y realizar actualizaciones y atractivo visualmente para los usuarios, interesante para su audiencia, práctico para realizar descargas rápidas y búsquedas efectivas; también sólidos técnicamente, sin vínculos rotos, ni comportamientos inadecuados.

En el contenido Web influyen la presentación, los conceptos de diseño y algunas estrategias comunes del trabajo en Internet.

Los elementos visuales como el color, el diseño de tipografía y las imágenes, conforman la personalidad de un sitio y generan un impacto emocional que determina que el sitio sea atractivo.

Aunque el objetivo final de todo diseñador sea transmitir un mensaje a una audiencia determinada, ser un buen diseñador gráfico no significa necesariamente ser un buen diseñador para la Web.

Cualquiera independientemente de su nivel artístico, puede conseguir un diseño funcional con buena apariencia.

Un poco de experiencia y conocimiento de algunos principios básicos de diseño más cierto grado de inspiración, originalidad y buen gusto harán que tenga parte de la batalla ganada.
Observe los detalles de su entorno, la naturaleza el arte y sobre todo el trabajo de otros creadores que hay en la Web.
Parece muy elemental, pero muchos olvidan las principales fuentes más asequibles de enriquecimiento estético.

# data[].attributes.attachment_link.keywords[]
crear sitios web atractivos y profesionales

# data[].attributes.attachment_link.title
Elementos básicos de un sitio Web y sus partes

# data[].attributes.attachment_link.description
Los componentes de una página web son: imágenes, texto, audio, video, animaciones y otros contenidos multimedia interactuando con usuarios de Internet

# data[].attributes.body
Atributo face
Dentro del atributo suelen seleccionarse varios tipos de letra separados por comas. En este caso el navegador comprobará que dispone del primer tipo enumerado y si no es así, pasará al segundo y así sucesivamente hasta encontrar un tipo que posea o bien acabar la lista y poner la fuente por defecto.

<font face="Comic Sans MS,arial,verdana">Este texto tiene otra tipografía</font>

# data[].attributes.body
Atributo size

Define el tamaño de la letra. Este tamaño puede ser absoluto o relativo.

Si hablamos en términos absolutos, existen 7 niveles de tamaño distintos numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor size="1" para la letra más pequeña o size="7" para la más grande.

<font size=4>Este texto es más grande</font>

# data[].attributes.body
Atributo color

El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por un número hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes representa la contribución del rojo, verde y azul al color en cuestión.

<font color="red">Este texto está en rojo</font>

# data[].attributes.attachment_link.description
Seguimos aprendiendo etiquetas que nos sirven para formatear el texto. Hasta ahora todos nuestros ejemplos han sido en blanco y negro. Muy aburrido! seguro que estáis deseando dar un poco de color a las páginas, así que en este artículo vamos a comenzar con ello.

# data[].attributes.body
Si queremos modificar los márgenes de una página web deberemos de utilizar cuatro propiedades CSS:

margin-bottom, para establecer el margen inferior.

margin-left, para establecer el margen izquierdo.

margin-right, para establecer el margen derecho.

margin-top, para establecer el margen superior.

Los valores que pueden recibir estas propiedades se pueden establecer mediante un valor absoluto de longitud ya sea en pixels, em, rem,… o bien en porcentajes. Siguiendo la siguiente estructura:

margin-top : <margin-width> | inherit

# data[].attributes.attachment_link.title
Márgenes de una página web - Línea de Código

# data[].attributes.attachment_link.description
Cómo podemos utilizar la propiedad margin en nuestro código CSS para poder establecer los márgenes de una página web.

# data[].attributes.body
position: static

Es el valor predeterminado del atributo y el posicionamiento normal de los elementos en la página. Quiere decir que los elementos se colocarán según el flujo normal del HTML, es decir, según estén escritos en el propio código HTML.

<div style="position: static; background-color: #ff9; padding: 10px; width: 300px;">Esto es una capa con posicionamiento estático</div>
<div style="position: static; background-color: #f9f; padding: 10px; width: 500px;">posicionamiento static, predeterminado.</div>
<h1>CSS</h1>
<div style="background-color: #9ff; padding: 10px; width: 400px;">Posicionamiento static, aunque en este caso no se indicó el atributo position static, pues no hace falta.</div>

# data[].attributes.body
position: absolute

El valor absolute en el atributo position permite posicionar elementos de manera absoluta, esto es de manera definida por valores de los atributos top, left, bottom y right, que indican la distancia con respecto a un punto.

<div style="position: absolute; width: 300px; height: 140px; top: 100px; left: 30px; background-color: #ff8800; color: #fff; padding: 15px;z-index: 2;">
Esta capa tiene posicionamiento absoluto.
<br>
<br>
Me permite especificar top y left para colocarla con respecto a la esquina superior izquierda.
</div>

<div style="position: absolute; width: 820px; height: 30px; padding: 10px; background-color: #ddf; top: 150px; left: 10px; z-index: 1;">Posicionamiento absoluto con z-index menor (la capa aparece por debajo de otras que se superponen con z-index mayor.</div>

<div style="position: absolute; width: 100px; height: 20px; padding: 10px; background-color: #ddf; bottom: 10px; right: 10px;">Posicionamiento absoluto con atributos bottom y right</div>

<h1>Posicionamiento CSS</h1>

# data[].attributes.body
position: relative

El valor relative en el atributo position indica que la capa sí forma parte del flujo normal de elementos de la página, por lo que su posición dependerá del lugar donde esté en el código y el flujo HTML.

<h1>Hola</h1>
<div style="background-color: #606; color:#ffc; padding:10px; text-align: center; width: 300px;">Hola esto es una prueba</div>
<div style="position: relative; width: 300px; padding: 10px; background-color: #066; color:#ffc; top:100px; left: 30px;">capa de posicionamiento relative<br>Se tiene en cuenta esta capa para posicionar las siguientes.</div>
<h2>hola de nuevo!</h2>

# data[].attributes.body
position: fixed

Este atributo sirve para posicionar una capa con posicionamiento absoluto, pero su posición final será siempre fija, es decir, aunque se desplace el documento con las barras de desplazamiento del navegador, siempre aparecerá en la misma posición.

<div style="position: fixed; width: 700px; height: 30px; padding: 10px; background-color: #d0f; top: 150px; left: 10px; z-index: 2;">Posicionamiento fixed</div>
<h1>Hola</h1>
<div style="position: fixed; width: 100px; height: 30px; padding: 10px; background-color: #0df; bottom: 10px; right: 10px; z-index: 4;">Posicionamiento fixed</div>
<br>

# data[].attributes.attachment_link.readable_text
El posicionamiento en CSS se realiza con muchos tipos de atributos. En este artículo te explicamos los distintos valores que puede tener el atributo position de CSS y los casos en los que puedes utilizarlo.

En lo que se conoce como posicionamiento CSS, el atributo de hojas de estilo en cascada que más importancia tiene es el position. Vamos a dedicar todo el presente artículo a explicar los distintos valores de position, para explicarlos y proponer unos ejemplos que esperamos acaben de aclarar los posibles valores que puede tomar.

Recordemos que en el artículo anterior de este manual de CSS ya se introdujo el concepto de posicionamiento CSS y se vio un listado de los atributos existentes hasta CSS 2 para realizar posicionar elementos en la página. Pasemos entonces al tema en cuestión, viendo las posibilidades que nos ofrece este lenguaje. Además, a lo largo de este artículo de DesarrolloWeb.com, vamos a mencionar repetidas veces un concepto que también se explicó anteriormente: el flujo del HTML normal.

position: static

Es el valor predeterminado del atributo y el posicionamiento normal de los elementos en la página. Quiere decir que los elementos se colocarán según el flujo normal del HTML, es decir, según estén escritos en el propio código HTML. Por decirlo de otra manera, static no provoca ningún posicionamiento especial de los elementos y por tanto, los atributos top, left, right y bottom no se tendrán en cuenta.

Podemos ver un ejemplo de posicionamiento static:

<div style="position: static; background-color: #ff9; padding: 10px; width: 300px;">Esto es una capa con posicionamiento estático</div> <div style="position: static; background-color: #f9f; padding: 10px; width: 500px;">posicionamiento static, predeterminado.</div> <h1>CSS</h1> <div style="background-color: #9ff; padding: 10px; width: 400px;">Posicionamiento static, aunque en este caso no se indicó el atributo position static, pues no hace falta.</div>

position: absolute

El valor absolute en el atributo position permite posicionar elementos de manera absoluta, esto es de manera definida por valores de los atributos top, left, bottom y right, que indican la distancia con respecto a un punto. Las capas o elementos con posicionamiento absoluto quedan aparte del flujo normal del HTML, quiere decir esto que no se afectan por el lugar donde aparezcan en el código HTML y tampoco afectan ellas a otros elementos que sí que formen parte del flujo normal del HTML.

Los valores top, left, bottom y right se expresan con unidades CSS y son una distancia con respecto al primer elemento contenedor que tenga un valor de position distinto de static. Si todos los contenedores donde esté la capa posicionada con position absolute (todos sus padres hasta llegar a BODY) son static, simplemente se posiciona con respecto al lado superior de la página, para el caso de top, el inferior para bottom, del lado izquierdo para left o el derecho, en el caso de utilizar right.

Veamos el siguiente código HTML en el que hemos preparado varias capas con position absolute, pero con distintas características:

<div style="position: absolute; width: 300px; height: 140px; top: 100px; left: 30px; background-color: #ff8800; color: #fff; padding: 15px;z-index: 2;"> Esta capa tiene posicionamiento absoluto. <br> <br> Me permite especificar top y left para colocarla con respecto a la esquina superior izquierda. </div> <div style="position: absolute; width: 820px; height: 30px; padding: 10px; background-color: #ddf; top: 150px; left: 10px; z-index: 1;">Posicionamiento absoluto con z-index menor (la capa aparece por debajo de otras que se superponen con z-index mayor.</div> <div style="position: absolute; width: 100px; height: 20px; padding: 10px; background-color: #ddf; bottom: 10px; right: 10px;">Posicionamiento absoluto con atributos bottom y right</div> <h1>Posicionamiento CSS</h1>

La primera capa (llamamos así a los elementos DIV que tienen posicionamiento CSS), tiene como todas las del ejemplo, posicionamiento absoluto. Los atributos top: 100px y left: 30px quieren decir que se posiciona a 100 píxeles de la parte superior de la página y a 30 píxeles de la izquerda. En este caso las distancias top y left para ubicar la capa con position absolute son relativas a la esquina superior izquierda del área disponible del navegador, pues esta capa no está dentro de ninguna otra con posicionamiento distinto de static. Cabe llamar la atención en esta primera capa también sobre el atributo z-index: 2, que servirá para indicarle al navegador la posición de la capa, en la tercera dimensión, con respecto a otras que se puedan superponer, para que sepa cuál tiene que estar debajo y cuál arriba.

La segunda capa podemos ver que tiene un z-index: 1. Eso quiere decir, que en caso se posicione en el mismo lugar se ocultará por la capa primera, que tiene un z-index mayor.

En la tercera capa hemos probado el posicionamiento utilizando los atributos bottom y right, así que la estamos posicionando con respecto a la esquina inferior derecha.

Veamos un segundo ejemplo donde vamos a colocar una capa con posicionamiento absoluto y dentro varias capas también posicionadas con absolute.

<div style="position: absolute; top: 100px; left: 200px; background-color: #ff9966; width: 400px; height: 100px;"> <div style="position: absolute; top: 10px; left:10px;"> Uno </div> <div style="position: absolute; top: 10px; left:100px;"> Dos </div> <div style="position: absolute; top: 10px; left:200px;"> Tres </div> </div>

En este caso la primera capa, que no está dentro de ninguna otra, se posiciona con top y left con respecto a la esquina superior izquierda del espacio disponible en el navegador para el cuerpo de la página. Las capas anidadas están también con position: absolute, pero al estar dentro de otra capa que tiene posicionamiento distinto de static, sus valores top y left son relativos a la esquina superior izquierda de la capa que las contiene.

position: relative

El valor relative en el atributo position indica que la capa sí forma parte del flujo normal de elementos de la página, por lo que su posición dependerá del lugar donde esté en el código y el flujo HTML. Además, las capas con posicionamiento relative, admiten los valores top y left para definir la distancia a la que se colocan con respecto al punto donde esté en ese momento el flujo normal del HTML. Como afectan al mencionado flujo del HTML, los elementos colocados después de las capas relative, tendrán en cuenta sus dimensiones para continuar el flujo y saber dónde colocarse. Sin embargo, no se tendrá en cuenta los top y left configurados.

Veamos un ejemplo que quizás aclare las cosas.

<h1>Hola</h1> <div style="background-color: #606; color:#ffc; padding:10px; text-align: center; width: 300px;">Hola esto es una prueba</div> <div style="position: relative; width: 300px; padding: 10px; background-color: #066; color:#ffc; top:100px; left: 30px;">capa de posicionamiento relative<br>Se tiene en cuenta esta capa para posicionar las siguientes.</div> <h2>hola de nuevo!</h2>

Las etiquetas H1 y H2 respetan el flujo HTML y también tenemos un elemento DIV donde no se ha especificado nada en position, luego es static y por tanto también es afectada por el flujo. Hay una capa relative, en el segundo elemento DIV, que también se posiciona con respecto al flujo normal. Como tiene un top y left, aparece un poco desplazada del lugar que le tocaría con respecto al flujo.

El último H2 que aparece se coloca teniendo en cuenta al flujo y tiene en cuenta la capa relative, por eso deja un espacio en blanco arriba, pero no atiende a la posición real de ésta, que se marcó con los atributos top y left.

position: fixed

Este atributo sirve para posicionar una capa con posicionamiento absoluto, pero su posición final será siempre fija, es decir, aunque se desplace el documento con las barras de desplazamiento del navegador, siempre aparecerá en la misma posición.

El lugar donde se "anclará" la capa siempre es relativo al cuerpo (el espacio disponible del navegador para la página). Si utilizamos top y left, estaremos marcando su posición con respecto a la esquina superior izquierda y si utilizamos bottom y right su posición será relativa a la esquina inferior derecha.

Veamos un ejemplo.

<div style="position: fixed; width: 300px; height: 140px; top: 100px; left: 30px; background-color: #ff8800; color: #fff; padding: 15px;z-index: 1;"> Esta capa tiene posicionamiento fixed. <br> <br> Me permite especificar top y left para colocarla con respecto a la esquina superior izquierda. </div> <div style="position: fixed; width: 700px; height: 30px; padding: 10px; background-color: #d0f; top: 150px; left: 10px; z-index: 2;">Posicionamiento fixed</div> <h1>Hola</h1> <div style="position: fixed; width: 100px; height: 30px; padding: 10px; background-color: #0df; bottom: 10px; right: 10px; z-index: 4;">Posicionamiento fixed</div> <br> <br> <br> <br> Pongo texto para que se vea!! <br> <br> <br> Esto hace desplazamiento, con tanto br <br> <br> ... <br>

Se puede ver que hay varias capas con position: fixed y un montón de BR para que la página pueda tener un desplazamiento. Si vemos la página en marcha y hacemos scroll hacia abajo con la barra de desplazamiento, veremos que las capas fixed siempre mantienen la misma posición.

Doctype para el atributo fixed

El siguiente punto no tiene relevancia en el momento actual, ya que los navegadores han avanzado mucho y no hay problemas de soporte en el atributo position "fixed". Además el doctype cambió su definición con HTML5. Puedes encontrar más información en esta FAQ sobre el doctype de HTLM5 y en el artículo Documento básico HTML5.

El valor fixed en el atributo position funciona en todos los navegadores, pero en el caso de Internet Explorer sólo funciona en la versión 7 y superiores. Además, para que funcione en Explorer tiene que declararse un DOCTYPE!. Servirían varios tipos de DOCTYPE!, sin embargo debería declararse con el formato completo. Algo así como:

O por poner otro ejemplo:

position: inherit

El valor inherit indica que el valor de position tiene que heredarse del elemento padre. No funciona en Explorer, al menos hasta la versión 8. Tiene en verdad poca utilidad y además, como no funciona en el navegador más utilizado en la actualidad, tiene aun menos sentido usarlo. Por ello, no ponemos ejemplos.

Conclusión sobre el atributo position de CSS

Esperemos que con las anteriores explicaciones y ejemplos se hayan podido entender bien las distintas posibilidades del atributo position, que es sin duda clave para el posicionamiento CSS. Lo más común para la maquetación web es utilizar el posicionamiento static, pero el posicionamiento absoluto, junto con el posicionamiento fixed, e incluso relative, pueden ser muy útiles para diseños más complejos, donde se requiera una mayor precisión en la colocación de los distintos elementos o las capas.

Además, para hacer efectos Javascript y DHTML en general, se utilizan frecuentemente posicionamientos absolutos. Son muy útiles porque permite que los elementos dinámicos no formen parte del flujo normal del HTML, y por tanto, podemos situarlos en cualquier lugar el área disponible del navegador, e incluso moverlos dinámicamente al cambiar sus propiedades top y left mediante scripts en el lado del cliente. Todos estos comportamientos dinámicos quedan ya fuera de la temática de este texto, aunque los explicamos con detalle en distintos manuales de la sección Javascript a Fondo, de DesarrolloWeb.com.

# data[].attributes.attachment_link.title
Tipos de posicionamiento con el atributo position de CSS

# data[].attributes.attachment_link.description
El posicionamiento en CSS se realiza con muchos tipos de atributos. En este artículo te explicamos los distintos valores que puede tener el atributo position de CSS y los casos en los que puedes utilizarlo. En lo que se conoce como posicionamiento CSS, el atributo de hojas de estilo en cascada que más importancia tiene es el position.