Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

First Commit to Add Spanish Support #386

Merged
merged 7 commits into from
Nov 9, 2019
Merged

First Commit to Add Spanish Support #386

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7824502
Creating the folders and files structure needed to support spanish ve…
Nov 9, 2019
d45eb50
Optimised images with calibre/image-actions
github-actions[bot] Nov 9, 2019
ba631ec
Update src/templates/es/2019/base.html
c-torres Nov 9, 2019
ac69985
Update src/templates/es/2019/base.html
c-torres Nov 9, 2019
91e76f5
Update src/templates/es/2019/base.html
c-torres Nov 9, 2019
cd89ad6
Update src/templates/es/2019/index.html
c-torres Nov 9, 2019
959024b
Update src/templates/es/2019/index.html
c-torres Nov 9, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/language.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ def lang_code(self):
class Language(object):
JAPANESE = _Language('日本語', 'ja', 'JP')
ENGLISH = _Language('English', 'en', 'US')
SPANISH = _Language('Español', 'es', 'ES')

DEFAULT_LANGUAGE = Language.ENGLISH

Expand Down
6 changes: 6 additions & 0 deletions src/static/css/2019.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,12 @@ header .btn + .language-switcher {
color: inherit;
cursor: pointer;
}

.language-switcher option,
.year-switcher option {
color: #1A2B49;
}

.language-switcher select:focus,
.year-switcher select:focus {
border-color: #f2f2f2;
Expand Down
Binary file added src/static/images/es.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
143 changes: 143 additions & 0 deletions src/templates/es/2019/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
{% extends "base.html" %}

{% block styles %}
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i, 900|Poppins:300,400,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/css/2019.css">
{% endblock %}

{% block content%}
{% block header %}
<header class="alt-bg">
<a class="navigation-logo" href="{{ url_for('home', year=year, lang=lang) }}"><img src="/static/images/logo.png" alt="web almanac por http archive" srcset="/static/images/logo@2x.png 2x" /></a>
<nav>
<a href="{{ url_for('table_of_contents', year=year, lang=lang) }}">Tabla de Contenidos</a>
<a href="{{ url_for('contributors', year=year, lang=lang) }}">Contribuidores</a>
<a href="{{ url_for('methodology', year=year, lang=lang) }}">Metodología</a>
{% if supported_years | length > 1 %}
{{ year_switcher() }}
{% endif %}
</nav>
<div class="cta">
{% if request.endpoint == 'home' %}
<a href="{{ url_for('table_of_contents', year=year, lang=lang) }}" class="alt btn">
Empieza a Explorar
</a>
{% endif %}
{{ language_switcher() }}
</div>
<button type="button" class="menu-btn" arial-label="Menú">
<img class="menu-icon" src="/static/images/menu.png" data-src-close="/static/images/close.png"/>
</button>
<nav class="menu">
<a href="{{ url_for('table_of_contents', year=year, lang=lang) }}">Tabla de Contenidos</a>
<a href="{{ url_for('contributors', year=year, lang=lang) }}">Contribuidores</a>
<a href="{{ url_for('methodology', year=year, lang=lang) }}">Metodología</a>
<div class="misc">
<a href="https://httparchive.org/">
<img src="/static/images/ha-home.png" alt="Página de Inicio HTTP Archive" />
</a>
<div class="social-media">
<a href="https://twitter.com/HTTPArchive" class="twitter">
<img src="/static/images/twitter.png" alt="Twitter" />
</a>
<a href="https://github.com/HTTPArchive/almanac.httparchive.org" class="github">
<img src="/static/images/github.png" alt="GitHub" />
</a>
</div>
{{ language_switcher() }}
</div>
</nav>
</header>
{% endblock %}

{% block main %}{% endblock %}

{% block footer %}
<footer class="alt-bg">
<a class="navigation-logo home-logo" href="{{ url_for('home', year=year, lang=lang) }}"><img src="/static/images/logo.png" alt="web almanac por http archive" srcset="/static/images/logo@2x.png 2x" /></a>
<a class="navigation-logo ha-logo" href="https://httparchive.org">
<img src="/static/images/ha-home.png" alt="Página de Inicio HTTP Archive" />
</a>
<nav class="nav-items">
<a href="{{ url_for('table_of_contents', year=year, lang=lang) }}">Tabla de Contenidos</a>
<a href="{{ url_for('contributors', year=year, lang=lang) }}">Contribuidores</a>
<a href="{{ url_for('methodology', year=year, lang=lang) }}">Metodología</a>
</nav>
<div class="language-switcher">{{ language_switcher() }}</div>
<p class="copyright">Copyright © 2019 Web Almanac. Todos los derechos reservados.</p>
<div class="social-media">
<a href="https://twitter.com/HTTPArchive" class="twitter">
<img src="/static/images/twitter.png" alt="Twitter" />
</a>
<a href="https://github.com/HTTPArchive/almanac.httparchive.org" class="github">
<img src="/static/images/github.png" alt="GitHub" />
</a>
</div>
<hr>
<hr>
</footer>
{% endblock %}
{% block scripts %}
<script nonce="{{ csp_nonce() }}">
(function() {
// Language switching
var languageSwitchers = document.querySelectorAll('.language-switcher select');
for (var i = 0; i < languageSwitchers.length; i++) {
languageSwitchers[i].addEventListener('change', function(e) {
if (e.target.value) {
window.location = e.target.value;
}
});
}

// Mobile menu
var menuIcon = document.querySelector('.menu-icon');
var menuIconInitialSrc = document.querySelector('.menu-icon').src;
var menuIconSrcClose = document.querySelector('.menu-icon').dataset.srcClose;

document.querySelector('.menu-btn').addEventListener('click', function() {
var menuOpen = document.body.classList.toggle('menu-open');
menuIcon.src = menuOpen ? menuIconSrcClose : menuIconInitialSrc;
});
})();
</script>
{% endblock %}
{% endblock %}

{% macro language_switcher() %}
{% if supported_languages | length > 1%}
<div class="language-switcher">
{% if language is not none %}
<img src="/static/images/{{ language.lang_code }}.png" class="flag" height="25" width="25" />
{% else %}
<img src="/static/images/English.png" class="flag" height="25" width="25" />
{% endif %}
<select>
{% for l in supported_languages %}
<option
{% if l == language %}selected="selected"{% endif %}
value="{{ url_for(request.endpoint, **get_view_args(lang=l.lang_code)) }}">
{{ l }}
</option>
{% endfor %}
</select>
<img class="dropdown-arrow" src="/static/images/dropdown-arrow.png" alt="open" height="20" width="20" />
c-torres marked this conversation as resolved.
Show resolved Hide resolved
</div>
{% endif %}
{% endmacro %}

{% macro year_switcher() %}
<div class="year-switcher">
<select>
{% for y in supported_years %}
<option
{% if y == year %}selected="selected"{% endif %}
value="{{ url_for('table_of_contents', **get_view_args(year=y)) }}">
{{ y }} Edition
c-torres marked this conversation as resolved.
Show resolved Hide resolved
</option>
{% endfor %}
</select>
<img class="dropdown-arrow" src="/static/images/dropdown-arrow.png" alt="open" height="20" width="20" />
c-torres marked this conversation as resolved.
Show resolved Hide resolved
</div>
{% endmacro %}
187 changes: 187 additions & 0 deletions src/templates/es/2019/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
{% extends "es/2019/base.html" %}

{% block title %}Web Almanac 2019 por HTTP Archive{% endblock %}

{% block description %}Web Almanac 2019 por HTTP Archive es un estado anual de la web que combina las estadísticas y tendencias sin procesar del HTTP Archive con la experiencia de la comunidad web{% endblock %}

{% block meta %}
<meta name="description" content="{{ self.description() }}">

<meta property="og:title" content="{{ self.title() }}">
<meta property="og:url" content="https://almanac.httparchive.org{{ url_for(request.endpoint , year=year, lang=lang) }}">
<meta property="og:image" content="https://almanac.httparchive.org/static/images/home-hero-2019-bg.png">
<meta property="og:image:height" content="734">
<meta property="og:image:width" content="715">
<meta property="og:type" content="article">
<meta property="og:description" content="{{ self.description() }}">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@HTTPArchive">
<meta name="twitter:title" content="{{ self.title() }}">
<meta name="twitter:image" content="https://almanac.httparchive.org/static/images/home-hero-2019-bg.png">
<meta name="twitter:image:alt" content="{{ year }} Web Almanac methodology" />
<meta name="twitter:description" content="{{ self.description() }}">

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"url": "https://almanac.httparchive.org",
"logo": "https://almanac.httparchive.org/static/images/ha.png"
}
</script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Article",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://almanac.httparchive.org{{ url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}"
},
"headline": "{{ self.title() }}",
"image": {
"@type": "ImageObject",
"url": "https://almanac.httparchive.org/static/images/home-hero-2019-bg.png",
"height": 734,
"width": 715
},
"publisher": {
"@type": "Organization",
"name": "Web Almanac by HTTP Archive",
"logo": {
"@type": "ImageObject",
"url": "https://almanac.httparchive.org/static/images/ha.png",
"height": 160,
"width": 320
}
},
"author":
{
"@type": "Person",
"sameas": [
"https://almanac.httparchive.org{{ url_for('contributors', year=year, lang=lang, _anchor='rviscomi') }}",
"https://twitter.com/rick_viscomi",
"https://github.com/rviscomi"
],
"name": "Rick Viscomi"
},
"description": "{{ self.description() }}",
"datePublished": "2019-11-04T12:00:00+00:00:00",
"dateModified": "2019-11-04T12:00:00+00:00:00"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "{{ year }} Home ({{ language }})",
"item": "https://almanac.httparchive.org{{ url_for('home', year=year, lang=lang) }}"
}]
}
</script>
{% endblock %}

{% block styles %}
{{ super() }}
<link rel="stylesheet" href="/static/css/index.css">
{% endblock %}

{% block main %}
<div id="home">
<section class="intro-container">
<div class="intro">
<div class="intro-year">2019</div>
<h1><div class="alt-bg decorative-line"></div>Web Almanac</h1>
<h2>
HTTP Archive informe del<br>
<b>estado de la web</b> anual
</h2>
<p>
Nuestra misión es combinar las estadísticas y tendencias sin procesar del HTTP Archive con la experiencia de la comunidad web. Web Almanac es un informe exhaustivo sobre el estado de la web, respaldado por datos reales y expertos web de confianza. Se compone de 20 capítulos que abarcan aspectos del contenido de la página, la experiencia del usuario, la publicación y la distribución.
</p>
<a href="{{ url_for('table_of_contents', year=year, lang=lang) }}" class="btn">
Empieza a explorar
</a>
</div>
<img class="intro-image-2019" src="/static/images/home-hero-2019.png" alt="Web Almanac edición 2019">
<img class="intro-image" src="/static/images/home-hero.png" alt="Web Almanac edición 2019">
</section>
<section class="featured-chapter">
<div class="featured-chapter-content">
<h2><div class="decorative-line-center"></div>Capítulo Destacado</h2>
<h3>Third Parties</h3>
<blockquote>
La web abierta es vasta, enlazable e interoperable por diseño. La capacidad de tomar la biblioteca compleja de otra persona y usarla en su sitio con un solo elemento <code>&lt;link></code> or <code>&lt;script></code> ha incrementado la productividad de los desarrolladores y ha permitido nuevas e increíbles experiencias web; por otro lado, la inmensa popularidad de unos pocos servicios de terceros seleccionados plantea importantes problemas de rendimiento y privacidad. Este capítulo examina la prevalencia y el impacto del código de servicios de terceros en la web en 2019, los patrones de uso de la web que conducen a la popularidad de las soluciones de servicios de terceros y las posibles repercusiones para el futuro del rendimiento y la privacidad de la web.
</blockquote>
<div class="featured-chapter-content-data">
<div class="featured-chapter-content-data-item">
<div>93%</div>
<div>Páginas con SdT</div>
</div>
<div class="featured-chapter-content-data-item">
<div>49%</div>
<div>Peticiones SdT</div>
</div>
<div class="featured-chapter-content-data-item">
<div>28%</div>
<div>Bytes SdT</div>
</div>
</div>
<a href="{{ url_for('chapter', year=year, chapter='third-parties', lang=lang) }}" class="btn">
Lea el Capítulo Third Parties
</a>
</div>
</section>
<section class="contributors-container alt-bg">
{% set contributors = config.contributors.keys() | length %}
<div class="contributors">
<h2><div class="decorative-line"></div>Contribuidores</h2>
<p>
Web Almanac ha sido posible gracias al arduo trabajo de la comunidad web. {{ contributors }} personas han ofrecido incontables horas en las fases de planificación, investigación, redacción y producción.
</p>
<a href="{{ url_for('contributors', year=year, lang=lang) }}" class="alt btn">
Ver los contribuidores
</a>
</div>
<div class="people">
<div class="people-number">{{ contributors }}</div>
<img id="character-markup" class="character" src="/static/images/character-markup.png" />
<img id="character-star" class="character" src="/static/images/character-star.png" />
<img id="character-hat" class="character" src="/static/images/character-hat.png" />
</div>
</section>
<section class="methodology-container">
<div class="methodology">
<h2><div class="decorative-line-center"></div>Metodología</h2>
<div class="methodology-data">
<div class="websites-tested">
<div>
Sitios Web Analizados
</div>
<div>
5.8M
c-torres marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>
<div class="data-processed">
<div>
Información Procesada
</div>
<div>
20.9 TB
c-torres marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>
</div>
<p class="methodology-info">
A menos que se indique lo contrario, las métricas en los 20 capítulos del Web Almanac provienen del conjunto de datos del HTTP Archive. HTTP Archive es un proyecto administrado por la comunidad que ha estado rastreando cómo se construye la web desde 2010. Utilizando WebPageTest y Lighthouse bajo el capó, se prueban metadatos de aproximadamente 6 millones de sitios web mensualmente y se incluyen en una base de datos pública de BigQuery para su análisis. El conjunto de datos de Julio de 2019 se utilizó como base para las métricas de Web Almanac. Para obtener más información, consulte la página de Metodología.
</p>
<a href="{{ url_for('methodology', year=year, lang=lang) }}" class="alt btn">
Conozca nuestra Metodología
</a>
<img class="methodology-characters" src="/static/images/methodology-characters.png" alt="" />
</div>
</section>
</div>
{% endblock %}