Contenido
Google Maps prueba el rediseño de su interfaz con estos cambios
La tecnológica estadounidense continúa trabajando para mejorar la experiencia de los usuarios en la aplicación
// ------------------------------------------------------------------------------------------------------------------------------- // PHOTOSWIPE
var initPhotoSwipeFromDOM = function(gallerySelector) {
// parse slide data (url, title, size ...) from DOM elements // (children of gallerySelector) var parseThumbnailElements = function(el) { var thumbElements = el.childNodes, numNodes = thumbElements.length, items = [], figureEl, linkEl, size, item;
for(var i = 0; i < numNodes; i++) {
figureEl = thumbElements[i]; //
// include only element nodes if(figureEl.nodeType !== 1) { continue; }
linkEl = figureEl.children[0]; // element
size = linkEl.getAttribute('data-size').split('x');
// create slide object item = { src: linkEl.getAttribute('href'), w: parseInt(size[0], 10), h: parseInt(size[1], 10) };
if(figureEl.children.length > 1) {
//
if(linkEl.children.length > 0) {
// thumbnail element, retrieving thumbnail url
item.msrc = linkEl.children[0].getAttribute('src');
}
item.el = figureEl; // save link to element for getThumbBoundsFn items.push(item); }
return items; };
// find nearest parent element var closest = function closest(el, fn) { return el && ( fn(el) ? el : closest(el.parentNode, fn) ); };
// triggers when user clicks on thumbnail var onThumbnailsClick = function(e) { e = e || window.event; e.preventDefault ? e.preventDefault() : e.returnValue = false;
var eTarget = e.target || e.srcElement;
// find root element of slide var clickedListItem = closest(eTarget, function(el) { return (el.tagName && el.tagName.toUpperCase() === 'FIGURE'); });
if(!clickedListItem) { return; }
// find index of clicked item by looping through all child nodes // alternatively, you may define index via data- attribute var clickedGallery = clickedListItem.parentNode, childNodes = clickedListItem.parentNode.childNodes, numChildNodes = childNodes.length, nodeIndex = 0, index;
for (var i = 0; i < numChildNodes; i++) { if(childNodes[i].nodeType !== 1) { continue; } if(childNodes[i] === clickedListItem) { index = nodeIndex; break; } nodeIndex++; } if(index >= 0) { // open PhotoSwipe if valid index found openPhotoSwipe( index, clickedGallery ); } return false; };
// parse picture index and gallery index from URL (#&pid=1&gid=2) var photoswipeParseHash = function() { var hash = window.location.hash.substring(1), params = {};
if(hash.length < 5) { return params; } var vars = hash.split('&'); for (var i = 0; i < vars.length; i++) { if(!vars[i]) { continue; } var pair = vars[i].split('='); if(pair.length < 2) { continue; } params[pair[0]] = pair[1]; } if(params.gid) { params.gid = parseInt(params.gid, 10); } return params; }; var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) { var pswpElement = document.querySelectorAll('.pswp')[0], gallery, options, items; items = parseThumbnailElements(galleryElement); // define options (if needed) options = { // define gallery index (for URL) galleryUID: galleryElement.getAttribute('data-pswp-uid'), getThumbBoundsFn: function(index) { // See Options -> getThumbBoundsFn section of documentation for more info var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail pageYScroll = window.pageYOffset || document.documentElement.scrollTop, rect = thumbnail.getBoundingClientRect();
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width}; }
};
// PhotoSwipe opened from URL if(fromURL) { if(options.galleryPIDs) { // parse real index when custom PIDs are used // http://photoswipe.com/documentation/faq.html#custom-pid-in-url for(var j = 0; j < items.length; j++) { if(items[j].pid == index) { options.index = j; break; } } } else { // in URL indexes start from 1 options.index = parseInt(index, 10) - 1; } } else { options.index = parseInt(index, 10); } // exit if index not found if( isNaN(options.index) ) { return; } if(disableAnimation) { options.showAnimationDuration = 0; } // Pass data to PhotoSwipe and initialize it gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options); gallery.init(); }; // loop through all gallery elements and bind events var galleryElements = document.querySelectorAll( gallerySelector ); for(var i = 0, l = galleryElements.length; i < l; i++) { galleryElements[i].setAttribute('data-pswp-uid', i+1); galleryElements[i].onclick = onThumbnailsClick; } // Parse URL and open gallery if it contains #&pid=3&gid=1 var hashData = photoswipeParseHash(); if(hashData.pid && hashData.gid) { openPhotoSwipe( hashData.pid , galleryElements[ hashData.gid - 1 ], true, true ); } }; // execute above function initPhotoSwipeFromDOM('.my-gallery'); // ====================================== // FIN SCRIPTS PHOTOSWIPE // ======================================
MADRID (Portaltic/EP).- Google comenzó a probar un rediseño de su interfaz de Google Maps en dispositivos Android, con el que da protagonismo a la pantalla del mapa e introduce esquinas redondeadas para las ventanas emergentes, además de un botón para facilitar su cierre.
La tecnológica estadounidense continúa trabajando para mejorar la experiencia de los usuarios en la aplicación, como con las nuevas funciones basadas en Inteligencia Artificial (IA) que, según se pudo conocer en abril, llegarán para ofrecer características como el descubrimiento de lugares.
Ahora, Google está probando la modificación de la interfaz de Google Maps en dispositivos Android, de cara a ofrecer más contexto e información en un golpe de vista, así como para dar más prioridad a los propios mapas.
En este sentido, uno de los aspectos que ha cambiado Google es que la pantalla del mapa estará siempre visible, aunque sea solo un trozo, de manera que el mapa siempre esté al alcance de los usuarios con un solo toque.
Es decir, aunque se abran ventanas de información o se esté navegando entre distintas opciones, por ejemplo, a la hora de descubrir nuevos lugares con el apartado 'Lo último en la zona', estas ventanas no ocuparán la pantalla entera como hacían hasta ahora, sino que se mostrarán como ventanas emergentes.
Igualmente, las ventanas y los menús ocuparán menos espacio y dispondrán de esquinas redondeadas, que ofrecen un aspecto más marcado de ventana emergente, incidiendo en la intención de evitar que ocupen toda la pantalla y que se continúe mostrando el mapa de fondo.
Además, las ventanas emergentes ahora pueden cerrarse de forma sencilla para que los usuarios puedan volver rápidamente al mapa, con tan solo pulsar en un nuevo icono en forma de 'X' situado junto al botón de compartir, en la esquina superior derecha de la ventana emergente.
Así lo ha dado a conocer el medio 9to5Google, que ha identificado estas novedades implementadas en la interfaz para dispositivos Android gracias a una actualización del lado del servidor a la que ha tenido acceso.
El mismo medio ha señalado que, a la hora de buscar una ruta para un destino concreto, Google ha cambiado el lugar de las distintas opciones de transporte -andando, en coche, en transporte público o bicicleta, entre otras- introduciéndolas en la ventana inferior de indicaciones.
Es decir, ahora no aparecen en la parte superior de la pantalla, en la ventana en la que se introducen las direcciones de la ruta, si no que se han movido a la parte inferior de la pantalla para mejorar la accesibilidad y la visibilidad. Por tanto, se sitúan encima de la información de cada posible ruta.
Por el momento, estas novedades aún no se han implementado de forma generalizada en la versión 11.127.x de Google Maps para dispositivos Android, por lo que, según 9to5Google se trata de un rediseño en pruebas.
Comentarios
Otras Noticias
// Obtener todos los elementos con clase .col-md-12 var colElements = document.querySelectorAll('.col-md-12');
// Iterar sobre cada elemento colElements.forEach(function(element) { // Verificar si tiene un hijo inmediato con clase .titulo-region var tituloRegion = element.querySelector('.titulo-region');
if (tituloRegion) { // Agregar la clase .is-sticky al elemento padre element.classList.add('is-sticky'); } });
// Obtener el elemento article dentro de .fila-especial-v2 .p50 var articleElement = document.querySelector('.home .fila-especial-v2 .p50 article');
// Obtener el texto del elemento .z-foto .bajada p var bajadaText = articleElement.querySelector('.z-foto .bajada p').textContent;
// Crear un nuevo elemento para mostrar el texto obtenido var textoElement = document.createElement('p'); textoElement.textContent = bajadaText;
// Obtener el elemento .z-txt .titulo dentro del article var tituloElement = articleElement.querySelector('.z-txt .titulo');
// Insertar el nuevo elemento al final del article articleElement.appendChild(textoElement);
Cortesía de Proceso.
Dejanos un comentario: