Saltar al contenido principal

Maquetación

Introducción

El presente documento tiene como propósito brindar lineamientos y buenas prácticas de maquetado web para ser implementados dentro de los sitios y aplicaciones de YPF S.A.

Sobre la estructura de carpetas

Para una mejor organización de los sitios se debe respetar una estructura determinada de carpetas.

En la raíz principal se ubicarán todas las páginas y las carpetas de CSS, documents, images, js, videos, etc.

En las carpetas de documents, images, videos,etc se crearán sub carpetas por página (carpetas contenedoras) para ubicar el contenido que corresponda a esa página. Para contenidos generales como logos, iconos que se usen en varias páginas, etc. colocarlos en la raíz de la carpeta contenedora.

1.0 - Estructura de carpetas

Sobre la estructura html

La estructura básica de las páginas debe ser similar a la siguiente:

1.1 - Estructura del html

Maquetado

Para que las páginas sean gestionadas en YLITE, las maquetas deben ser HTML plano, es decir, evitar la generación de código o contenido mediante JavaScript

  • Declarar el DOCTYPE 
    <!DOCTYPE html>
  • Declarar el lenguaje 
    <html lang="es">
  • Declarar la codificación de caracteres 
    <meta charset="UTF-8">
  • Declarar la etiqueta title 
    <title>Título que describa el tema o propósito de la página</title>
  • Incluir un Favicon dentro de la etiqueta <head>, 
    <link rel="shortcut icon" href="img/favicon.png" >
  • Todas las páginas deben tener en su comienzo un link (visible o no) que apunte al main, cuya descripción sea “Saltar al contenido principal”
  • Usar minúsculas en los nombres de etiquetas, atributos y valores.
  • Usar un indentado consistente. 
    <--Indentado correcto-->
<section>											
    <div>
        <p> Lorem ipsum dolor,Ducimus, alias!</p>	
    </div>
</section>

<--Indentado incorrecto-->
<section>											
<div>
<p> Lorem ipsum dolor,Ducimus, alias!</p>	
</div>
			</section>
  • Usar etiquetas semánticas nativas de HTML5 y envitar el uso de divs como reemplazo de las mismas. 
    <--Etiquetado semántico correcto-->
<section class="componente-banner">										
    <h1> Lorem ipsum dolor </h1>
    <p> Lorem ipsum dolor, Ducimus, alias! </p>
</section>

<--Etiquetado semántico incorrecto-->
<div class="seccion-componente-banner">										
    <div class="titulo-principal">Lorem ipsum dolor </div>
    <div class="descripcion-banner">Lorem ipsum dolor, Ducimus, alias! </div>
</div>
  • Cerrar las etiquetas correctamente, en el mismo orden en que se abrieron. 
    <--Cierre correcto de etiquetas-->
<section class="componente-banner">										
    <h1> Lorem ipsum dolor </h1>
    <p> Lorem ipsum dolor, Ducimus, alias! </p>
</section>

<--Cierre incorrecto de etiquetas-->
<section class="componente-banner">										
    <h1> Lorem ipsum dolor
    <p> Lorem ipsum dolor, Ducimus, alias!/p>
</div>
  • No usar estilos en línea. Presentar las modificaciones de estilos a través de CSS asignándole una clase a las etiquetas.
  • Utilizar comillas dobles tanto en la hoja CSS como en el HTML
  • Individualizar cada sección, componente con comentarios. 
    <--Banner Principal-->
<section class="componente-banner">										
    <h1>Lorem ipsum dolor </h1>
    <p>Lorem ipsum dolor, Ducimus, alias! </p>
</div>

Hojas de estilo CSS

Con el fin de que las hojas de estilo queden estandarizadas,se solicita tener en cuenta los siguientes puntos:

  • Al indentar código utilizar tabulaciones.
  • Finalizar cada línea con un punto y coma y revisar que no queden espacios en blanco sobrantes al final.
  • Sí se utilizan varios selectores para las mismas declaraciones de estilos, escribir cada selector, o cadena de selectores, en diferentes líneas para mejorar la lectura:
  • Dejar solo un espacio antes de la apertura del corchete, ubicando los mismos de la siguiente forma: 
    
/* Correcto */
.selector {
    padding: 14px 10px;
}

/* Incorrecto */
.selector{padding: 14px 10px;}

.selector
{
padding: 14px 10px;
}
  • Para el nombramiento de las clases, evitar todo tipo de caracteres especiales (acentos, comas, llaves, etc.) y no incluir caracteres en mayúscula. Los nombres de las clases que requieran 2 o más palabras, deberán estar separados por - (guiones medios). 
    <--Nombre de clases correctos-->
<section class="seccion-banner">										
    ...
</section>

<--Nombre de clases incorrectos-->
<section class="Sección,_banner">										
    ...
</section>
  • Dejar solo un espacio luego de los dos puntos en cada declaración.
  • Utilizar comillas dobles tanto en la hoja CSS como en el HTML.
  • Cuando se trabaje sobre una hoja que le da estilos a varias páginas o componentes, individualizar cada uno de la siguiente forma: 
    
/*********************************************************
*********** Nombre de pagina o componente a estilar ************
**********************************************************/
  • Cuando se deba hacer algún comentario dentro de estas secciones hacerlo de la siguiente forma: 
    
/* Fix para el menu principal por motivo XXX */
  • Agregar los comentarios siempre arriba de las líneas, no al final de las mismas.

Optimización de imagenes

Una incorrecta optimización del contenido gráfico nos da como resultado páginas más lentas y pesadas que generan una mala experiencia para el usuario, así como también un porcentaje muy alto de rebote y perdida de los mismos.

Para la correcta optimización de las imágenes tener en cuenta los siguientes puntos:

  • Tipo de archivo: Usar archivos JPG, PNG, WEBP, SVG, GIF
  • Resolución: Usar imágenes con resoluciones a 72 dpi
  • Dimensión: Usar la dimensión correcta para el contenedor donde va a estar la imagen. Por ejemplo, si sabemos que el contenedor va a tener un ancho máximo de 500 px, no usar una imagen de 1200px de ancho.
  • Nombre del archivo: El nombre tiene que ser relevante respecto al tema que se está tratando en el contenido redactado:
    • Evitar nombres como: 6708.jpg, imagen-1.jpg, whatsapp-img-dsdf.jpg.
    • No usar tildes o caracteres especiales.
    • Separa las palabras con guiones.
    • Tiene que ser descriptivo y conciso.
    • Evitar palabras como "del, el" solo palabras claves.
  • Texto alternativo: Añadir texto alternativo a las imágenes es una de las primeras reglas del SEO de imágenes y también es un principio clave de la accesibilidad web.
    La alternativa textual debe describir el aspecto y la función de la imagen en la página. Si la imagen no llega a ser relevante y es meramente decorativa, igualmente hay que agregar siempre el atributo alt=”” en el código html.

Librería de terceros

  • Las librerías de terceros no tienen que estar editadas. Por ejemplo, Jquery, Bootstrap, etc.
  • De llegar a modificar librerías , editarlas en un archivo separado.
  • Deben ser locales y no usar CDN externos.

Accesibilidad

Todos los sitios y plataformas de YPF están alcanzados por la Disposición ONTI N°6/2019 que establece que el nivel mínimo de conformidad a ser cumplimentado por las organizaciones alcanzadas por la Ley N° 26.653 deberá ser de veinte (20) criterios para el primer año de vigencia de esta disposición y de treinta (30) criterios para períodos subsiguientes. A tales efectos se debe considerar como total los treinta y ocho (38) criterios de conformidad referidos en el ANEXO II que integra la presente Disposición.

Se recomienda realizar testeos manuales, las herramientas o aplicaciones de testeos automáticos ( ver sugeridas ) tienen limitantes en varios criterios del análisis. Las mismas analizan puramente el código y no pueden hacer una devolución, por ejemplo, si el usuario puede navegar con el teclado y llegar a todos los links de la página, si los elementos enfocables tienen un foco visible, si los textos alternativos son los adecuados, etc. por lo tanto, se recomiendan usarlas de apoyo en el análisis.

Ver sección de accesibilidad

Componentes

YPF-header

Este componente web ypf-header, es un elemento HTML personalizado que representa un encabezado con navegación para el sitio web de YPF. Está diseñado para ser altamente personalizable y proporciona un encabezado fijo con varias secciones, botones y enlaces.

Uso

Para utilizar el componente web ypf-header, simplemente incluye el link:
https://lineamientos.ypf.com/js/ypf-header-webComponent.js en tu proyecto e impórtalo en tu archivo HTML:


Conclusión

El componente web ypf-header es un poderoso encabezado personalizable para el sitio web de YPF. Ofrece una experiencia de usuario fluida con transiciones suaves y un diseño receptivo. Para ejecutar el componente web en local, levanta tu solución sobre el puerto 8080 || 5500 con esto podras ver el componente web en acción.

Solicitud de API GraphQL utilizando JavaScript

En resumen, este código realiza una solicitud a una API GraphQL utilizando la función fetch, pasando una consulta GraphQL como datos en formato JSON. Luego, procesa la respuesta y extrae los resultados de la consulta para utilizarlos en el resto del código.



El código JSON proporcionado describe la estructura de un encabezado de navegación que consta de elementos como "secciones" y "grupos" con sus respectivos enlaces y propiedades de estilo. Cada elemento tiene un "tipo" específico que indica si es una sección, grupo o enlace.

A continuación, una breve explicación de la estructura del header:

  • El header está representado por un array con la clave "items".
  • Cada elemento del array representa una sección del header y tiene las siguientes propiedades:
    • "title": El título de la sección.
    • "data": Un array que contiene los elementos del grupo, cada uno representado por un objeto con sus propiedades.
  • Los elementos del grupo tienen las siguientes propiedades:
    • "text": El texto del enlace o grupo.
    • "props": Un objeto que contiene las propiedades del enlace.
    • "type": El tipo del elemento, que puede ser "seccion", "grupo" o "link".
    • "children": Un array que puede contener elementos hijos dentro del grupo.

El JSON describe un enxabezado jerárquico con secciones y grupos anidados, y cada grupo contiene enlaces con sus respectivas URLs y propiedades de estilo.

Este componente web ypf-footer es un elemento HTML personalizado que representa un pie de pagina con navegación para el sitio web de YPF. Está diseñado para ser altamente personalizable y proporciona un pie de pagina fijo con '/arias secciones, botones y enlaces.

Uso

Para utilizar el componente web ypf-footer, simplemente incluye el link:
https://lineamientos.ypf.com/js/ypf-footer-webComponent.js en tu proyecto e impórtalo en tu archivo HTML:


Conclusión

El componente web ypf-footer es un poderoso pie de página personafizable para el sitio web de YPF. Ofrece una experiencia de usuario fluida con transiciones suaves y un diseño receptivo. Para ejecutar el componente web en local, levanta tu solución sobre ei puerto 8080 j| 5500 con esto podres ver el componente web en acción.

Solicitud de API GraphQL utilizando JavaScript

En resumen, este código realiza una solicitud a una APJ GraphQL utilizando la función fetch, pasando una consulta GraphQL como datos en formato JSON. Luego, procesa la respuesta y extrae los resultados de la consulta para utilizarlos en el resto del código.



El código JSON proporcionado describe la estructura de un footer de navegación que consta de elementos como "secciones' y "grupos' con sus respectivos enlaces y propiedades de estilo.

A continuación, una breve explicación de la estructura del footer:

  • El footer está representado por un array con la clave "items".
  • Cada elemento del array representa una sección del footer y tiene las siguientes propiedades:
    • "title": El título de la sección.
    • "data": Un array que contiene los elementos del grupo, cada uno representado por un objeto con sus propiedades.
  • Los elementos del grupo tienen las siguientes propiedades:
    • "text": El texto del enlace o grupo.
    • "props": Un objeto que contiene las propiedades del enlace.
    • "type": El tipo del elemento, que puede ser "seccion", "grupo" o "link".
    • "children": Un array que puede contener elementos hijos dentro del grupo.

El JSON describe un pie de pagina jerárquico con secciones y grupos anidados, y cada grupo contiene enlaces con sus respectivas URLs y propiedades de estilo.

Testeos y pruebas

Debido a que el maquetado de los sitios debe ser responsivo, solicitamos su testeo en los siguientes navegadores y dispositivos:

Desktop

  • IE Edge
  • Chrome
  • Firefox
  • Safari

Móviles

  • Android 4.4 o menor con browser default del SO
  • Android mayor a 4.4 con browser Chrome
  • iOS

Dispositivos móviles

Realizar prueba de optimización para móviles en mobile friendly google

W3C

Validar las páginas en la W3C con el validator.w3.org

Accesibilidad

Sugerimos realizar testeos manuales para abordar los criterios que el análisis automático no llega tomar.

Herramientas de testeo recomendadas:

YPF - 2022 - V.1.0.4