Skip to content

Latest commit

 

History

History
752 lines (474 loc) · 40.2 KB

README.md

File metadata and controls

752 lines (474 loc) · 40.2 KB
Raw

Front-End Checklist Logo

Front-End Checklist-ES

Contributors Front‑End_Checklist followed CC0

La Front-End Checklist es una lista exhaustiva de todos los elementos que necesitas tener/probar antes de lanzar tu sitio/página HTML a producción.

Esta basada en años de experiencia de desarrolladores Front-End, con agregados provenientes de otros checklist de código abierto.

Tabla de contenidos

  1. Head
  2. HTML
  3. Webfonts
  4. CSS
  5. Imágenes
  6. JavaScript
  7. Seguridad
  8. Rendimiento
  9. Accesibilidad
  10. SEO

¿Cómo usar?

Todos los elementos en la Front-End Checklist son requeridos para la mayoría de los proyectos, pero algunos elementos pueden ser omitidos o no son esenciales (por ejemplo, en el caso de una aplicación web administrativa, quizás no necesitas la función de RSS). Elegimos usar 3 niveles de flexibilidad:

  • Bajo significa que el elemento es recomendado pero puede ser omitido en situaciones particulares.
  • Medio significa que el elemento es altamente recomendado y eventualmente puede ser omitido en casos muy particulares. Algunos elementos, si son omitidos, pueden traer malas repercusiones en términos de rendimiento o SEO.
  • Alto significa que el elemento no se puede omitir por ningún motivo. Puede causar una anomalía en su página, tener problemas de accesibilidad o SEO. Estos elementos deben tener prioridad en el test.

Algunos recursos poseen un emoticón para ayudar a entender el tipo de contenido/ayuda que podrás encontrar en el checklist:

  • 📖: documentación o artículos
  • 🛠: herramienta en línea / herramienta para pruebas
  • 📹: media o contenido en video

Nota: Debido a que este documento es una traducción, la documentación, artículos, herramientas y medios se encuentran en inglés.

Head

Nota: Puedes encontrar una lista de todo (traducción en progreso) lo que puede encontrarse en el <head> de un documento HTML.

Meta tag

  • Doctype: Alto El Doctype es HTML5 y se localiza arriba del todo en tus páginas HTML.
<!-- Doctype HTML5 -->
<!doctype html>

📖 Determinando la codificación de caracteres - HTML5 W3C(fuente en inglés)

Los siguientes 3 meta etiquetas (Charset, X-UA Compatible and Viewport) necesitan ir primero en el head.

  • Charset: Alto El charset definido (UTF-8) es declarado correctamente.
<!-- Declaramos la codificación de juego de caracteres para el documento -->
<meta charset="utf-8">
  • X-UA-Compatible: Medio La meta etiqueta X-UA-Compatible está presente.
<!-- Ordenamos a Internet Explorer usar su motor de renderizado más reciente -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

📖 Especificando modos de documento heredado (Internet Explorer) (fuente en inglés)

  • Viewport: Alto El viewport es declarado correctamente.
<!-- Viewport para diseño web responsivo -->
<meta name="viewport" content="width=device-width, initial-scale=1">
  • Title: Alto El título es usado en todas las páginas (SEO: Google calcula el ancho de los caracteres usados en el título y los corta entre los 477 y 485 pixeles. El límite promedio en los títulos es de no más de 55 caracteres).
<!-- Título del documento -->
<title>Título de página menor a 55 caracteres</title>

📖 Título - HTML - MDN (fuente en inglés)

  • Description: Alto Una meta descripción es proporcionada, es única y no posee más de 150 caracteres.
<!-- Meta descripción -->
<meta name="description" content="Descripción de la página en menos de 150 caracteres">

📖 Meta descripción - HTML - MDN (fuente en inglés)

  • Favicons: Medio Cada favicon se ha creado y mostrado correctamente. Si solo tienes un favicon.ico, colocalo en la raíz de tu sitio. Normalmente no necesitarás usar ningún marcado. Sin embargo, es una buena práctica enlazarlo usando el ejemplo debajo. Al día de hoy, se recomienda el formato PNG sobre el formato .ico (dimensión: 32x32px).
<!-- Favicon estandar -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Formato favicon recomendado -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
  • Apple Web App Meta: Low Se usan Apple meta-tags.
<!-- Apple Touch Icon (al menos de 200x200px)-->
<link rel="apple-touch-icon" href="/custom-icon.png">
<!-- Para correr aplicaciones a pantalla completa -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Estilo de la barra de estado (ver enlace Meta Tags soportados para valores disponibles) -->
<!-- No funcionará a menos que coloques la etiqueta anterior -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

📖 Configurando Aplicaciones Web (fuente en inglés)

  • Windows Tiles:Low Windows tiles están presentes y enlazadas.
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />

El marcado xml mínimo requerido para el archivo browserconfig.xml es el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
   <msapplication>
     <tile>
        <square70x70logo src="small.png"/>
        <square150x150logo src="medium.png"/>
        <wide310x150logo src="wide.png"/>
        <square310x310logo src="large.png"/>
     </tile>
   </msapplication>
</browserconfig>

📖 Referencia de esquema de configuración del navegador (fuente en inglés)

  • Canonical: Medium Usa rel="canonical" para evitar contenido duplicado.
<!-- Ayuda a prevenir problemas de contenido duplicado -->
<link rel="canonical" href="http://ejemplo.com/2017/09/articulo-nuevo-para-leer.html">

Etiquetas HTML

  • Language tag: Alto La etiqueta de lenguaje de tu sitio web está específicada y relacionada al lenguaje de la página actual.
<!-- Indicamos el idioma definido para la página actual -->
<html lang="es">
  • Direction tag: Medio La dirección de lectura es específicada en la etiqueta body (Puede ser usada en otra etiqueta HTML).
<!-- Indicamos la dirección de lectura (rtl = right to left/ derecha a izquierda) -->
<html dir="rtl">

📖 Atributo Global dir - HTML - MDN

  • Alternate language: Bajo La etiqueta de lenguaje de tu sitio web está específicada y relacionada al lenguaje de la página actual .
<!-- Indicamos el idioma definido para la página actual -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">
  • Comentarios condicionales: Bajo Comentarios condicionales están presentes para IE si son necesarios.

📖 Comentarios condicionales (Internet Explorer) - MSDN - Microsoft (fuente en inglés)

  • RSS feed: Bajo Si tu proyecto es un blog o tiene artículos, un enlace RSS fue proprocionado.

  • CSS Crítico: Medio El CSS crítico (o "above the fold") contiene todo el CSS usado para renderizar la porción visible de la página. Se incrusta antes de la llamada principal a CSS y entre <style></style> en una sola línea (minificado).

🛠 Critical by Addy Osmani on Github

  • Orden del CSS: Alto Todos los archivos CSS son cargados antes que cualquier archivo JavaScript en el <head>. (Excepto en los casos donde los archivos JS se cargan asíncronamente en tus páginas).

Social meta

Facebook OG y Twitter Cards son altamente recomendados para cualquier sitio. Otras etiquetas de medios sociales pueden ser considerados si tienes un objetivo partícular y quieres asegurar la visualización.

  • Facebook Open Graph: Bajo Todos los Facebook Open Graph (OG) fueron probados y ninguno es erroneo o contiene información falsa. Las imágenes necesitan ser de al menos 600 x 315 pixeles, se recomienda 1200 x 630 pixeles.

Nota: Al usar og:image:width y og:image:height se especificaran las dimensiones de la imagen al crawler para que pueda desplegar la imagen inmediatamente sin tener que descargarla y procesarla asíncronamente.

<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Título del contenido">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Descripción aquí">
<meta property="og:site_name" content="Nombre del sitio">
<meta property="og:locale" content="en_US">
<!-- Las siguientes etiquetas son opcionales, pero recomendadas -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
  • Twitter Card: Bajo
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Título del contenido">
<meta name="twitter:description" content="Descripción del contenido menor a 200 caracteres">
<meta name="twitter:image" content="https://example.com/image.jpg">

⬆ volver a arriba

HTML

Mejores prácticas

  • Elementos semánticos HTML5: Alto Los elementos semánticos HTML5 son usados apropiadamente (header, section, footer, main...).

📖 Referencia HTML (fuente en inglés)

  • Páginas de error: Alto Páginas de error 400 y 5xx existen. Recuerda que las páginas de error 5xx necesitan tener su CSS integrado (sin llamadas externas del servidor actual).

  • Noopener: Medio En caso que uses enlaces externos con target="_blank", tu enlace debe tener un atributo rel="noopener"para evitar tab nabbing. Si necesitas dar soporte a versiones antigüas de Firefox, usa rel="noopener noreferrer".

📖 About rel=noopener

  • Limpiar comentarios: Bajo Código innecesario necesita ser removido antes de enviar la página a producción.

Pruebas HTML

  • Obedece al W3C: Alto Todas las páginas necesitan ser aprobadas por el validador W3C para identificar posibles problemas en el código HTML.

🛠 W3C validator

  • HTML Lint: Alto Uso herramientas para ayudarme a analizar cualquier problema que podría tener en mi código HTML.

🛠 Dirty markup

  • Verificador de enlaces: High No hay enlaces rotos en la página, verifica que no tienes ningún error 404.

🛠 W3C Link Checker

  • Prueba de Adblockers: Medium Tu sitio web muesta el contenido correctamente cuando adblockers están habilitados (Puedes incluir un mensaje para sugerir a las personas deshabilitar su adblocker).

⬆ volver a arriba

Webfonts

Notas: Usar fuentes web puede ocasionar retardos en la visualización de textos (Flash Of Unstyled Text/Flash Of Invisible Text), considera tener fuentes de respaldo y/0 usar cargadores de fuentes para controlar el comportamiento.

  • Formato de fuentes: Alto WOFF, WOFF2 y TTF son formatos soportados por todos los navegadores modernos.
  • Tamaño de fuentes: High El tamaño de las fuentes no excede los 2 MB (todas las variantes incluidas).
  • Cargador de fuentes: Low Controlar el comportamiento de carga de fuentes con un cargador de fuentes web

⬆ volver a arriba

CSS

Notas: Echa un vistazo a los Lineamientos CSS y Lineamientos Sass seguidos por la mayoría de los desarrolladores. Si tienes alguna duda acerca de las propiedades CSS, puedes visitar la Referencia CSS.

  • Diseño Web Responsivo: High El sitio wen utiliza diseño web responsivo.
  • CSS Print: Medium Se proporciona una hoja de estilo para impresión y es correcto en cada página.
  • Preprocesador: Medium Tu página utiliza un preprocesador CSS (Sass es recomendado).
  • ID único: High Si utilizas IDs, son únicos en la página.
  • Reinicio de CSS: High Un reinicio de CSS es usado y está actualizado. (Si utilizas algún Framework CSS como Bootstrap o Foundation, el reinicio de CSS ya está implementado.)
  • Prefijos JS: Low Todas las clases (o id- usados en archivos JavaScript) comienzan con js- y no son estilizados dentro del archivo CSS.
<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">
  • CSS incrustado: High Evita a todo costo el CSS inscrustado (directo al HTML): solo usalo por razones válidas (ej: imagen de fondo para un slider, CSS crítico).
  • Vendor prefixes: High Los vendor prefixes son usados y generados de acuerdo con la compatibilidad de tu navegador. (Si utilizas un preprocesador, esta labor se puede automatizar)

🛠 Autoprefixer CSS online

Rendimiento

  • Concatenado: High Los archivos CSS son concatenados en un solo archivo. (No aplica en HTTP/2)
  • Minificado: High Todos los archivos CSS están minificados (estilos en una sola línea).
  • No bloquea renderizado: Medium Los archivos CSS no deben afectar el tiempo carga del DOM.
  • CSS sin utilizar: Low Remover CSS sin utilizar.

Pruebas CSS

  • Stylelint: High Los archivos CSS o SCSS no contienen errores.

  • Diseño web responsivo: High Todas las páginas fueron probadas en los siguientes puntos: 320px, 768px, 1024px (pueden ser más / varia de acuerdo a tus resultados en analítica).

  • Validador CSS: Medium El CSS fue probado y los errores pertinentes fueron corregidos.

🛠 CSS Validator

  • Navegadores de escritorio: High Todas las págunas fueron probadas en todos los navegadores actuales (Safari, Firefox, Chrome, Edge...)
  • Navegadores móviles: High Todas las páginas fueron probadas en todos los navegadores móviles actuales (Navegador nativo, Chrome, Safari...)
  • Sistema Operativo: High Todas las páginas fueron probadas en todos los Sistemoas Operativos actuales (Windows, Android, iOS, Mac).
  • Fidelidad al diseño: Low Dependiendo del proyecto y de la calidad creativa, pueden solicitarte apegarte lo más posible al diseño. Puedes utilizar herramientas para comparar los diseños con la implementación de código y asegurar consistencia.

🛠 Pixel Perfect - Extension para Chrome

  • Dirección de lectura: High Todas las páginas necesitan ser probadas para idiomas LTR y RTL si necesitan soporte.

⬆ volver a arriba

Imágenes

Notas: Para un completo entendimiento de la optimización de imágenes, mira el ebook gratuito Essential Image Optimization de Addy Osmani.

Mejores prácticas

  • Optimización: High Todas las imágesnes están optimizadas para ser renderizadas en el navegador. El formato WebP puede ser utilizado para páginas críticas (como la Página de Inicio).
  • 🛠 Imagemin
  • 🛠 Usa ImageOptim para optimizar tus imágenes gratis.
  • 🛠 Usa Kraken.io una maravillosa alternativa tanto para optimización png o jpg. Hasta 1mb por archivo en plan gratuito.
  • 🛠 TinyPNG optimiza sin perdidas png, apng (png animado) e imágenes jpg. Versiones gratuitas y de pago disponibles.
  • 🛠 ZorroSVG compresion jpg para imágenes transparentes usando enmascarado svg.
  • 🛠 SVGO una herramienta basada en Nodejs para optimisar archivos de gráficos vectoriales.
  • 🛠 SVGOMG herramienta para optimizar archivos svgs en línea.
  • Picture/Srcset: Medium You use picture/srcset to provide the most appropriate image for the current viewport of the user.

  • Retina: Low Proporcionas imágenes para layouts x2 o x3, soporte para retina display.

  • Sprite: Medium Las imágenes pequeñas están en un archivo sprite (en el caso de iconos, es recomedable colocarlos en formato SVG).

  • Ancho y altura: High Todo las etiquetas <img> tienen una altura y ancho establecido (No especificar px o %).

  • Lazy loading: Medium Las imágenes usan lazy loading (solo cargan cuando están en la parte visible del viewport, siempre se proporciona un fallback que no use script).

  • Texto alternativo: High Todas las imágenes tienen un texto alternativo que las describe.

⬆ volver a arriba

JavaScript

Mejores prácticas

  • JavaScript Incrustado: High No tienes JavaScript incrustado (mezclado con tu código HTML).
  • Concatenado: High Los archivos JavaScript están concatenados.
  • Minificado: High Los archivos JavaScript están minificados (puedes agregar el subfijo .min).

Minify Resources (HTML, CSS, and JavaScript)

  • Seguridad JavaScript:

Guidelines for Developing Secure Applications Utilizing JavaScript*

  • noscript tag: Medium Usar la etiqueta <noscript>en el cuerpo del HTML si un script en la página no es soportado o si los scripts están desactivaos en el navegaor. Esto será útil en el renderizado de aplicaciones cliente-servidor pesadas, como React,js, ver ejemplo (fuente en inglés)
<noscript>
  Necesitas habilitar Javascript para visualizar la aplicación.
</noscript>
  • No bloquea el renderizado: Medium Los archivos JavaScript son cargados asíncronamente usando el atributo async o deferidos usando el atributo defer.

📖 Remover Javascript que bloquea el renderizado (fuente en inglés)

  • Modernizr: Low Si necesitas apuntar a alguna característica específica puedes usar Modernizr para agregar clases a tu etiqueta <html>.

🛠 Customize your Modernizr

Pruebas de JavaScript

  • ESLint: High No hay errores marcados por ESLint (basados en tu configuración o reglas de estándares)

⬆ volver a arriba

Seguridad

Scanear verificar tu sitio web

Mejores prácticas

  • HTTPS: Medium HTTPS es usado en cada página y para todo el contenido externo (plugins, imágenes...).
  • HTTP Strict Transport Security (HSTS): Medium La cabecera HTTP está configurada como 'Strict-Transport-Security'.
  • Cross Site Request Forgery (CSRF): High Asegurate que las peticiones hechas a tu servidor son legítimas y oríginadas desde tu sitio web/aplicación para prevenir ataques CSRF.

📖 Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet - OWASP

  • Cross Site Scripting (XSS): High Tu página o sitio web esta libre de posibles problemas XSS.
  • Opciones de Content-Type Medium Previene a Google Chrome e Internet Explorer intentar ataques mime-sniff al content-type de respuestas no declaradas desde el servidor.
  • X-Frame-Options (XFO) Medium Proteje a tus visitantes contra ataques clickkacking.
  • Política de seguridad del contenido: Medium Define cómo es cargado el contenido en tu sitio y desde dónde está permitido cargarlo. Puede ser usado para proteger contra ataques clckjacking.

⬆ volver a arriba

Rendimiento

Mejores prácticas

  • Metas a alcanzar: Medium Tu página debe alcanzar las siguientes metas:
    • La primera visualización significativa suceda en menos de 1 segundo
    • El tiempo para interactuar es menor a 5 segundos para una configuración "promedio" (un dispositivo Android en una red 3G lenta con 400ms RTT y velocidad de transferencia de 400kbps) y menor a 2 segundos para visitas recurrentes.
    • Tamaño de archivo debajo de 170Kb gzipped
  • Minificado: Medium Tu HTML está minificado.

  • Lazy loading: Medium Imágenes, scripts y CSS necesitan cargarse implementando lazy loading para mejorar el tiempo de respuesta de la página actual (Mira los detalles en las secciones respectivas)

  • Tamaño de Cookie: Si estás usando cookies asegurate que cada cookie no exceda los 4096 bytes y tu nombre de dominio no tiene más de 20 cookies.

  • Componentes de terceros: Medium iframes o componentes de terceros que dependan de JS externo (como botones para compartir contenido) son reemplazados por componentes estáticos cuando sea posible, asi se limitan llamadas externas a APIs y se mantiene privada la actividad de los usuarios.

Preparando solicitudes futuras

📖 Explanation of the following techniques

  • Resolución de DNS: Low Los DNS de servicios de terceros que son necesarios son resueltos por adelantado durante el tiempo de inactividad usando dns-prefetch.
<link rel="dns-prefetch" href="https://example.com">
  • Pre-conexión: Low Búsquedas de DNS, TCP handshakes y negociaciones TLS con servicios que serán requeridos pronto son hechos por adelantado durante el tiempo de inactividad usando preconnect.
<link rel="preconnect" href="https://example.com">
  • Prefetching: Low Recursos que se necesitarán pronto (ej. imágenes con lazy loading) son solicitados por adelantado durante el tiempo de inactividad usando prefetch.
<link rel="prefetch" href="image.png">
  • Precarga: Low Recursos necesarios en la página actual (ej. scripts colocados al final de la etiqueta <body>) son solicitados por adelantado usando preload.
<link rel="preload" href="app.js">

📖 Difference between prefetch and preload

Performance testing

  • Google PageSpeed: High Todas tus páginas fueron probadas (no solo la página de inicio) y tienen una calificación de al menos 90/100.

⬆ volver a arriba

Accesibilidad

Notas: Puedes mirar la lista de reproducción A11ycasts with Rob Dodson 📹

Mejores prácticas

  • Mejora progresiva: Medium Las funcionalidad principales, como la navegación y búsquedas, deben funcionar con JavaScript deshabilitado.

📖 Enable / Disable JavaScript in Chrome Developer Tools

  • Contraste de color: Medium El contraste de color debe pasar la recomendación WCAG AA (AAA para móviles).

🛠 Contrast ratio

Encabezados

  • H1: High Todas las páginas tienen una etiqueta H1 la cual no es el título del sitio web.
  • Encabezados: High Los encabezados deben ser usados en el orden correcto (H1 a H6).

📹 Why headings and landmarks are so important -- A11ycasts #18

Puntos de referencia

  • Role banner: High <header> tiene el atributo role="banner".
  • Role navigation: High <nav> tiene el atributo role="navigation".
  • Role main: High <main> tiene el atributo role="main".

📖 Using ARIA landmarks to identify regions of a page

Semántica

  • Tipos de entrada HTML5 específicos son usados: Medium Esto es importante para dispositivos móviles que muestran teclados personalizados y widgets para diferentes tipos.

📖 Mobile Input Types

Formulario

  • Etiqueta: High Una etiqueta <label> es asociada a cada elemento del formulario. En caso de que una etiqueta no pueda ser mostrada, usa aria-label en su lugar.

📖 Using the aria-label attribute - MDN

Pruebas de accesibilidad

  • Pruebas de estándares de accesibilidad: High Usa la herramienta WAVE para probar si tu página respeta los estándares de accesibilidad.

🛠 Wave testing

  • Navegación con teclado: High Prueba tu sitio web utlizando solo tu teclado en un orden previsible. Todos los elementos interactivos son alcanzable y pueden usarse.
  • Screen-reader: Medium Todas las páginas son probadas en un screen reader (VoiceOver, ChromeVox, NVDA o Lynx).
  • Focus style: High Si se deshabilita el estado focus de los elementos, se reemplaza por un estado visible en CSS.

📹 Managing Focus - A11ycasts #22

⬆ volver a arriba

SEO

  • Google Analytics: High Google Analytics está instalado y configurado correctamente.
  • Lógica de encabezados: Medium El texto de encabezado ayuda a entender el contenido en la página actual.
  • sitemap.xml: High Existe un sitemap.xml y fue enviado por Google Search Console (nombrado Google Webmaster Tools anteriormente).
  • robots.txt: High El archivo robots.txt no bloquea páginas.
  • Datos estructurados: High Las páginas usando datos estructurados son probadas y no contienen errores. Los datos estructurados ayudar a los crawlers a entender el contenido en la página actual.
  • Sitemap HTML: Medium Un sitemap HTML es proporcionado y es accesible con enlaces en el footer del sitio web.
  • Enlaces con etiquetas de paginación: Medium Proporcionar rel="prev" y rel="next" para indicar contenido paginado.
<!-- Ejemplo: Enlaces con etiquetas de paginación de la página 2 -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">

⬆ vovler a arriba

Traducción

La Front-End Checklist también está disponible en otros idiomas. ¡Gracias a todos los traductores y a su mágnifico trabajo!

⬆ volver a arriba

Insignia Front-End Checklist

Si quieres mostrar que estás siguiendo las reglas del Front-End Checklist, pon esta insignia en tu archivo README.

➔ Front‑End_Checklist followed

[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)

⬆ volver a arriba

Contribución

Abre un issue o un pull requesto para sugerir cambios o añadir información

Guía

El repositorio del Front-End Checklist consiste en dos ramas:

1. master

Esta rama consiste en el archivo README.md que se refleja automaticamete en el sitio web Front-End Checklist.

2. develop

Esta rama será usada para hacer cambios significativos a la estructura o contenido, de ser necesarios. Es preferible usar la rama master para pequeñas correcciones o añadir un nuevo elemento.

Contribuyentes

Dale un vistazo a todos estos asombrosos contribuyentes.

Autores

David Dias, Geoffrey Signorato, Sandeep Ramgolam and Cédric Poilly.

Licencia

CC0

⬆ volver a arriba