Maquetació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 subcarpetas por
página (carpetas contenedoras) para ubicar el contenido que corresponda a esa
página.
Para contenidos generales como logos, íconos que se usen en varias páginas, etc.,
colocarlos en la raíz de la carpeta contenedora.
Sobre la estructura html
La estructura básica de las páginas debe ser similar a la siguiente:
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
- Declarar el lenguaje
- Declarar la codificación de caracteres
- Declarar la etiqueta title
-
Incluir un Favicon dentro de la etiqueta
<head>,
- 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.
- Usar etiquetas semánticas nativas de HTML5 y enviar el uso de divs como reemplazo de las mismas.
- Cerrar las etiquetas correctamente, en el mismo orden en que se abrieron.
- 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.
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:
-
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).
- Dejar solo un espacio luego de los dos puntas 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:
- Cuando se deba hacer algún comentario dentro de estas secciones, hacerlo de la siguiente forma:
- Agregar los comentarios siempre arriba de las líneas, no al final de las mismas.
Optimización de imagenes
Una mala optimización del contenido gráfico puede generar páginas más lentas y pesadas, lo que impacta directamente en la experiencia del usuario. Esto no solo aumenta el porcentaje de rebote, sino que también puede hacer que perdamos visitas valiosas.
Para optimizar correctamente las imágenes en proyectos web, tené en cuenta los siguientes puntos:
-
Formato de archivo:
Usá formatos modernos y eficientes según el tipo imagen:
- WebP: Alta compresión con buena calidad. Ideal para fotografías e imágenes complejas.
- SVG: Formato vectorial perfectos para íconos, logotipos e ilustraciones. Escalable sin pérdida de calidad.
- GIF: Solo para animaciones simples. Si no es indispensable, se recomienda usar alternativas como Lottie o video.
- Dimensiones adecuadas: Usá la dimensión justa para el contenedor donde se va a mostrar la imagen. Por ejemplo, si el ancho máximo del contenedor es de 500 px, evitá subir imágenes de 1200 px o más. Cuanto más ajustado esté el tamaño, menor será el peso y mejor el rendimiento.
-
Nombre del archivo:
El nombre debe ser relevante para el contenido y mejorar el SEO:
- No usar tildes ni caracteres especiales.
- Separar palabras con guiones (-).
- Ser conciso y descriptivo.
- Evitar palabras vacías como “de”, “el”, “la”.
- Evitá: imagen-1.jpg, whatsapp-img-213.jpg
- Usá: panel-solar-rural.webp, mapa-energia-argentina.svg
- Texto alternativo (atributo Alt): El texto alternativo es clave para la accesibilidad y el SEO. Debe describir claramente el contenido o función de la imagen. Si es decorativa, igualmente es importante agregar alt="" para que los lectores de pantalla la ignoren.
- Texto alternativo (atributo Alt): Antes de subir una imagen, comprimila para reducir su peso sin perder calidad visual. Podés usar herramientas como Squoosh, TinyPNG, ImageOptim, o implementarlo en un flujo automatizado de build.
- Carga diferida (lazy loading): Agregá loading="lazy" en las imágenes para que se carguen solo cuando el usuario haga scroll hasta ellas. Esto mejora el tiempo de carga inicial de la página y reduce el consumo de recursos.
- Imágenes responsive: Usá srcset y sizes en la etiqueta para entregar diferentes versiones de una misma imagen según la resolución del dispositivo. Esto evita que un móvil cargue imágenes pensadas para pantallas de escritorio.
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.
