Localization Refresh (#4281)

* Modify test to ignore devsite translated files

* JA

* KO translations

* zh-cn

* pt-br

* id

* es

* clean up

* cookie lang support

* Remove localized book & toc files

appengine_main.py

@@ -61,7 +61,16 @@ def get(self, path):
 class DevSitePages(webapp2.RequestHandler):
     def get(self, path):
         response = None
-        lang = self.request.get('hl', DEFAULT_LANG)
+        langQS = self.request.get('hl', None)
+        langCookie = self.request.cookies.get('hl')
+        if langQS:
+          lang = langQS
+        elif langCookie:
+          lang = langCookie
+        else:
+          lang = DEFAULT_LANG
+        self.response.set_cookie('hl', lang, max_age=3600, path='/')
+
         fullPath = self.request.path
         memcacheKey = fullPath + '?hl=' + lang
         logging.info('GET ' + memcacheKey)

gae/scripts/devsite.js

@@ -2,6 +2,11 @@
 
 (function() {
 
+  function getCookieValue(name, defaultValue) {
+      var value = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
+      return value ? value.pop() : defaultValue;
+  }
+
   function initNavToggles() {
     var elems = document
       .querySelectorAll('.devsite-section-nav .devsite-nav-item-section-expandable');
@@ -14,19 +19,8 @@
   }
 
   function initLangSelector() {
-    var currentLang = 'en';
+    var currentLang = getCookieValue('hl');
     var langSelector = document.querySelector('#langSelector');
-    var queryParams = window.location.search;
-    if (queryParams.length > 0) {
-      queryParams = queryParams.substring(1).split('&');
-      for (var i = 0; i < queryParams.length; i++) {
-        var qp = queryParams[i];
-        if (qp.indexOf('hl=') === 0) {
-          currentLang = qp.replace('hl=', '');
-          break;
-        }
-      }
-    }
     var langOptions = langSelector.querySelectorAll('option');
     langOptions.forEach(function(opt) {
       if (opt.value === currentLang) {

gulp-tasks/test.js

@@ -348,6 +348,11 @@ function testMarkdown(filename, contents, options) {
     let position;
     let isInclude = wfRegEx.RE_MD_INCLUDE.test(contents);
 
+    if (wfRegEx.RE_DEVSITE_TRANSLATION.test(contents)) {
+      options.enforceLineLengths = false;
+      options.lastUpdateMaxDays = null;
+    }
+
     // Verify there are no dots in the filename
     let numDots = filename.split('.');
     if (numDots.length !== 2) {

gulp-tasks/wfRegEx.js

@@ -33,6 +33,7 @@ var RE_INCLUDES = /^{%\s?include ["|'](.*)["|']\s?%}/gm;
 
 var RE_MD_INCLUDE = /^{#\s?wf_md_include\s?#}/m;
 var RE_AUTO_GENERATED = /^{#\s?wf_auto_generated\s?#}/m;
+var RE_DEVSITE_TRANSLATION = /^{# wf_devsite_translation #}/m;
 
 
 function getMatch(regEx, content, defaultResponse) {
@@ -75,3 +76,4 @@ exports.RE_INCLUDES = RE_INCLUDES;
 exports.RE_INCLUDE_MD = RE_INCLUDE_MD;
 exports.RE_INCLUDE_FILE = RE_INCLUDE_FILE;
 exports.RE_AUTO_GENERATED = RE_AUTO_GENERATED;
+exports.RE_DEVSITE_TRANSLATION = RE_DEVSITE_TRANSLATION;

src/content/es/_common-links.md

@@ -0,0 +1,13 @@
+{% comment %}
+Common Links File - Do NOT add anything except link references to the file!
+
+Links must be added in alphebetical order, using fully qualified paths
+For example:
+[linkId]: /path/to/link "title of link"
+
+{# wf_auto_generated #}
+
+{% endcomment %}
+
+[service-worker-primer]: /web/fundamentals/getting-started/primers/service-workers "Service Workers: An Introduction"
+

src/content/es/billions/_index.yaml

@@ -0,0 +1,150 @@
+# ATTENTION - changes made to this file not in GitHub will be over written!
+
+project_path: /web/_project.yaml
+book_path: /web/_book.yaml
+landing_page:
+  custom_css_path: /web/styles/wf-root.css
+
+  header:
+    description: >
+      <h2 class="wf-header-title">Cómo crear compilaciones para miles de millones de usuarios</h2>
+      <p>
+        Las próximas miles de millones de personas que se conecten se diferenciarán en todos los aspectos: ubicación, experiencia cultural, conocimientos en computación, acceso de conectividad y tipos de dispositivos.
+      </p> 
+  rows:
+
+  - classname: devsite-landing-row-50
+    items:
+    - description: >
+        <h4>Los próximos mil millones de usuarios usarán dispositivos móviles en casi todos los casos.</h4>
+        <p>
+          Esto presenta desafíos únicos para desarrolladores web que deben abandonar el primer enfoque limitado para dispositivos móviles a favor de una estrategia móvil integral.
+        </p>
+        <p>
+          Puedes dirigir estos desafíos centrándote en unas áreas principales que se indican a continuación.
+        </p>
+      youtube_id: E6hGubMkNfM
+
+  # TWO
+  - classname: devsite-landing-row-no-image-background
+    items:
+    - heading: Realiza diseños para conectividad fluida
+      description: >
+        El ancho de banda bajo y la conectividad intermitente son la norma para mucha gente que accede a la web. La mayoría de la gente en línea aún usa sistemas 2G o “3G” que se reducen a 2G. Incluso para 2020, más del 10% de los usuarios aún contará con el sistema 2G. Muchos smartphones se usan sin conexión y los usuarios normalmente activan el modo de avión para evitar el consumo de datos.
+      image_path: images/connectivity.png
+      buttons:
+      - label: Haz pruebas emulando un ancho de banda bajo y una latencia alta
+        path: /web/fundamentals/performance/poor-connectivity/#testing
+        classname: wf-small-link
+      - label: Controla las conexiones poco confiables y el “lie-fi""
+        path: /web/fundamentals/performance/poor-connectivity/#lie-fi
+        classname: wf-small-link
+      - label: Diseña para modos sin conexión
+        path: /web/fundamentals/getting-started/codelabs/offline/
+        classname: wf-small-link
+      - label: Reduce el número de solicitudes de recursos
+        path: /web/fundamentals/performance/optimizing-content-efficiency/eliminate-downloads
+        classname: wf-small-link
+      - label: Haz que las instalaciones y las actualizaciones sean lo más pequeñas y rápidas posible
+        path: /web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer
+        classname: wf-small-link
+    - heading: Conserva el uso de datos
+      description: >
+        El alto costo de los datos a menudo representa para el acceso una barrera mayor que una conectividad deficiente. Los usuarios de dispositivos móviles son conscientes del costo; incluso los planes “ilimitados” pueden ser caros con servicio de itinerancia o si se aplican tarifas inesperadas. Muchos usuarios móviles controlan sus gastos, y tienen una buena
+        razón: por ejemplo, en India, un plan de datos de 500 MB cuesta lo mismo que 17 horas de trabajo a un salario mínimo.
+      image_path: images/cost.png
+      buttons:
+      - label: Entiende el costo de cargar los componentes de una app o de una página
+        path: /web/fundamentals/design-and-ui/responsive/content#weight
+        classname: wf-small-link
+      - label: Reduce la cantidad de datos que se requieren para la interacción
+        path: /web/fundamentals/performance/optimizing-content-efficiency/
+        classname: wf-small-link
+      - label: "Simplifica la navegación: ayuda a los usuarios a obtener lo que quieren"
+        path: /web/fundamentals/getting-started/principles/#home-page-and-site-navigation
+        classname: wf-small-link
+      - label: Prioriza la visualización de contenido
+        path: /web/fundamentals/performance/critical-rendering-path/
+        classname: wf-small-link
+
+  # TWO
+  - classname: devsite-landing-row-no-image-background
+    items:
+    - heading: Reduce el consumo de batería
+      description: >
+        Mucha gente, incluso en áreas urbanas, no tiene acceso a un suministro de energía confiable y accesible. Esto hace que la conservación de energía se convierta en un factor crítico en el diseño de las apps y del contenido en su totalidad.
+      image_path: images/consumption.png
+      buttons:
+      - label: Evita la repetición de dibujado, los reprocesamientos y las reorientaciones necesarias
+        path: /web/tools/chrome-devtools/rendering-tools/forced-synchronous-layouts
+        classname: wf-small-link
+      - label: Evita las animaciones de IU costosas
+        path: /web/fundamentals/design-and-ui/animations/#avoid-animating-expensive-properties/
+        classname: wf-small-link
+      - label: "Evita el uso de la radio: elimina descargas innecesarias"
+        path: /web/fundamentals/performance/optimizing-content-efficiency/eliminate-downloads
+        classname: wf-small-link
+      - label: Reduce las acciones requeridas del usuario para acceder al contenido
+        path: /web/fundamentals/getting-started/principles/
+        classname: wf-small-link
+      - label: Evita las animaciones costosas
+        path: /web/fundamentals/design-and-ui/animations/animations-and-performance/
+        classname: wf-small-link
+
+    - heading: Aplica optimizaciones conforme a la capacidad de los dispositivos
+      description: >
+        Las especificaciones bajas son la norma. A nivel global, la mayoría de los usuarios nuevos de Internet tienen dispositivos de bajo costo
+        con hardware básico: procesadores de un solo núcleo, pantallas de 4", memoria limitada y almacenamiento limitado.
+      image_path: images/capability.png
+      buttons:
+      - label: Cubre la demanda para una variedad de ventanas de visualización y dispositivos
+        path: /web/fundamentals/getting-started/your-first-multi-screen-site/
+        classname: wf-small-link
+      - label: "Diseña para memoria y CPU limitados: reduce y optimiza"
+        path: /web/fundamentals/performance/
+        classname: wf-small-link
+
+
+
+  # THREE
+  - classname: devsite-landing-row-no-image-background
+    items:
+    - heading: Crea contenido para varios dispositivos
+      description: >
+        Los diseños grandes y el contenido con gráficos cargados frustran a los usuarios y hacen que pierdan el interés en usar tu app o tu sitio. Algunos usuarios saltean y otros deliberadamente evitan el contenido que es demasiado ancho o demasiado alto y el exceso de contenido agrega carga a la página y costo por consumo de datos.
+      image_path: images/content.png
+      buttons:
+      - label: Diseña contenido que funcione bien en los diferentes tamaños de ventanas de visualización
+        path: /web/fundamentals/design-and-ui/responsive/content#viewport
+        classname: wf-small-link
+      - label: Elimina el contenido redundante
+        path: /web/fundamentals/design-and-ui/content/redundant/
+        classname: wf-small-link
+      - label: Redacta tu contenido pensando en las plataformas móviles
+        path: /web/fundamentals/design-and-ui/content/write/
+        classname: wf-small-link
+      - label: Considera usar AMP HTML
+        path: https://www.ampproject.org/
+        classname: wf-small-link
+    - heading: "Transacciones y monetización: piensa a escala global"
+      description: >
+        Mucha gente que usa la Web no puede acceder a los sistemas de pagos. Muchos usuarios a nivel mundial no tienen cuentas bancarias y no usan tarjetas de crédito; esto incluye a un 8% de los hogares de EE.UU. Muchos sistemas de pagos no funcionan bien en pequeñas ventanas de visualización o con conectividad poco confiable.
+      image_path: images/monetization.png
+      buttons:
+      - label: Simplifica las transacciones
+        path: /web/fundamentals/getting-started/principles/commerce-and-conversion/
+        classname: wf-small-link
+      - label: Simplifica los formularios
+        path: /web/fundamentals/design-and-ui/input/forms/
+        classname: wf-small-link
+      - label: Crea diseños con una orientación flexible, que se adapte a pantallas pequeñas
+        path: /web/fundamentals/getting-started/principles/#usability-and-form-factor
+        classname: wf-small-link
+    - heading: Contempla la localización al realizar planificaciones
+      description: >
+        La localización te puede ayudar a acceder a mercados nuevos. Muchos sitios web solo se publican en inglés, pero este no es el primer idioma de la mayoría de la gente en línea. Solo un 5,52% de la población mundial tiene el inglés como lengua materna y puede suceder que las convenciones culturales europeas o estadounidenses no sean familiares ni intuitivas. Las instrucciones o solicitudes que son concisas y compactas en inglés pueden resultar verbosas y chocantes en otros idiomas.
+      image_path: images/localization.png
+      buttons:
+      - label: Adapta la arquitectura de tu sitio para habilitar la localización
+        path: https://support.google.com/webmasters/answer/182192/
+        classname: wf-small-link