# data[].attributes.headline
¿Cuáles son las etiquetas básicas para crear la estructura de una página web?

# data[].attributes.subject
¿Cuáles son las etiquetas básicas para crear la estructura de una página web?

# data[].attributes.body
Etiquetas básicas de HTML

<html>: indica el comienzo del documento HTML.

<head>: indica que empieza la cabecera de la página. En ella se suele poner el título (<title>) de la web, una descripción y otras informaciones relacionadas con el contenido de la página.

<body>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web. En el body van los textos, las imágenes y todos los contenidos de la web.

<h1>, <h2>, etc.: son los títulos o encabezados. Se utilizan para establecer determinados textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores.

<a>: define los enlaces.

<table>: es una tabla, y dentro de esta tenemos filas <tr> y celdas <td>.

<p>: el texto dentro de esta etiqueta forma un párrafo.

<img>: imágenes.

<ul>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso de <li> definimos cada guión dentro de la lista, y usando <ol> en lugar de <ul> tendremos listas ordenadas.

<b> y <strong>: se utilizan para resaltar el texto.

<u>: texto subrayado.

<i> y <em>: texto en cursiva

# data[].attributes.attachment_link.readable_text
Resumen: No te pierdas nuestra guía sobre los fundamentos de HTML, aprendiendo a utilizar las etiquetas y elementos de este lenguaje de creación de páginas web.

HTML se basa en principalmente en etiquetas, que son como instrucciones para dar formato a las diferentes partes de una página web.

Para toda persona interesada en crear páginas web es importante conocer al menos nociones básicas de este lenguaje, de esta forma podemos comprender como están hechas las web, desarrollar sitios con más flexibilidad y mejor construidos.

Por ejemplo, mediante el uso de las etiquetas HTML puedes subrayar textos, ponerlos en negrita, establecer encabezados, estructurar el texto en guiones, en párrafos, añadir imágenes y vínculos a otras páginas, etc. De ahí que el conocimiento de estas etiquetas sea importante para hacer páginas web, mejor dicho imprescindible.

Etiquetas básicas de HTML

<html>: indica el comienzo del documento HTML.

<head>: indica que empieza la cabecera de la página. En ella se suele poner el título (<title>) de la web, una descripción y otras informaciones relacionadas con el contenido de la página.

<body>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web. En el body van los textos, las imágenes y todos los contenidos de la web.

<h1>, <h2>, etc.: son los títulos o encabezados. Se utilizan para establecer determinados textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores.

<a>: define los enlaces.

<table>: es una tabla, y dentro de esta tenemos filas <tr> y celdas <td>.

<p>: el texto dentro de esta etiqueta forma un párrafo.

<img>: imágenes.

<ul>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso de <li> definimos cada guión dentro de la lista, y usando <ol> en lugar de <ul> tendremos listas ordenadas.

<b> y <strong>: se utilizan para resaltar el texto.

<u>: texto subrayado.

Ejemplo de página básica

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>Título de la página</title> </head> <body> <h1>Encabezado de la página</h1> <h2>Encabezado de menor tamaño</h2> <p>Este es el texto de un párrafo.</p> <p>Este es el texto de otro párrafo. Dentro de este párrafo, pueden ir palabras <strong>en negrita</strong>, <em>en cursiva</em> o lo que quieras.</p> <p>También podemos poner listas como la siguiente:</p> <ul> <li>Guión número uno.</li> <li>Guión número dos.</li> <li>Guión número tres.</li> </ul> </body> </html>

Y para que lo entiendas mejor, una página básica con su correspondiente código HTML:

En la parte superior del código siempre debemos tener una declaración para definir el tipo de documento que estamos por desplegar, el doctype.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Es muy común olvidar dar un Doctype a nuestros sitios, ya que al ser un factor técnico es fácil de omitir, además sin un Doctype definido nuestra web sigue funcionando.

Entonces, ¿por qué ponerlo? porque si no lo haces el navegador no va a saber qué lenguaje estás utilizado y es muy probable que interprete mal algunos usos, lo que va a provocar errores en tu página y que no se visualice de manera correcta.

Aquí mostramos ciertos tipos de Doctype:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Después de definir el tipo de documento empieza la codificación del contenido.

En primer lugar utilizamos el elemento "html" para indicar el inicio de nuestra página web. Es considerado el elemento raíz.

Es necesario especificar el idioma principal en el que escribiremos. Para eso usamos el atributo "xml:lang" en elemento "html". Su valor estará representado por la abreviación del idioma que escogimos, si por ejemplo el idioma principal de nuestra página es el Español, entonces el valor que recibirá el atributo será "es", mientras que si es el inglés utilizaremos "en".

Después, dentro del elemento "html", habrá otros dos que llevarán por nombre "head" y "body".

El primer elemento contenido dentro de la etiqueta "html" es la llamada cabecera, identificada por la etiqueta "head" y que se encarga de contener información relativa al documento, tal es el caso de la etiqueta "title" que se coloca dentro de la cabecera para mostrar el título de la página que se mostrará en la barra superior de la ventana del navegador.

Después de tener bien definida la estructura de "head", pasamos a declarar al elemento "body" el cual tendrá como función mostrar todo el contenido que es visible por el usuario. Por ello dentro de él se pueden usar la mayoría de las etiquetas con las que cuenta XHTML.

Normas elementales en HTML

Siempre que sea posible, incluye las etiquetas de cierre, incluso si no son obligatorias, ya que esto hace que sea más fácil seguir tu propio marcado y que sea más rápido de leer. Además, en XHTML todas las etiquetas deben cerrarse, por lo que te será más fácil si cambias de uno a otro.

Ejemplo:

Con frecuencia verás diseños HTML con código indentado como el que se muestra a continuación, es decir, código tabulado con sangrías, de forma que los bloque de texto se mueven hacia la derecha insertando espacios para separarlos del texto adyacente que forme otras estructuras diferentes.

Esto hace que sea más fácil leerlo y comprobar qué etiquetas de cierre se refieren a qué etiquetas. Por ejemplo, esto es claramente erróneo:

 <p> <strong> texto en negrita <em>texto en negrita y cursiva texto sólo en cursiva </em> </p>

Sin embargo, esto es válido:

 <p> <strong> texto en negrita <em> texto en negrita y cursiva </em> </strong> <em> texto solo en cursiva </em> </p>

Etiquetas, elementos y atributos HTML

Ya hemos visto lo que es una etiqueta en HTML, y que hay etiquetas de apertura y (en la mayoría de los casos) etiquetas de cierre. El navegador lee estas etiquetas y crea una representación interna de lo que leyó.

Esta representación interna se conoce como un elemento. Entonces, el navegador "decide" cómo mostrar el elemento en la pantalla. Además, no todos los elementos se muestran en pantalla (como el HEAD),y por el contrario algunos elementos siempre existen, incluso si no los creaste en tu código fuente (como el HTML, HEAD o BODY).

Algunos elementos aceptan parámetros adicionales. Por ejemplo, el elemento A puede aceptar el parámetro HREF, que lo convierte en un enlace. Estos parámetros son conocidos como atributos, y se crean así:

 <a href="nombre-de-archivo.html">Texto del enlace</a>

Ten en cuenta que en HTML, las etiquetas y nombres de atributos se puede escribir en cualquier circunstancia.

Algunos diseñadores web tienden a utilizar mayúsculas para destacarlos en el código fuente, otros escriben todo en minúsculas para hacerlos más fáciles de traducir a XHTML más tarde si es necesario.

Mi consejo es que adoptes esta segunda opción, lo lógico es con el tiempo acabar creando páginas en XHTML. De todas maneras, cualquiera de las dos formas es correcta en HTML.

Sintaxis de XHTML

HTML tiene una sintaxis muy sencilla y fácil de comprender, el contenido está estructurado en elementos, los cuales son declarados mediante el uso de etiquetas que proporcionan información adicional através de atributos.

Por su parte XHTML es una versión mejorada de HTML, por lo que busca tener una sintaxis más estricta que las versiones anteriores de este lenguaje de marcado y tiene menos tolerancia ante errores de mal uso de etiquetas.

Si seguimos una correcta codificación no tendremos ningún problema y obtendremos todos los beneficios del lenguaje.

La regla básica para la estructuración de xHTML es saber utilizar de manera correcta cada parte de un elemento, tener conocimiento de la función que cumple cada pedazo de código y qué clase de contenido albergará.

Tomemos la siguiente línea para explicar esto:

Lo que tenemos aquí es un elemento de anclaje que se encarga de definir un enlace hacia una dirección. Esta línea de código está compuesta por varias partes, una etiqueta de apertura definida por:

La cual tiene la función de iniciar el elemento, una etiqueta de clausura:

Cuya función es terminar dicho elemento, un atributo "href" que se encarga de establecer una propiedad que en este caso es un link hacia la dirección que especificamos con la cadena "https://www.lawebera.es", que se convierte en el valor del atributo, y finalmente tenemos "La Webera" que es a lo que llamaremos el contenido del elemento.

Reglas para manejar etiquetas

Existen reglas simples de seguir diseñadas para tener un manejo correcto de etiquetas con XHTML.

Debemos recordar que xHTML no es muy distinto a su predecesor, por lo que no tenemos que olvidarnos de lo que ya sabemos, simplemente tenemos que omitir las malas prácticas a las que el HTML no estricto nos acostumbró.

En primer lugar tenemos que definir que XHTML requiere que todas las etiquetas y atributos sean escritos en minúsculas, por ejemplo si queremos declarar un elemento de tipo párrafo tenemos que escribir su etiqueta de la siguiente manera:

Ya que si escribimos:

No cumple con esta regla y por lo tanto no puede ser considerado un correcto código XHTML.

El segundo aspecto a considerar es que todas las etiquetas deben cerrarse, es decir deben tener una contraparte compuesta por una diagonal antepuesta al nombre de la etiqueta, siguiendo con el ejemplo del párrafo, una vez que introducimos el contenido debemos cerrar la etiqueta de la siguiente manera:

Existen excepciones donde un elemento no tiene contenido, tal es el caso de los saltos de línea "br" o algunos elementos de formulario como los "input".

En estas situaciones no hay que incluir una etiqueta de cierra explícita, pero si se debe de agregar la diagonal al final de la etiqueta de apertura de la siguiente manera:

La tercera regla nos indica que todos los atributos que agreguemos a un elemento deben de tener siempre un valor y estos deben de ir entre comillas, por lo que quedaría una línea como esta:

En cuarto lugar tenemos que los elementos deben estar correctamente anidados, es decir que los elementos incluidos dentro de otros se cierren correctamente antes de cerrar el elemento padre. Podemos tener líneas como esta:

 <p><a href="https://www.lawebera.es">La webera es un sitio genial</a></p>

En este caso tenemos que cerrar primero el anclaje y después el párrafo pues de esta manera respetamos la anidación y la jerarquía de elementos.

Atributos XHTML de uso común

Existe un grupo de atributos que se pueden utilizar en la gran mayoría de las etiquetas, éstos son catalogados como de uso común y se pueden especificar aún más en base a su función, por lo que encontraremos atributos básicos, de internacionalización y de eventos.

Atributos XHTML básicos

Los atributos básicos son aquellos que usamos prácticamente en todos lados para rastrear y reconocer elementos, nos referimos a "class", "id" y "title", incluso "style" puede caer dentro de esta categoría aunque preferimos mantener al margen dicho atributo ya que las hojas de estilo cumplen mejor con esa función.

Los identificadores están relacionados con el atributo "id" y se utilizan para dar una asociación única al elemento, lo que permitirá manipularlo ya sea con JavaScript o CSS.

Como ya se dijo, es único, por lo que no se debe repetir en otro elemento, en caso de que queramos agrupar distintos elementos con una misma asociación entonces tendremos que usar una clase.

Aquí tenemos un ejemplo de como utilizar identificadores para cada elemento de una lista:

 <ul id="ciudades"> <li id="vlc">Valencia</li> <li id="gdl">Guadalajara</li> <li id="blb">Bilbao</li> </ul>

Gracias a estos identificadores podemos en un futuro localizar cada elemento de la lista sin necesidad de recorrerla.

Las clases por su parte están relacionadas con el atributo "class", y nos sirven para cuando hay más de un elemento que necesita una asociación.

Si usamos el ejemplo de la lista, podemos agregar una clase que sirva para asociar todos los elementos a los que les agregamos un identificador.

 <ul id="ciudades"> <li class="spain" id="vlc">Valencia</li> <li class="spain" id="gdl">Guadalajara</li> <li class="spain" id="blb">Bilbao</li> </ul>

Lo que hicimos en el ejemplo es abarcar todos los componentes de la lista con una sola clase a la que llamamos "spain", ya que todas las ciudades listadas pertenecen a este país.

Por su parte, "title" se encarga de añadir un título a un elemento, es quizás menos utilizado que los dos anteriores atributos pero aún así es importante ya que nos da una idea muy general de lo que contiene el elemento.

Este atributo tiene la ventaja de ser identificado por los lectores de pantalla y motores de búsqueda por lo que ayuda a mejorar la accesibilidad a la información.

Atributos XHTML de internacionalización

También existen atributos que son utilizados para atender asuntos de internacionalización, es decir el lenguaje que estamos utilizando en la página y la manera en que se encuentra el contenido.

Dentro de esta categoría encontramos a "dir" que se encarga de decirnos la dirección que tendrá el contenido, es decir de izquierda a derecha para textos occidentales o de derecha a izquierda para escritura árabe.

También encontramos a "xml:lang" que especifica el idioma del contenido, los valores que puede tomar son la abreviación del idioma, como por ejemplo "es" para español o "en" para inglés.

Atributos XHTML de eventos

Existe una clase de atributos utilizados para invocar funciones de JavaScript mediante el manejo de eventos, durante mucho tiempo fueron la mejor alternativa para llevar a cabo esto, pero actualmente su uso no se recomienda pues no cumplen con los estándares.

Entre dichos atributos encontramos a onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, etc.

El mal uso de etiquetas HTML

Al ver el código fuente de varias páginas podemos apreciar a menudo los mismos errores que aparecen una y otra vez, estos errores suelen ser producidos por los hábitos que arrastramos denuestros primeros días en el mundo de la maquetación web, o por desconocimiento sobre la verdadera función de cada etiqueta.

Vamos a ver las etiquetas que comúnmente son utilizadas de manera incorrecta, tratando de especificar en que fallamos y de que manera podemos usarlas correctamente.

Etiqueta "br"

Hasta la aparición de CSS, utilizar br era una de las alternativas para todo lo referente a espacios entre dos bloques de elementos.

Esta etiqueta no se debe de utilizar para crear espacios vacíos en tus documentos o contenido, su función es únicamente dar un salto de línea en una oración.

Si lo que deseas es tener espacio entre un elemento y otro entonces es recomendable añadir esos espacios mediante CSS, lo que nos permitirá determinar la distancia entre los elementos.

Etiqueta "div"

Esta etiqueta se ha convertido en una de las más utilizadas en los últimos años.

La etiqueta "div" vino a cambiar la manera en que diseñábamos la estructura de nuestras páginas, permitiendo establecer capas y niveles con los cuales, mediante el apoyo de CSS, podíamos adaptar nuestro sitio.

Pero su implementación se fue haciendo más común y para situaciones donde realmente no debería de usarse.

Hay sitios que basan prácticamente toda su estructura de elementos en "divs", incluso para mostrar elementos de texto o imagen, esto está totalmente mal.

No tenemos que rodear todos los elementos de un sitio con un "div", ni mucho menos utilizarlos en lugar de etiquetas cuya función especifica es la que estamos haciendo, como mostrar una imagen.

Es perfectamente aceptable utilizar la etiqueta "div" para definir la estructura de la página, pero siempre tratando de hacer uso de etiquetas más adecuadas y especializadas para los elementos de tu página, etiquetas como el párrafo y las listas pueden ser una opción mucho más semánticamente correcta.

Etiqueta "title"

Una etiqueta fundamental en cualquier estructura de código HTML es "title", su función es básica para el sitio ya que sin ella nuestra página no tendría un título que indique de que trata el contenido que estamos por ver.

El problema es que su uso se ha venido degradando para convertirla en una etiqueta más de "meta-data" y hoy en día el título se usa para mejorar el SEO. Esto no es un problema, el problema es abusar.

Es común caer en extremos al momento de utilizar esta etiqueta, o simplemente no ponemos nada importante en ella o la llenamos de información que realmente no tiene cabida.

Debemos evitar estos dos extremos y utilizar las etiquetas "meta description" para esta clase de información más extensa.

Etiqueta "img"

No uses imágenes para casos donde realmente no se requiera, no tienes que convertir todo en imágenes.

Recuerda que esto es malo para que la página pueda ser analizada por motores de búsqueda, todo lo que sea contenido de texto, no debe ir en una imagen.

A veces incluso se cometen errores al utilizar algunos de sus atributos, como el caso de "alt", cuya función es contener una descripción precisa de la imagen, sin embargo la mayor parte del tiempo tiene texto irrelevante.

Consejos útiles para realizar un mejor código

Simplificar

Cuando se trata de diseñar una página web, debemos tener muy en cuenta al usuario de la misma. Una página web debería tener solo aquello que es necesario.

Puede verse en muchas ocasiones, que los diseñadores terminan generando códigos extremadamente confusos y largos, para diseños que pueden conseguirse de forma más sencilla.

Un elemento clave para la generación de un código ordenado es la planificación del diseño.

Todo diseño debe ser elaborado de afuera hacia adentro, es decir, de los elementos contenedores principales hacia los menores.

Esto quiere decir que cuando se inicia una página web, los primeros elementos que deben ser determinados mediante el uso de HTML son los contenedores, como " body ".

A partir de allí, se debe generar las capas de cada sección de la estructura de la página (cabecera, columnas, pie) para luego seguir con los detalles necesarios dentro de cada una de ellas.

Tratar de no utilizar "hacks"

Los hacks son trucos mediante los cuales se pueden sortear algunos de los problemas generados por las diferencias existentes en la interpretación del código por parte de los navegadores.

En la mayoría de los casos no son necesarios. Si aprendemos a aceptar las diferencias normales entre navegadores, en lugar de exigir que tu diseño se vea exactamente igual en todos, produciremos un código más limpio y fácil de mantener.

Evitar el abuso de los posicionamientos absolutos

Una tendencia natural en los diseñadores recién iniciados, es al abuso de los elementos posicionados de forma absoluta ( position: absolute), debido a que con ello se suele tener un mayor control de donde se pintan los elementos.

Las páginas generadas en forma exclusiva o casi exclusiva con posicionamiento absoluto, tienen entre otros inconvenientes, la rigidez e inflexibilidad.

Esto hace prácticamente imposible pensar en una página con contenidos dinámicos, como un blog, ya que la extensión de los contenidos será variable y originará diferentes errores, como desbordamientos de capas y superposición de contenidos.

Evitar el abuso de los 'div'

Otro de los errores frecuentes entre principiantes es el pretender resolver todo mediante la utilización de capas.

No siempre es necesaria la utilización de capas para generar elementos, ya que en muchos casos existen los elementos semánticamente correctos dentro de HTML.

Muchos div's pueden ser reemplazados por la utilización correcta de listas, párrafos, títulos, etc.

Diseño flexible

En los últimos años se ha producido una explosión en la variedad de resoluciones de pantalla existentes y dispositivos.

También se ha producido un incremento enorme en el acceso a internet con otros tipos de dispositivos diferentes a los clásicos ordenadores.

Todo esto hace necesario que los diseños sean cada vez más flexibles, lo que se llama responsive, de forma que puedan visualizarse de forma correcta independientemente del dispositivo que se utilice para acceder a las páginas web.

Las conocidas diferencias existentes entre navegadores hace necesario que se utilice alguna forma de comprobar la visualización de las páginas que se están diseñando en ellos.

Escribir las etiquetas en minúsculas

A pesar de que en se pueden escribir las etiquetas tanto en minúsculas como en mayúsculas, debemos tener en cuenta que en XHTML esto no es correcto al igual que en XML, por lo que si quieres evitar problemas futuros, es recomendable escribir siempre las etiquetas con minúsculas.

Esto estaría mal:

Y esto bien:

No olvidar el cierre de las etiquetas

Algo que ya hemos explicado más arriba y representa un error, es olvidar el cierre de las etiquetas.

Cuando se trata de etiquetas que pueden contener elementos del mismo tipo anidados, los navegadores simplemente entienden que dicha etiqueta continúa abierta.

Además de producir dificultades y errores en la maquetación de la página, se trata de errores en el uso del lenguaje, por lo que el código no pasará la validación.

Separar el código CSS del código HTML

La utilización de etiquetas como <font> o <u>, son cosa del pasado. En la actualidad está casi desterrada la inclusión de etiquetas HTML pertenecientes a la presentación dentro del código.

Se recomienda manejar los estilos CSS en un archivo por separado para mantener una mejor organización del sitio. Usar archivos únicos y exclusivos para las hojas de estilo hace que se facilite su edición y administración.

Entre los principales beneficios de utilizar un archivo externo para guardar nuestro código CSS, se encuentra el hecho de que este archivo se puede utilizar para varios sitios y páginas de manera simultánea, sin necesidad de repetir el código de un lado a otro.

De igual manera, el manejar un archivo CSS representa un ahorro de tiempo al momento de la ejecución y despliegue de las páginas HTML. Al utilizar únicamente un archivo para todo el sitio, este se guarda en el caché del navegador lo que conlleva a un tiempo menor de respuesta y una carga más rápida.

Es importante recalcar el hecho de que las hojas de estilo deben incluirse dentro de las etiquetas "head", de la siguiente forma:

Coloca los scripts al final del HTML

Antes se acostumbraba cargar los archivos relacionado a JavaScript entre las etiquetas "head" del código.

Esto provocaba una demora en el tiempo de respuesta del sitio, ya que el navegador debe cargar primero todos los scripts con sus funciones antes de empezar a pintar los elementos en pantalla.

Es por esta razón que en la actualidad se recomienda agregar los scripts al final de nuestro código HTML, justo antes del cierre de la etiqueta "body":

Con esto lograremos que la página se cargue más rápido ya que el navegador no tiene que esperar a cargar los scripts y puede ir pintando elementos en pantalla, lo cual hace que el usuario obtenga una respuesta casi inmediata.

# data[].attributes.attachment_link.title
Conceptos básicos de HTML - Manual de HTML y CSS

# data[].attributes.attachment_link.description
Resumen: No te pierdas nuestra guía sobre los fundamentos de HTML, aprendiendo a utilizar las etiquetas y elementos de este lenguaje de creación de páginas web. HTML se basa en principalmente en etiquetas, que son como instrucciones para dar formato a las diferentes partes de una página web.

# data[].attributes.headline
¿Qué es un atributo? ¿Cual es su función?

# data[].attributes.subject
¿Qué es un atributo? ¿Cual es su función?

# data[].attributes.body
Atributo. Los atributos son las características individuales que diferencian un objeto de otro y determinan su apariencia, estado u otras cualidades. Los atributos se guardan en variables denominadas de instancia, y cada objeto particular puede tener valores distintos para estas variables. Las variables de instancia también denominados miembros dato, son declaradas en la clase pero sus valores son fijados y cambiados en el objeto. Además de las variables de instancia hay variables de clase, las cuales se aplican a la clase y a todas sus instancias.

Objetivos

Profundizar en el concepto de atributo de una clase e indicar los tipos de atributos en Java

Interpretar el código fuente de una aplicación Java donde aparecen distintos tipos de atributos

Construir una aplicación Java sencilla, convenientemente especificada, que emplee clases con diferentes tipos de atributos.

Los atributos, también llamados datos o variables miembros son porciones de información que un objeto posee o conoce de sí mismo. Una clase puede tener cualquier número de atributos o no tener ninguno. Se declaran con un identificador y el tipo de dato correspondiente. Modificador Visibilidad

public Pública (+)

protectec Protegida / en la herencia(#)

private Privada(-)

package De paquete (~)

# data[].attributes.body
HTML es un markup language, lo que significa que está escrito con códigos que puede leer una persona sin que sea necesario compilarlo primero. En otras palabras, el texto en una página web está «marcado» con estos códigos para dar instrucciones al navegador web sobre cómo mostrar el texto. Estas etiquetas de marcado son las propias etiquetas HTML

<body> para el contenido

<head> para información sobre el documento

<div> división dentro del contenido

<a> para enlaces

<strong> para poner el texto en negrita

<br> para saltos de línea

<H1>…<H6> para títulos dentro del contenido

<img> para añadir imágenes al documento

<ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro de la lista

<p> para parágrafos

<span> para estilos de una parte del texto

# data[].attributes.attachment_link.title
¿Qué es una etiqueta HTML y cuáles son las más importantes?

# data[].attributes.attachment_link.description
¿Todavía no sabes qué es una etiqueta HTML y para qué las puedes utilizar? En este post te damos los atributos que más utilizarás en web ¡Pincha aquí!

# data[].attributes.headline
¿Cuál es la estructura básica de una página web creada con HTML?

# data[].attributes.subject
¿Cuál es la estructura básica de una página web creada con HTML?

# data[].attributes.body
La estructura básica está en su lugar; simplemente necesita cambiar el título y añadir algo de texto. Lo primero que tenemos que saber es que en toda página web existen dos partes claramente diferenciadas: la cabecera, o head, y el cuerpo, o body.

# data[].attributes.headline
¿Qué elementos son necesarios para diseñar con HTML?

# data[].attributes.subject
¿Qué elementos son necesarios para diseñar con HTML?

# data[].attributes.body
1) Contenido. Una página web debe ser atractiva.

2) Tipografía. Es importante usar fuentes llamativas pero sencillas de leer.

3) Imágenes.

4) Animaciones y movimiento.

5) Botones e iconos.

6) Fondos claros y sencillos.

7) Enlaces a redes.

8) Sobriedad.

# data[].attributes.attachment_link.readable_text
Nadie puede dudar que Internet ha marcado un antes y un después en el mundo de las profesiones y que ha revolucionado la manera de entender incluso los negocios.

Y en todo este cambio destaca un elemento sin el que hoy en día nada sería lo que es: el diseño web.

Hoy en día una página web o un blog es una parte indispensable de la imagen de una persona, empresa o institución.

Lo que no se ve, no existe a ojos del consumidor.

Y lo que se ve es tan importante que hay que cuidar al máximo la apariencia y el estilo que la imagen proyecta.

Dicen que 10 segundos son suficientes para hacerse una primera impresión de una marca a través de su web.

Pero, ¿qué debe tener una buena página web? ¿Qué es imprescindible para que funcione y esté completa?

Tanto si ya has comenzado a trabajar en diseño web como si estás pensando en hacerlo, te compartimos los 8 elementos fundamentales que nunca puedes olvidar a la hora de diseñar una web.

Diseño web: los 8 elementos que toda página debe tener

Cada día nacen cientos de páginas web ya sea para entretener a los lectores, para suministrar información, promover intereses o con fines comerciales.

Pero muchas de ellas no cumplen con los requisitos "mínimos" que toda buena página debería tener.

Por eso desde VirtualiaNet queremos compartirte los 8 elementos de diseño web que toda página tiene la obligación de tener. Toma nota:

1) Contenido.

Una página web debe ser atractiva... Pero no solo a la vista, sino también en el contenido.

Eso significa que debe tener contenido interesante que atraiga (y atrape) al público objetivo.

De hecho, ninguna página puede considerarse exitosa si no cuenta con un contenido atractivo y actualizado con cierta frecuencia.

Eso servirá no solo para aumentar el número de nuevas visitas, sino para que los antiguos visitantes consulten la página a menudo y la usen como referencia.

2) Tipografía.

Es importante usar fuentes llamativas pero sencillas de leer.

También es importante variar el tamaño de una misma fuente para resaltar secciones interesantes del contenido y del texto.

3) Imágenes.

En el diseño web es muy importante las buenas fotografías, preferentemente tomadas por un profesional.

Es importante que no estén pixeladas o desenfocadas, ya que puede causar una mala imagen del sitio en general.

4) Animaciones y movimiento.

Para generar una sensación de dinamismo es bueno utilizar elementos animados.

Pero atención: no abuses de ellos, ya que pueden sobrecargar la página.

Lo ideal es que no sobrepasen el 20% del total de la página ya que de otra forma pueden causar saturación, distraer la atención de cosas importantes que se quieren decir y por último sacar al usuario del sitio.

5) Botones e iconos.

Utilizar botones prácticos y representativos, así como iconos grandes y vistosos aumenta la facilidad de navegación en la página.

Pero no es necesario colocar accesorios que no brinden un valor real, por ejemplo un reloj para clientes que se encuentran en el mismo uso horario.

6) Fondos claros y sencillos.

Los fondos claros o totalmente blancos facilitan la visualización, pero también dan un aspecto despejado a la página resaltando las imágenes.

Existe la tendencia a utilizar fondos negros para lecturas largas, para no cansar al lector con la luz del monitor.

7) Enlaces a redes.

Es de gran ayuda para los usuarios colocar enlaces a redes sociales con las cuales interactúan con facilidad. Esto ayuda además a crear comunidad.

8) Sobriedad.

Una página debe permitir una fácil visualización de los contenidos (vídeos, imágenes, textos).

Saturar al cibernauta es contraproducente.

Si la información o contenido tarda en cargarse, error: eso supone una visita menos y un potencial cliente que no conoció la oferta.

Tener en cuenta todo eso a la hora de optar por el diseño web es garantía de éxito.

¿Qué opinas sobre estos 8 "must do" o elementos obligados del diseño web?

¿Añadirías algún otro?

# data[].attributes.attachment_link.title
Diseño web: los 8 elementos indispensables en una página web

# data[].attributes.attachment_link.description
¿Quieres trabajar desde casa en diseño web? Lo primero que debes saber es que existen 8 elementos "de uso obligado" en toda página web. Descubre cuáles son.

# data[].attributes.headline
¿Existen otras herramientas para el diseño?

# data[].attributes.subject
¿Existen otras herramientas para el diseño?

# data[].attributes.body
9 tipos de recursos y herramientas para diseño web
#1 Diseño gráfico
#2 Paletas y combinaciones de colores
#3 Tipografías
#4 Plantilla y maquetador visual
#5 Plugins
#6 CSS
#7 Bancos de imágenes, iconos y recursos visuales
#8 Comprimir y optimizar imágenes
#9 Herramientas complementarias

# data[].attributes.attachment_link.readable_text
Crear una página web no es una tarea sencilla. Requiere de organización y planificación, así como de contar con una serie de herramientas para diseño web.

Para diseñar una página web se necesitan una serie de herramientas de diferente tipo: diseño gráfico, colores, optimización, plugins, plantillas, etc.

De modo que, si quieres saber cuáles son los materiales que utilizo en mi día a día como diseñador web, quédate a leer este post.

¡Te voy mostrar mi caja de aplicaciones y herramientas para diseño web!

9 tipos de recursos y herramientas para diseño web

A la hora de enumerar todas las herramientas que utilizo, me ha costado encontrar la forma adecuada de ordenarlas sin que te vuelvas loco.

Tras darle varias vueltas, he optado por organizar las aplicaciones para diseño web en función de su temática

De modo que, te presento mis recursos habituales en función del tipo de tarea que me permiten desarrollar.

Espero que quede claro 🙂

#1 Diseño gráfico

Como ya he contado en varios artículos, lo primero que hago cuando empiezo una página web en WordPress es diseñar toda la parte gráfica: logo, banners, cabeceras, etc.

Mi herramienta favorita para todo lo que tiene que ver con diseño gráfico es Photoshop. Es la que uso cada día para diseñar logotipos, banners, portadas de posts o creatividades.

Otra del paquete Adobe, pero que requiere conocimientos más avanzados es Illustrator, programa que uso cuando tengo que trabajar con Vectores.

Si no tienes grandes conocimientos en diseño gráfico, puedes probar otras como Canva, una opción realmente interesante para crear diseños de forma rápida y sencilla:

#2 Paletas y combinaciones de colores

Una tarea estrechamente relacionada con el diseño gráfico es la creación de la paleta de colores del sitio web.

Para crear combinaciones de colores también utilizo Phososhop, aunque que recurro a otras páginas y herramientas para buscar inspiración:

De todas ellas, mis dos favoritas a la hora de inspirarme son: Design Seeds y Color Hunt.

Como ya sabes si eres lector de esto blog, siempre recomiendo escoger un color principal y dos o tres complementarios.

Aquí puedes ver a qué me refiero en mi propia paleta de colores:

#3 Tipografías

Otra de las tareas relacionadas con la identidad y la parte visual de la web son las tipografías.

Como en el caso de la paletas de colores, para las tipografías también recomiendo crear combinaciones sencillas: una fuente para el cuerpo de texto y otra (dos como mucho) para los elementos destacados de la web (botones, títulos, subtítulos, llamadas a la acción, etc).

De hecho, la dificultad de las tipografías no está en elegirlas, sino en combinarlas correctamente, pues hay miles de opciones diferentes y a veces es complicado.

La herramienta que más utilizo para buscar tipografías es Google Fonts, aunque hay otras que también me gustan:

#4 Plantilla y maquetador visual

Una vez tienes lista toda la parte gráfica del sitio web, es el momento de escoger la plantilla y/o maquetador visual que vas a usar.

En este punto tienes dos opciones:

1. Escoger y comprar una plantilla cuyo diseño te guste y puedas adaptar a tu proyecto.

2. Trabajar con un editor visual y maquetar tu web desde cero.

Si optas por la primera opción, puedes encontrar plantillas muy interesante en Theme Forest, un marketplace que cuenta con miles de temas premium para WordPress.

Mis plantillas favoritas de todas las que he probador a lo largo de estos años: Divi, Salient, Bridge, RedWood y SimpleMag.

Si prefieres tener un diseño exclusivo y tienes conocimientos más avanzados, te recomiendo trabajar con un maquetador visual en tu web.

En cuanto a maquetadores para WordPress, hay varios en el mercado (Divi, Elementor, Visual Composer). Solo tienes que ver cuál es el que mejor se adapta a tus necesidades.

Ya sabes que Divi es mi favorito y el que siempre uso en mis diseños.

Fundamental a la hora de hacer una página web en WordPress, es utilizar los mejores plugins (tanto gratuitos como de pago).

Como en el mercado de plugins existen varios miles de opciones, quiero compartir contigo cuáles son los fundamentales que utilizo en mis diseños:

404page - your smart custom 404 error page. Plugin para personalizar la página de error 404.

Antispam Bee para evitar spam en los comentarios.

Bloom para la captación de suscriptores a través de Email Marketing.

GDPR Cookie Consent para mostrar que la web cumple con la Ley de cookies de la UE (GRPD).

Limit Login Attempts. Plugin de seguridad para evitar posibles ataques.

Monarch para compartir entradas y páginas en redes sociales.

Redirection para crear redirecciones personalizadas.

WP Smush para comprimir y optimizar imágenes.

Table of Contents Plus para mostrar una tabla de contenidos en los artículos.

TinyMCE Advanced para añadir funcionalidades extras en el editor de WordPress.

WordPress Related Posts para mostrar entradas relacionados al final de los posts.

WP Rocket. Plugin premium para la WPO, caché, carga, base de datos...

Yoast SEO, plugin universal para los temas de SEO.

Por supuesto, utilizo más plugins, pero esos son mis imprescindibles.

Otra tipo de herramientas para diseño web son las que ayudan a generar código CSS y crear elementos del diseño diferentes a los que vienen por defecto.

Para esta tarea te recomiendo un par de herramientas online:

Y para crear botones personalizados, te recomiendo CSS Button Generator, un recurso que utilizo cuando quiero botones más exclusivos.

Aquí puedes ver un ejemplo:

#7 Bancos de imágenes, iconos y recursos visuales

En los proyectos en los que el cliente no dispone de imágenes propias o no tiene recursos para contratar a un fotógrafo, trabajo con varios bancos.

En estos bancos busco imágenes, vídeos, vectores e iconos. Los cuatro que utilizo son:

Shutterstock. Es un banco de pago en el que tengo cuenta y que utilizo para encontrar imágenes, vídeos, vectores e ilustraciones con mucha calidad.

Unsplash. Se trata de un banco donde puedes encontrar imágenes con muchísima calidad de forma gratuita. Es el recurso que utilizo cuando quiero buscar fotografías más exclusivas y que no estén tan vistas.

Freepik. Es el banco que utilizo para buscar y descargar vectores.

Flaticon. Herramienta que uso para encontrar iconos cuando necesito algo diferente a los que trae por defecto la plantilla.

#8 Comprimir y optimizar imágenes

Otra de las tareas imprescindibles a la hora de diseñar una web es la de comprimir y optimizar todas las imágenes que subo para aligerar su peso y ganar en velocidad de carga.

Para esta tarea utilizo varias herramientas:

Photoshop. La funcionalidad "guardar para web" es mi preferida.

Compressor.io es la aplicación web que utilizado para comprimir imágenes sin perder calidad.

El plugin Smush para ajustar los tamaños de las imágenes en WordPress (ya lo he mencionado cuando he hablado de plugins).

#9 Herramientas complementarias

Por último, no son herramientas para diseño web como tal, pero te quiero mencionar una serie de herramientas y servicios complementos en todo proyecto web.

La mayoría son servicios que necesitas dar de alta y vincular con tu página web; otros son plataformas para mejorar tu sitio.

Te cuento más sobre todos ellos:

1. Analytics. Es la herramienta de Google que permite medir analizar los datos y estadísticas de una web: visitas, usuarios, tecnología, procedencia del tráfico, etc.

2. Search Console. Otra herramienta de Google para administradores de sitios web. Permite analizar una página a ojos de Google, conocer su estado de indexación, eliminar errores, agregar redirecciones o subir un sitemap, entre otras opciones.

3. Keyword Planner de AdWords. Se trata de una herramienta más de Google. Sirve para buscar palabras clave, así como su nivel de competencia y dificultad de posicionamiento. Fundamental para los artículos del blog.

4. Medidores de velocidad de carga. Conocer los datos y tiempos de carga de tu web es fundamental para optimizarlos y mejorar así el SEO.

Antes de terminar, te dejo un vídeo en el que te muestro cada una de estas aplicaciones y herramientas para diseño web, un total de 45.

Hasta aquí mi repaso por las herramientas para diseño web que utilizo en mi día a día. Seguro que hay alguna más que me he dejado en el tintero.

Por último, quiero recordarte que, si necesitas ayuda con tu sitio, puedes consultar mi servicio de diseño web.

Portada: shutterstock

# data[].attributes.attachment_link.title
🛠 Aplicaciones, recursos y herramientas para diseño web

# data[].attributes.attachment_link.description
Crear una página web no es una tarea sencilla. Requiere de organización y planificación, así como de contar con una serie de herramientas para diseño web. Para diseñar una página web se necesitan una serie de herramientas de diferente tipo: diseño gráfico, colores, optimización, plugins, plantillas, etc.

# data[].attributes.body
HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. Se trata de la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto, que podría ser traducido como Lenguaje de Formato de Documentos para Hipertexto.

# data[].attributes.headline
¿Qué se debe considerar antes de diseñar un sitio web?

# data[].attributes.subject
¿Qué se debe considerar antes de diseñar un sitio web?

# data[].attributes.body
1. Establece unos objetivos para tu página web.

2. Crea también tu imagen de marca.

3. Elige un proveedor integral y profesional.

4. Una web que facilite la navegación al usuario.

5. Diseño responsive.

6. Si tu web es un e-commerce, facilita el proceso de compra.

# data[].attributes.headline
¿Cual es la función de un diseñador web?

# data[].attributes.subject
¿Cual es la función de un diseñador web?

# data[].attributes.body
Si bien es común pensar que un diseñador web es responsable de crear sitios web atractivos y completamente funcionales, hacen más que eso.

Los diseñadores web tienen en su trabajo tareas rutinarias relacionadas con la creación de un diseño para medios digitales y la creación de contenido.

Por lo tanto, deben analizar tanto las necesidades del cliente como los objetivos para configurar un sitio web a fin de brindar a los visitantes la mejor experiencia.

Además, diseñadores web deben saber cómo insertar gráficos, usar lenguajes como HTML y actualizar el sitio cuando sea necesario.

# data[].attributes.body
El diseño web es un área enfocada en el desarrollo de interfaces digitales, como el diseño de sitios y aplicaciones para web. Para ello, los diseñadores web crean las páginas utilizando lenguajes de marcado como HTML.