Chrome Dev Summit 2021 | Keynote: O que há de novo no Chrome

[0:24] Olá, e bem-vindo a um Chrome Dev Summit 2021 muito virtual. Sou Ben, e nos próximos minutos, meus colegas e eu, junto com alguns convidados, compartilharemos alguns dos destaques do nosso trabalho no último ano para melhorar a web. Em 2008, o Chrome lançou uma visão de que a web poderia ser mais do que apenas documentos ricos, que poderia permitir aplicativos rápidos, seguros e poderosos em todos os dispositivos, disponíveis instantaneamente com apenas um clique em um link. Essa visão da web tornou-se mais relevante do que nunca durante a pandemia, à medida que pessoas em todo o mundo percebem o quão poderosa a plataforma web se tornou e recorrem cada vez mais à web e ao seu navegador para realizar tarefas diárias.

[1:07] E o sucesso contínuo da web só é possível porque ela continuou a evoluir ao longo dos anos, adaptando-se à medida que a tecnologia avança e as expectativas das pessoas mudam. Como nós do Google ajudamos a evoluir a web, buscamos transparência e abertura em tudo o que fazemos, colaborando estreitamente com desenvolvedores, usuários e o restante do ecossistema. Agora, este tema da evolução da web é o central para este vídeo, e vamos destacar vários exemplos que representam o progresso contínuo da web.

[1:43] Um dos mais importantes desses temas vem do feedback que recebemos consistentemente de desenvolvedores web, tanto por meio de pesquisas quanto de conversas individuais, e esse tema é a importância da compatibilidade entre navegadores. Agora, é claro, esse tema não é novo, e ao longo dos anos, a equipe do Chrome se juntou a outros em várias iniciativas para ajudar. Exemplos recentes incluem o Web Platform Test Project, que é um conjunto abrangente de testes entre navegadores para novos recursos da plataforma web, hospedado no GitHub, e a iniciativa Open Web Docs que reúne uma grande coalizão para contribuir colaborativamente com a documentação da plataforma web hospedada na Mozilla's Developer Network.

[2:25] Este ano, adicionamos uma nova iniciativa à lista, um esforço entre navegadores chamado Compat 2021 que se concentra em melhorar a compatibilidade em cinco áreas-chave da web, todas relacionadas, surpreendentemente, a CSS. Para medir nosso progresso, a equipe do Compat 2021 conseguiu usar o projeto Web Platform Test mencionado anteriormente para quantificar pontuações de compatibilidade para essas áreas nas versões de desenvolvimento mais recentes do Chrome, Edge, Firefox e Safari.

[2:58] Agora, embora ainda não tenhamos terminado, já vimos melhorias significativas desde março, e continuaremos pressionando para tornar a web muito mais compatível nessas e em outras áreas críticas. Outra área em que a web está evoluindo é a privacidade, à medida que procuramos restringir práticas de rastreamento de terceiros, preservando recursos importantes e críticos que permitem um ecossistema web vibrante e global. Para nos contar mais, gostaria de apresentar minha colega Barb. Obrigado, Ben.

[3:30] Acreditamos que é importante que as pessoas tenham controle de suas informações, incluindo sua atividade online. A maioria dos usuários também acredita que isso é importante, com preocupações com privacidade cada vez mais orientando as escolhas sobre o que as pessoas fazem online. Também vemos regulamentações em todo o mundo aumentando rapidamente os requisitos de privacidade. E, no entanto, é difícil para os desenvolvedores atender às crescentes expectativas de privacidade, quando tantos recursos dependem de cookies de terceiros e outros mecanismos de rastreamento entre sites que não foram projetados com a privacidade em mente.

[4:07] Precisamos de novas tecnologias para uma web moderna e focada em privacidade, e é disso que trata o Privacy Sandbox. Estamos trabalhando com a comunidade web e partes interessadas do setor para desenvolver novas tecnologias que preservam a privacidade e que possam apoiar um ecossistema saudável e sustentável. Isso inclui APIs criadas especificamente para dar suporte à publicidade, que é uma parte crítica do ecossistema e financia grande parte do conteúdo da web, bem como muitos outros recursos de que os sites modernos precisam, como detecção de fraudes, identidade ou conteúdo personalizado para o dispositivo do usuário.

[4:46] Agora, vamos levar um minuto para esclarecer o que queremos dizer com APIs criadas especificamente. Muitos dos casos de uso que acabei de mencionar nunca foram realmente incorporados à plataforma web, mas foram sobrepostos a ela usando tecnologias de uso geral, como cookies de terceiros. O navegador não tem como saber se você está usando cookies de terceiros para algo útil, como fornecer uma experiência personalizada ou manter um usuário conectado, ou para rastreamento entre sites. Ao projetar APIs para cada caso de uso específico, podemos garantir proteções de privacidade adequadas, dar às pessoas controles mais úteis e, idealmente, tornar cada API melhor no que faz ao longo do tempo.

[5:26] Uma vez que essas novas APIs estejam em vigor, garantiremos que os desenvolvedores tenham tempo para adotá-las, para que possamos eliminar com segurança o suporte a cookies de terceiros no Chrome enquanto continuamos nosso trabalho para mitigar outros tipos de rastreamento, para que o rastreamento entre sites não simplesmente mude de cookies de terceiros para métodos encobertos. Para tornar este projeto complexo mais fácil de acompanhar, estamos compartilhando o progresso em dois lugares. privacysandbox.com explica a visão, os objetivos e os conceitos por trás desta iniciativa.

[5:57] Ele também inclui uma linha do tempo de alto nível que atualizamos todos os meses. A linha do tempo vincula cada tecnologia que estamos trabalhando para testar e lançar, e apresenta um plano de estágios para eliminar gradualmente os cookies de terceiros no Chrome. O segundo recurso é a seção Privacy Sandbox em developer.chrome.com. Aqui, você encontrará mais detalhes técnicos e orientação de implementação, incluindo um blog com as últimas atualizações para desenvolvedores. Acabamos de adicionar um post com todos os links e atualizações desta sessão.

[6:29] Agora, falamos muito sobre a importância da colaboração neste projeto, e gostaria de mostrar como isso se parece em cada estágio de desenvolvimento. Vou mencionar algumas APIs como exemplos, mas a ideia mais ampla é ilustrar como o envolvimento do ecossistema está moldando este trabalho. Esse processo será familiar para muitos de vocês na comunidade de desenvolvimento web, mas o Privacy Sandbox está trazendo muitos novos participantes para esse processo, incluindo partes interessadas do setor que usarão essas APIs criadas especificamente e cuja experiência é crítica em seu desenvolvimento.

[7:06] O primeiro estágio do processo é a discussão, onde qualquer pessoa pode propor e opinar sobre ideias para novas tecnologias. Houve dezenas de propostas de preservação de privacidade oferecidas pelo Chrome e outros nos últimos dois anos. Todas estão online, para que você possa lê-las, fazer perguntas, oferecer ideias para melhorá-las e ver o que os outros estão dizendo. Para encontrar conversas ao vivo onde todas as soluções propostas estão sendo discutidas e debatidas juntas, há vários grupos do W3C que você pode ingressar ou monitorar, dependendo dos tipos de casos de uso nos quais você está interessado.

[7:40] Aqui está um exemplo para ilustrar o quão envolvida essa etapa de discussão pode ficar. O FLEDGE é uma proposta para oferecer suporte à publicidade baseada em interesses sem rastreamento entre sites. Com contribuições valiosas de defensores da privacidade e de muitas partes interessadas do setor, o FLEDGE evoluiu a partir de duas propostas anteriores, com mais de 100 organizações participando de reuniões do W3C para ajudar a refinar a versão atual e mais de 200 tópicos de discussão online. Também houve mais de meia dúzia de outras propostas no mesmo espaço de solução.

[8:12] Por meio da incubação contínua, esperamos chegar a um consenso sobre um caminho a seguir e, ao mesmo tempo, estamos iniciando os testes de desenvolvedores para a versão inicial do FLEDGE por trás de uma flag no Chrome, para que os desenvolvedores possam colocá-la em prática. Nem todas essas propostas passarão por um período de incubação tão intenso. Algumas avançarão muito mais rápido, mas há muita inovação acontecendo aqui. São ideias novas, e pode ser necessário muito trabalho para acertá-las. A próxima etapa é o teste. Já existem algumas propostas prontas para testes de desenvolvedores hoje, e você pode esperar mais à medida que avançamos para 2022.

[8:49] E não se surpreenda ao ver alguns ciclos iterativos de discussão e teste. O teste é importante justamente porque revela problemas ou lacunas que podem exigir mais trabalho. Os testes no Chrome geralmente começam com um recurso por trás de uma flag para os desenvolvedores testarem localmente. Isso significa que você precisa ativá-lo no seu navegador para experimentá-lo. Esse código costuma ser muito recente, então você pode esperar encontrar alguns problemas. E depois os Origin Trials, cada um com duração limitada e uma população limitada de usuários do Chrome.

[9:21] Os Origin Trials são públicos e abertos a todos os desenvolvedores. Você só precisa se registrar para optar por participar com seu site ou serviço. É quando recebemos feedback acionável dos desenvolvedores sobre o que funciona, o que não funciona e onde estão essas lacunas. O sucesso nesta etapa depende não apenas de os desenvolvedores fazerem testes práticos, mas também de estarem dispostos a compartilhar o que aprendem. Por exemplo, o Yahoo! Japan publicou recentemente uma análise detalhada do teste da API Attribution Reporting, destacando áreas para melhoria, como a necessidade de uma maneira melhor de entregar relatórios de conversão, que agora foi adicionada.

[9:59] Esses são o tipo de coisa que aparece quando os desenvolvedores colocam as mãos em uma API. Também esperamos ver empresas falando sobre sua abordagem de teste e como pretendem usar uma API. Durante o Origin Trial da primeira versão do FLoC, uma proposta para oferecer suporte à publicidade e conteúdo baseados em interesses, ficamos satisfeitos em ver empresas como a CafeMedia publicando suas análises e insights para que outros pudessem ver o que aprenderam. E os testes no Chrome não são a única maneira de explorar como as novas tecnologias podem funcionar.

[10:30] Algumas empresas também estão construindo simulações com base nos conceitos do Privacy Sandbox. A plataforma de publicidade Criteo realizou recentemente uma competição com mais de 150 equipes testando diferentes modelos de aprendizado de máquina para avaliar como conceitos de privacidade diferencial, como inserção de ruído e agregação, podem impactar o desempenho da publicidade. É útil examinar esses conceitos, pois eles estão subjacentes a várias das APIs do Privacy Sandbox. Somos verdadeiramente gratos às empresas que investem seu tempo para testar essas novas tecnologias e por estarem dispostas a compartilhar suas perspectivas e aprendizados publicamente.

[11:09] Agora, uma vez que uma API é testada e está pronta para uso geral no Chrome, anunciaremos o lançamento e garantiremos que a documentação pública esteja pronta para adoção em escala. O User-Agent Client Hints, ou UA-CH, foi lançado no Chrome no início deste ano e agora está pronto para escalar. Faz parte da linha de trabalho do Privacy Sandbox para reduzir o rastreamento encoberto, como a impressão digital do navegador. Mas primeiro, vamos voltar e dar uma olhada no mecanismo legado que ele está substituindo. Assim como os cookies, a string User-Agent é um recurso antigo da web.

[11:43] Por padrão, ela fornece muitas informações sobre o navegador e o dispositivo do usuário, tornando-se uma superfície prontamente disponível para impressão digital. Ela também tem um formato que pode ser uma dor de cabeça para analisar. Anunciamos recentemente planos para reduzir a granularidade das informações disponíveis na string User-Agent do Chrome a partir de abril de 2022. Para obter essas informações no futuro, você precisará fazer a transição para o User-Agent Client Hints. Ele fornecerá algumas informações por padrão, o que pode cobrir a maioria dos seus casos de uso, com informações mais detalhadas sob solicitação em um formato direto.

[12:18] Ficamos felizes em fazer essa melhoria ergonômica para os desenvolvedores, ao mesmo tempo em que movemos a maioria das informações do User-Agent de um modelo disponível por padrão para um modelo sob solicitação. Dessa forma, você pode solicitar apenas as informações de que precisa, o que é uma boa prática hoje e o padrão que queremos definir para o futuro. Então, vamos voltar à linha do tempo que mostrei há um momento. A redução gradual da string UA começa em abril de 2022. A solução substituta, o User-Agent Client Hints, foi lançada e está pronta para adoção em escala desde março.

[12:54] Portanto, você pode começar a testar e migrar para ele a qualquer momento. Para ajudar nisso, há um Origin Trial para optar por participar antecipadamente da string UA reduzida, para que você possa ver como será esse estado futuro. E se acontecer de você precisar de mais tempo, poderá optar por continuar usando a string User-Agent como está até março de 2023. Os detalhes deste plano estão todos online, e embora a etapa de adoção em escala possa não ser exatamente assim para outras APIs, você pode esperar consistência na abordagem geral.

[13:31] Continuaremos a explicar o que está acontecendo, fornecer o máximo de visibilidade possível, incentivar seu envolvimento e ouvir sua opinião. Agradecemos todas as contribuições para este projeto complexo e de vital importância, enquanto buscamos criar recursos duráveis para a web com ampla utilidade e fortes proteções de privacidade para os usuários. Vale a pena esse esforço para acertar as fundações. E Ben, vou devolver a palavra para você. Obrigada, Barb.

[14:02] O Privacy Sandbox é um dos maiores esforços que já vimos para evoluir a web. Acreditamos que é de importância crítica ajudar a garantir a saúde e o sucesso contínuos da web nas próximas décadas. O próximo tema que destacaremos são as capacidades da web. Nos últimos anos, a web ganhou várias novas integrações poderosas que permitem que os aplicativos da web façam mais. Estivemos fortemente envolvidos nisso com o Projeto Fugu, colaborando com outros no ecossistema para desbloquear coisas como acesso seguro ao sistema de arquivos e integração rica com lançadores do sistema operacional.

[14:37] E à medida que a web ganhou essas novas capacidades, os desenvolvedores as adotaram de maneiras atraentes. Para nos contar mais, gostaria de apresentar minha colega Aanchal. Obrigada, Ben. Antes de começarmos, reserve alguns segundos para olhar ao seu redor. Não, sério. Olhe atentamente para o que está à sua volta. A maioria de vocês provavelmente está em casa agora, um lugar que, nos últimos dois anos, se transformou em um centro movimentado e impulsionado pela tecnologia.

[15:08] Nossos filhos transformaram a sala de jantar em uma sala de aula virtual, transformamos a cozinha em nosso escritório, e todos estamos nos conectando com familiares e amigos em salas de estar ao redor do mundo. A mudança para o virtual teve um impacto profundo em como vivemos e trabalhamos. Em particular, é o mundo do vídeo e da criação que viu uma mudança poderosa nas normas. De criadores casuais a designers profissionais, há edição, compartilhamento e colaboração em tempo real, mas é inteiramente virtual.

[15:39] Hospedar e participar de chamadas de videoconferência de alguma parte da casa agora é parte regular do nosso dia, e sejamos honestos, temos feito streaming e maratonado mais conteúdo do que jamais pensamos ser possível. Nossa equipe trabalhou duro para desbloquear novos poderes para a web, seja para levar sua experiência existente para o próximo nível ou para construir algo de ponta que nunca foi feito antes. Estamos inspirados e gratos por ver como nossos parceiros ao redor do mundo estão construindo experiências na web que possibilitam criatividade, expressão, comunicação, entretenimento e muito mais.

[16:14] Um exemplo é o Kapwing. O Kapwing é um editor de vídeo colaborativo com mais de três milhões de usuários ativos mensais processando 100,000 vídeos por dia. Para contar mais, gostaria de convidar um convidado especial, Josh Grossberg. Olá, sou Josh, CTO do Kapwing. O Kapwing é um editor de vídeo colaborativo baseado na web, projetado principalmente para criativos casuais, como streamers de jogos, músicos, criadores do YouTube e criadores de memes. Também somos um recurso de referência para proprietários de empresas que precisam de uma maneira fácil de produzir seu próprio conteúdo social, como anúncios no Facebook e Instagram.

[16:48] As pessoas geralmente nos descobrem pesquisando por uma tarefa específica, como “como cortar um vídeo”, “adicionar música ao meu vídeo” ou “redimensionar um vídeo”. O Kapwing permite que os usuários façam instantaneamente o que pesquisam com um clique. Não há atrito adicional ao fazê-los navegar até uma loja de aplicativos para baixar um aplicativo. A web torna mais simples para as pessoas pesquisarem exatamente aquilo com que precisam de ajuda e depois fazerem isso. O fato de pagarmos $0 em aquisição paga é um testemunho de quão bem essa estratégia funcionou. E, após esse primeiro clique, eles podem fazer muito mais.

[17:18] Eles podem explorar modelos gratuitos, adicionar novas camadas de vídeos de banco de imagens gratuitos, inserir legendas e transcrever vídeos, e fazer upload de música de fundo. Além disso, é simples para os usuários colaborarem no Kapwing com amigos e colegas, independentemente do dispositivo ou sistema operacional. Basta clicar em “Compartilhar”, obter um link de compartilhamento e enviá-lo ao seu colaborador. Tudo o que ele precisa fazer é clicar no link e já está editando com você. E, como oferecer suporte a diferentes dispositivos e sistemas operacionais exige um trabalho mínimo na web, é o ambiente ideal para possibilitar esse nível de colaboração.

[17:51] A edição de vídeos no Kapwing funciona de maneira fácil e integrada em todos os navegadores modernos. A edição de alto desempenho exige que todo o conteúdo dos nossos usuários fique no cliente, evitando a rede sempre que possível. Para isso, usamos o IndexedDB. Os Web Sockets possibilitam a colaboração em tempo real que os usuários esperam em aplicativos da web modernos. Para gerar formas de onda e permitir que os usuários juntem o áudio exatamente no lugar certo, usamos a Web Audio API. A Media Recorder API permite que os usuários gravem simultaneamente sua webcam e tela, perfeito para capturar expressões faciais ao criar screencasts. Os Web Workers nos permitem descarregar trabalho computacionalmente intensivo, removendo o fundo de vídeos sem afetar o desempenho da thread principal.

[18:35] E, claro, construímos o Kapwing como um PWA, então, depois que os usuários o encontram na pesquisa, ele é instalável, e voltar a ele é tão fácil quanto iniciá-lo a partir da área de trabalho. No futuro, estamos animados para usar o Web Codecs para acelerar nossas renderizações de quadros, usar o WebGL para possibilitar animações mais sofisticadas e usar as Media Source Extensions para ter transições mais suaves de clipe para clipe. Nenhuma dessas APIs é totalmente nova, mas quando combinadas, tornam muito mais fácil para nossos usuários colaborarem entre si e rapidamente dar vida às suas ideias.

[19:09] Para nós, a web nos dá uma maneira simplificada de alcançar e engajar mais usuários. De volta para você, Aanchal. Obrigada, Josh. Se você está procurando criar um meme sério, você sabe onde ir. Recomendo fortemente experimentar o Kapwing. É realmente fácil de usar. E agora, para um recurso da web com o qual todos estamos mais do que familiarizados: Videoconferência. Será difícil encontrar alguém que não tenha clicado em uma reunião do Zoom nos últimos dois anos. Em 2020, o Zoom viu um enorme influxo de pessoas usando seu aplicativo da web para conversar e se conectar online para happy hours virtuais, workshops em grupo, webinars online, você escolhe.

[19:48] O Zoom aproveitou esta oportunidade para melhorar sua experiência na web com um PWA e oferecer uma experiência mais comparável aos seus aplicativos nativos. Também foi uma chance para o Zoom oferecer aos seus milhões de usuários do Chrome OS uma alternativa poderosa ao seu aplicativo Chrome. Eles estão usando a nova API WebCodecs para codificação e decodificação de vídeo, o que melhora o desempenho e aprimora a experiência do usuário com vídeo rápido e limpo. A captura de links garante que, quando um usuário clicar em um link para uma reunião do Zoom em seu e-mail, ele seja aberto no PWA e não em uma aba do navegador.

[20:25] E, para usuários do Chrome OS, as configurações gerenciadas permitem que as empresas instalem facilmente o PWA em toda a força de trabalho. Apenas um mês após o lançamento do PWA, o Zoom viu 16.9 milhões de novos usuários ingressarem em reuniões na web, o que representa um aumento de sete milhões em relação ao ano anterior. Com os desenvolvimentos em WebRTC e APIs Fugu, experiências de chamadas de áudio e vídeo anteriormente não possíveis agora estão disponíveis. A Apple trouxe links do FaceTime para a web para usuários de Android e Windows, para que as pessoas possam entrar em uma chamada do FaceTime a partir do navegador.

[21:02] E temos o PWA do Google Meet para agradecer por este keynote. Colaboramos e criamos tudo o que você vê hoje em várias chamadas na web do Google Meet, e quero dizer várias, depois produzimos remotamente em um estúdio, e você provavelmente está assistindo no YouTube em casa. A equipe do Meet lançou planos de fundo personalizados e ajustes de luz em seu PWA usando WASM SIMD e WebGL. Isso melhorou drasticamente a velocidade, bem como a qualidade de vídeo e áudio. E melhor vídeo e áudio não são só trabalho e nenhuma diversão.

[21:36] O mundo do entretenimento e das mídias sociais está prosperando na web. O YouTube Premium é uma assinatura paga que permite aos membros assistir ao YouTube sem anúncios, reproduzir vídeos em segundo plano e baixar vídeos para assistir offline. Assistir vídeos offline em laptops e dispositivos híbridos foi um dos recursos mais solicitados pelos usuários do YouTube Premium. Para tornar isso possível, eles adicionaram tudo o que era necessário para transformar seu site em um PWA instalável. Para a experiência offline, eles usam uma combinação de service workers, armazenamento em cache e IndexedDB.

[22:11] É claro que a equipe se concentrou em mais do que apenas a experiência offline. Por exemplo, eles usam as APIs Web Share para que os usuários possam compartilhar links de vídeos com outros aplicativos instalados no dispositivo, e pré-carregamento de navegação para aumentar o desempenho do service worker. Eles estão executando um experimento para permitir que usuários do YouTube Premium baixem vídeos que possam ser assistidos offline no Chrome, Edge ou Opera. Eles estão ansiosos para encantar os usuários Premium com o novo recurso em breve. Não posso falar sobre mídias sociais e entretenimento sem mencionar vídeos de formato curto.

[22:46] É aí que o TikTok está liderando o caminho. O TikTok vê a web como um canal para adquirir mais usuários, mantê-los felizes, e eles se concentraram em criar uma experiência sem atritos e com múltiplos formatos. Eles otimizaram o desempenho de seu aplicativo web usando o Workbox para pré-carregar vídeos e reduzir qualquer atraso à medida que os usuários alternam entre vídeos. Eles também expandiram o PWA para desktop, apoiando-se no superpoder da web de construir apenas uma vez e tornar o TikTok disponível e acessível em qualquer dispositivo.

[23:19] Com essas melhorias em dispositivos móveis e desktop, o TikTok viu o tráfego proveniente de busca melhorar em 10x. Como você pode ver, a web em desktop viu inovação revolucionária nos últimos anos. Os usuários agora têm acesso a ferramentas complexas de criatividade e produtividade que permitem expressão e colaboração instantâneas. Há um aplicativo web poderoso para cada caso de uso, seja você aprendendo algo novo, conversando com seu chefe ou simplesmente criando algo bonito.

[23:51] E isso nos leva a algumas notícias empolgantes que estou ansioso para compartilhar com você. Após quase três anos de uma parceria forte e contínua com a Adobe, muitos aplicativos principais do Adobe Creative Cloud Suite estão chegando à web em breve. Trazer recursos e capacidades avançados para a plataforma ficaria incompleto sem o uso real por empresas como a Adobe que estão ultrapassando os limites do que é possível. Acreditamos que essas colaborações beneficiam todos os desenvolvedores, abrindo novas oportunidades para criar experiências incríveis para seus usuários.

[24:24] E agora gostaria de dar as boas-vindas a outra convidada especial, Pam Clark, VP de Gestão de Produto e Estratégia do Adobe Photoshop, para nos contar mais sobre esses lançamentos. Olá a todos. Estou animada por estar aqui com vocês na Chrome Dev Summit. Na Adobe, acreditamos que criatividade e colaboração andam de mãos dadas, e ao longo do último ano, fizemos muitos avanços em produtos como o Photoshop para apoiar os tipos de fluxos de trabalho móveis e colaborativos que nossos clientes desejam.

[24:57] Por exemplo, agora você pode armazenar PSDs na nuvem, para que possa trabalhar em um único documento em todos os seus dispositivos. Você também pode criar e compartilhar links para esses PSDs na nuvem. Você pode coeditá-los com seus colaboradores e compartilhá-los na web para revisão e comentários. Estamos comprometidos em ajudar as pessoas a criar e trabalhar juntas, não importa como elas queiram trabalhar, e é por isso que na Adobe MAX na semana passada, compartilhamos uma visão para a próxima evolução do Creative Cloud, uma que é tanto sobre se conectar uns com os outros quanto sobre ferramentas criativas.

[25:31] Por décadas, você só podia usar o Photoshop em um computador, e um computador potente. Depois o Photoshop foi para o mobile no iPad, e agora estamos tornando o Photoshop acessível em um navegador web via uma Beta Pública. Graças à estreita colaboração com a equipe do Chrome e da Plataforma Web do Google, a Adobe pode levar a magia do Photoshop para milhões de pessoas em todo o mundo. O Photoshop na Web Beta permite que você acesse fluxos de trabalho de revisão e comentários e teste alguns recursos de edição do Photoshop que estamos pilotando.

[26:06] Seus colaboradores também poderão abrir e visualizar seu trabalho no navegador, fornecer feedback e fazer edições básicas, tudo em um só lugar, sem precisar baixar ou iniciar o aplicativo Photoshop no desktop ou iPad. A colaboração entre Adobe, Google e dentro dos órgãos de padrões ajudou a trazer a funcionalidade necessária para o Photoshop para o navegador. O Web Assembly nos permitiu trazer grandes porções de nossa base de código para a web. Parte desse código depende de exceções para controle de fluxo, a adição de tratamento de exceções de custo zero significa que não há penalidades de desempenho.

[26:43] Para trabalho de alta fidelidade, o Canvas 2D agora é gerenciado por cores e suporta sRGB e o espaço de cores P3. Ler e gravar seus arquivos no disco tinha que parecer natural, e a API Storage Foundation garante que você possa trabalhar em seus PSDs, não importa quão grande ou quantas camadas eles tenham. Ainda estamos no começo da exploração dos recursos de edição do Photoshop na web, e estamos ansiosos pelo feedback da Comunidade Adobe, que nos ajudará a expandir as capacidades e funcionalidades da experiência no navegador.

[27:18] Além do Photoshop na Web Beta, na semana passada também anunciamos o Creative Cloud Spaces e o Creative Cloud Canvas, ambos em Beta Privado. Spaces são um local compartilhado que permite às equipes acessar e organizar todos os seus arquivos de projetos criativos. Canvas é uma nova superfície onde as equipes podem exibir, visualizar e revisar trabalhos criativos juntas. Estamos empolgados com a ideia de dar a todos mais maneiras de acessar nossas ferramentas. Ao trazê-las para a web, estamos ajudando a criar um ambiente mais fluido, mais conectado e mais colaborativo para seus projetos.

[27:54] Este é apenas o começo de uma evolução mais ampla do Creative Cloud. Muito obrigado pelo seu tempo. E agora, Ben vai retomar para falar mais sobre experiências do usuário. Obrigado, Pam, Josh e Aanchal, por nos guiarem por esses destaques. Sabe, o progresso na web geralmente vem em iterações, ano após ano, passo a passo, e por isso é incrível para mim quando podemos dar um passo atrás e refletir sobre o que se tornou possível na plataforma ao longo do tempo, como esses exemplos mostraram.

[28:25] E, à medida que a web ganha novos recursos e capacidades, outro tema que ouvimos é a importância de ajudar os desenvolvedores a obter os melhores resultados possíveis da plataforma web moderna. E uma maneira de fazer isso é o programa Web Vitals, que é o resultado de muita pesquisa para saber o que torna uma experiência web excelente. Com o Core Web Vitals, examinamos de perto muitos fatores que levam a experiências de usuário de alta qualidade e identificamos três medidas quantificáveis que têm um grande impacto.

[28:56] Estas são: um, quão rapidamente um usuário pode ver o conteúdo mais importante de um site; dois, quão rapidamente um usuário pode começar a interagir com esse site; e três, a estabilidade do layout do site ao longo do tempo. Descobrimos que sites que otimizam essas medidas são consistentemente mais bem-sucedidos. Para nos contar mais, gostaria de apresentar Houssein. Obrigado, Ben. Se você quer construir um ótimo site, precisa entender como ele se comporta do ponto de vista de um usuário real.

[29:27] É disso que trata a iniciativa Web Vitals: dar aos desenvolvedores e proprietários de sites as métricas, ferramentas e orientações de que precisam para oferecer uma ótima experiência para cada usuário. No ano passado, anunciamos o Core Web Vitals, um conjunto de três métricas que cobre o desempenho de carregamento, a capacidade de resposta a entradas durante o carregamento e a estabilidade visual do conteúdo, que começarão a ser atendidas em ferramentas fornecidas pelo Google para ajudar os desenvolvedores a construir ótimas experiências de usuário. Então, o que aconteceu no ano passado? Graças aos desenvolvedores em todo o mundo trabalhando duro para melhorar seus sites, o ecossistema como um todo está melhorando constantemente.

[30:04] 20% mais visitas a páginas no Chrome agora atendem totalmente aos limites recomendados do Core Web Vitals em comparação com um ano atrás. E a porcentagem total de visitas a páginas no Chrome que atendem a esses limites agora é de 60%, o que é um grande negócio. Muito desses avanços são resultado direto do trabalho realizado por comunidades de desenvolvedores, incluindo as melhorias que muitos sistemas de gerenciamento de conteúdo, construtores de sites e plataformas de comércio eletrônico fizeram. Na primavera passada, lançamos o novo Relatório de Tecnologia Core Web Vitals para mostrar como os sites construídos nessas plataformas se comportam.

[30:40] Você pode ver que muitos estão acentuadamente para cima e para a direita, com alguns mostrando mais de 200% de melhoria ano a ano. E líderes como Duda e Jimdo ultrapassando 50% das Origens com boas pontuações de Core Web Vitals. Também trabalhamos com alguns frameworks JavaScript populares, incluindo Next.js e Angular, para oferecer as melhores experiências de usuário possíveis sem sacrificar a experiência do desenvolvedor. Estamos chamando a iniciativa de Aurora, e graças ao trabalho que fizemos para estabelecer padrões fortes e otimizar o desempenho, em menos de um ano, vimos aumentos de 91% e 111% no número de Origens móveis Next.js e Angular, respectivamente, que têm boas pontuações de Core Web Vitals.

[31:25] Esse é um progresso incrível em um curto espaço de tempo, e mal podemos esperar para ver um crescimento semelhante em outros ecossistemas de frameworks em um futuro próximo, como o Nuxt. Sabemos que otimizar para o Core Web Vitals ainda pode ser desafiador para o desenvolvedor comum, então temos algumas novas atualizações em nossas ferramentas de desempenho que tornam o processo muito mais fácil. Primeiro, começamos com uma reformulação completa da interface do PageSpeed Insights. O PageSpeed Insights é uma ótima ferramenta porque mostra dados de usuários reais do Chrome UX Report e também executa um relatório do Lighthouse e mostra sugestões e oportunidades de melhoria com base em um carregamento sintético da página em um ambiente de laboratório.

[32:05] A nova interface de usuário deixa muito mais claro quais dados são “Dados de Campo” vindos de experiências de usuários reais, e quais dados são “Dados de Laboratório” vindos do relatório do Lighthouse. Se você quiser verificar uma Pontuação dos Core Web Vitals, deve olhar os dados de campo de usuários reais. Para quem quiser sugestões específicas e acionáveis sobre como melhorar o desempenho, o relatório do Lighthouse é um ótimo ponto de partida. Em seguida, trabalhamos para resolver um ponto cego que nossas ferramentas ainda não conseguiam capturar: os fluxos de usuário. Algumas de nossas ferramentas eram limitadas por avaliar apenas suas páginas durante o carregamento.

[32:37] Eles querem rolar a página para baixo, clicar por aí ou fazer qualquer outra coisa que os usuários normalmente fazem ao navegar na web. Por exemplo, considere um fluxo típico de finalização de compra em que alguém precisa realizar várias ações diferentes para pedir um café, como navegar por várias páginas, adicionar itens a um carrinho e confirmar os detalhes de pagamento. No passado, só conseguíamos medir o desempenho de cada página separadamente, mas pense em quanto mais poderíamos aprender sobre a experiência geral do usuário medindo cada ação e navegação entre elas.

[33:09] Temos o prazer de anunciar que lançamos o suporte para fluxos de usuário no Lighthouse, o que só vai facilitar o diagnóstico de problemas de desempenho dentro de uma jornada do usuário e obter sugestões de como melhorar. O Lighthouse será capaz de distinguir e fornecer relatórios separados para navegações de página, quaisquer interações do usuário que ocorreram durante um determinado período de tempo e instantâneos para representar um estado capturado de uma página. Não é apenas no Lighthouse que estamos introduzindo suporte para analisar fluxos de usuário. Lançamos um Painel Gravador completamente novo no DevTools que também permitirá gravar uma jornada inteira do usuário no seu site e visualizar facilmente todas as ações realizadas pelo usuário diretamente no painel, como navegações, pressionamentos de tecla, cliques em links e assim por diante.

[33:54] Você pode baixar o fluxo de usuário e exportá-lo como um script Puppeteer para testes, reproduzi-lo e até clicar e medir facilmente o rastreamento de desempenho no painel de desempenho. Isso não apenas tornará o processo de entender e depurar interações mais fácil, como também ajudará você a identificar melhor as oportunidades de desempenho ao longo da jornada do usuário. O Painel Gravador está atualmente em estágio de pré-visualização, e a equipe está trabalhando ativamente nele, então fique atento a mais recursos. Todas as nossas ferramentas foram fundamentais para como as métricas dos Core Web Vitals ajudaram os desenvolvedores a ter sucesso na melhoria das experiências do usuário em milhões de sites ao redor do mundo, e todas essas novas mudanças contribuirão muito para ajudar você a entender precisamente onde e como pode continuar melhorando.

[34:41] Agora, o que vem a seguir para as próprias métricas dos Core Web Vitals? Bem, há mais em ótimas experiências do usuário do que apenas três áreas. Estamos trabalhando duro para preencher as lacunas que o conjunto atual de métricas ainda não aborda. Estamos animados em apresentar duas novas métricas com as quais temos experimentado e que acreditamos que melhorarão como a experiência do usuário é medida na web, e adoraríamos receber seu feedback sobre elas. A primeira é uma métrica para medir a Responsividade Geral de Entrada. Hoje, medimos a responsividade da primeira entrada do usuário, mas, idealmente, queremos estender isso para capturar cada entrada do usuário desde o momento em que ele chega ao seu site até o momento em que sai.

[35:22] Também fizemos melhorias nas APIs que capturam o tempo de eventos, para que possamos monitorar melhor o ciclo de vida completo do evento e lidar melhor com entradas complexas do usuário que acionam mais de um evento. A segunda métrica mede a suavidade de rolagem e animação. Tenho certeza de que todos já tivemos experiências em que uma página trava ou congela durante a rolagem ou animações. Queremos entender melhor com que frequência isso acontece e quão grave é. Ainda estamos trabalhando em ambas as métricas, e adoraríamos ouvir seu feedback.

[35:53] Esses artigos explicam nosso pensamento atual em detalhes, então dê uma lida neles e pense em como usá-los pode ajudar a melhorar a experiência do usuário do seu site. Fique à vontade para nos enviar um e-mail se tiver alguma ideia ou sugestão. Estamos animados com todos os avanços feitos para ajudar os desenvolvedores a ter sucesso na construção de experiências rápidas e agradáveis para seus usuários, nas próprias métricas, da comunidade e diretamente em muitas ferramentas e plataformas. Se ainda não o fez, acesse o PageSpeed Insights para ver como seu site pontua nas métricas dos Core Web Vitals.

[36:25] Também temos várias outras ótimas ferramentas que você também pode usar para monitorar e otimizar continuamente o desempenho do seu site, então não deixe de conferi-las para ver qual funciona melhor para você. Agora, vou passar a palavra de volta para Ben antes de compartilharmos algumas atualizações empolgantes sobre design de UX. Obrigado, Houssein. Estou muito animado para ver como os Core Web Vitals evoluem nos próximos anos. É claro que experiências web de qualidade vão além de apenas medição e otimização. Elas exigem os esforços de designers e desenvolvedores apaixonados que trabalham nos bastidores para criar interfaces digitais encantadoras, e precisam estar armados com as ferramentas e capacidades certas para fazer isso.

[37:04] Alguns anos atrás, um grupo de engenheiros começou a repensar o suporte do Chromium para HTML, CSS e Gráficos, o que levou a um esforço chamado RenderingNG, uma refatoração ambiciosa do mecanismo de renderização do Chromium. Esse trabalho agora foi amplamente implementado, e está possibilitando uma grande evolução no design da experiência do usuário na web. Para nos contar mais, vou passar a palavra para Una. Obrigada. Tudo o que falamos hoje volta para a experiência do usuário.

[37:36] Privacidade, medição, capacidades web de próxima geração, trabalhando juntos para criar experiências melhores que se alinhem com nossa visão para a web, enquanto damos aos desenvolvedores as ferramentas e capacidades de que precisam para construí-las. Então, hoje, estou animado para compartilhar uma tonelada de atualizações e mudanças que estão por vir para estilização de UI e DevTools. Primeiro, vamos falar sobre design responsivo e como ele está evoluindo. O design responsivo não se trata mais apenas de garantir que uma interface fique boa tanto em desktops quanto em dispositivos móveis. Os desenvolvedores agora têm as ferramentas para realmente criar experiências de usuário personalizadas com base em preferências personalizadas do usuário em um modelo de arquitetura orientada a componentes.

[38:14] Estamos chamando isso de O Novo Responsivo, e inclui ser responsivo ao usuário, com consultas de preferência do usuário e modalidades como modo escuro e prefers-reduced-motion, ser responsivo a novos fatores de forma como dispositivos dobráveis, que permitem funcionalidade de múltiplas telas, e ser responsivo a outros componentes na página com consultas de contêiner. Esse é um recurso que tem sido muito solicitado pelos desenvolvedores. Estamos trabalhando com o grupo de trabalho CSS para especificar esse recurso e conseguimos desbloquear a implementação por meio de mudanças recentes no Mecanismo de Renderização do Chrome.

[38:44] A nova especificação de consultas de contêiner permite acessar a largura de um elemento pai para tomar decisões de estilo para seus filhos. Você pode até aninhar consultas de contêiner e criar consultas nomeadas para facilitar o acesso e a organização. Vamos ver um exemplo. Aqui está um botão “Adicionar ao Carrinho” responsivo que posso colocar em qualquer lugar do contêiner. Então, quando o coloco dentro deste cartão de produto, que também é um contêiner, posso consultar o próprio cartão de produto para reestilizar o botão já responsivo e movê-lo de alinhado ao centro para alinhado à esquerda.

[39:15] Isso pode parecer fácil na superfície, mas é algo que antes não era possível sem muito script pesado, o que atrasaria significativamente sua página. Estamos trabalhando com a comunidade de código aberto para fornecer um polyfill para consultas de contêiner enquanto construímos o recurso na plataforma. Usar consultas de contêiner torna suas interfaces muito mais flexíveis. Os componentes possuem todos os seus estilos responsivos individuais exatamente onde estão, e não dependem da viewport global para ajustar estilos. Essa é uma mudança enorme de paradigma para desenvolvimentos baseados em componentes, e estamos animados para ver como você aproveita ao máximo esse novo recurso.

[39:48] Se você quiser experimentar, as consultas de contêiner agora estão disponíveis para teste por trás de uma flag no Chrome Canary. E, por causa dessa grande mudança, temos trabalhado duro para apoiar você fornecendo DevTools que permitem depurar e estilizar com consultas de contêiner à medida que o recurso é lançado. Aqui, você vê que o DevTools está indicando onde está o contêiner do filho e destacando os estilos aplicados por ele. Falando em DevTools responsivos, lançamos várias novas ferramentas este ano para melhor depuração de layout. As ferramentas de layout para Grid agora permitem adicionar nomes a linhas de grade específicas e também mostram o tamanho das suas áreas de Grid.

[40:24] Também adoro as novas ferramentas dinâmicas para Flexbox e Grid. Elas permitem que você veja o que diferentes valores de propriedade fazem na página e dão a capacidade de alterar facilmente as regras de layout com o clique de um botão. Essas novas DevTools são projetadas para tornar o Layout CSS mais fácil de visualizar e entender, o que libera mais tempo para construir novos recursos para seus usuários e menos tempo procurando as diferenças entre justify e align. Outra maneira de ajudar a simplificar o processo é lançando os padrões web.dev, uma coleção de padrões de UI prontos para usar que você pode usar em seus projetos web.

[40:57] Para ajudar você a começar rapidamente a construir a base da sua UI, adicionamos padrões de layout para tudo, desde grandes spreads de página inteira e conjuntos de cartões até layouts menores que podem viver dentro desses layouts maiores, como os próprios cartões. Todos esses padrões usam CSS Grid, Flexbox ou consultas de contêiner para mostrar com que rapidez você pode pegar essas ferramentas e construir interfaces do zero. Também fizemos parceria com Jeremy Keith da Clearleft para lançar “Aprenda Design Responsivo” no web.dev. Este é um curso online gratuito com tudo o que você precisa saber sobre design para a nova web responsiva de hoje.

[41:31] Você aprenderá sobre temas, direção de arte, propriedades lógicas para internacionalização, utilização de consultas de preferência e muito mais. Hoje, estamos lançando os primeiros módulos do curso em web.dev/learn/design, com mais por vir nas próximas semanas. Também estamos atualizando nosso curso “Aprenda CSS” com seis novos módulos. “Aprenda CSS” é outro curso gratuito e sempre atualizado e referência no web.dev onde você pode elevar seu conhecimento de CSS e testar suas habilidades. Lançamos os primeiros 24 módulos no Google I/O deste ano, e agora estamos introduzindo listas, planos de fundo, transições, texto e tipografia, consultas de mídia e mais.

[42:07] Não deixe de conferir esses novos módulos e mergulhe quando estiver pronto. Também estamos trabalhando para lançar alguns novos recursos em CSS. Além das consultas de contêiner, nossa equipe está pensando em como introduzir estilos com escopo e camadas em cascata. Eles ainda não estão prontos. Estamos animados para trabalhar com você e a comunidade web nos próximos meses para impulsioná-los. Temos uma nova API particularmente divertida que está pronta para exploração, e é a Scroll Timeline. Antes, você podia criar animações CSS com base em tempo e movidas ao longo de um período de tempo.

[42:38] A Scroll Timeline permite definir deslocamentos e tempos baseados em rolagem para animações. Isso significa que você pode definir um elemento para animar conforme você rola para baixo ou horizontalmente em uma página. Muito legal. Você pode explorar a Scroll Timeline usando a flag de recursos experimentais da plataforma web no Canary. Temos outra adição empolgante que recentemente alcançou seu primeiro rascunho público de trabalho, e é o aninhamento CSS. O aninhamento é um açúcar sintático que traz um dos recursos mais populares dos pré-processadores CSS para a web, empilhando seus estilos para uma experiência de desenvolvedor mais limpa.

[43:11] Embora a especificação de aninhamento permita manter seus estilos menores e mais encapsulados, recomendamos não ultrapassar três níveis de profundidade para garantir o melhor desempenho. Também lançamos a propriedade size-adjust para tipografia. Isso é particularmente útil para evitar o Cumulative Layout Shift para Core Web Vitals, pois você pode ajustar a fonte padrão para corresponder melhor à sua web font. Isso causa menos instabilidade enquanto a web font carrega. E, por último, mas não menos importante, o accent-color acabou de chegar ao Chromium e ao Firefox estável. O accent-color é um superpoder de uma linha do CSS que dá aos seus controles de formulário, como checkboxes e radios, uma cor de tema para combinar com sua marca.

[43:47] Recebemos muitos pedidos de recursos de desenvolvedores e usuários, mas um é claramente o favorito, especialmente para aqueles de vocês que adoram navegar na web à noite. O Modo Escuro é um recurso popular que estamos animados para desenvolver, e não porque vocês pediram, mas porque seu impacto vai além da interface do usuário. Temas escuros demonstraram economias mensuráveis de bateria em comparação com suas contrapartes de tema claro em dispositivos OLED. Em nosso estudo de laboratório com um único dispositivo Pixel 6, encontramos uma indicação de que a 60% de brilho, o tema escuro usou 11% menos energia do que os temas claros para telas OLED.

[44:23] E é um recurso que os usuários também adoram. Quando o Twitter lançou a primeira prévia do seu novo Twitter progressive web app, todos disseram: “Uau, é novo e rápido, mas cadê o modo escuro?” Eles pesquisaram os usuários sobre o que precisavam adicionar, e os usuários disseram três coisas: modo escuro, um seletor de emojis e mais modo escuro. Então é meio que um grande negócio para muitos usuários muito vocais. Para criar um tema escuro, recomendamos usar propriedades personalizadas do CSS e o recurso de mídia “prefers-color-scheme”, que é suportado em todos os navegadores evergreen.

[44:53] Isso permite trocar as cores do tema com base no que seus usuários preferem, uma parte central do nosso novo framework responsivo e conjunto de metas. Se você precisar de ajuda para configurar o modo escuro do jeito que gosta, há excelentes orientações da equipe do Material Design por meio de sua pesquisa sobre a criação de belos temas escuros. Isso inclui como ajustar a profundidade usando luminosidade em vez de sombras, como ajustar a vibração das cores para reduzir a vibração visual e mais. Para facilitar ainda mais para sua equipe, o Chrome está trabalhando em um recurso de algoritmo de escurecimento automático auxiliado por aprendizado de máquina. Esse recurso incluirá sites escurecidos automaticamente, juntamente com algumas opções para desativar a funcionalidade de escurecimento automático em um nível mais granular.

[45:31] Ainda estamos nos estágios iniciais do desenvolvimento do recurso, e precisamos da sua ajuda para acertar. Para experimentá-lo agora, abra o Painel de Renderização do DevTools no Chrome Canary e ative a Emulação de Modo Escuro Automático. Confira o link para saber mais e nos dar sua opinião. Agora, vou passar de volta para Ben uma última vez. Obrigado, Una. Você sabe, vimos muitas mudanças na web no ano passado, e continuamos mais otimistas do que nunca sobre o futuro da plataforma nas áreas que acabamos de falar e mais. Nos próximos anos, você pode esperar nos ver continuar a trabalhar duro para tornar a web mais privada e poderosa e fornecer aos desenvolvedores melhores ferramentas e orientações para criar experiências de alta qualidade para pessoas em todo o mundo.

[46:17] Parte do que torna a web tão especial é que ela é um ecossistema aberto e descentralizado, que apresenta muitas maneiras para qualquer pessoa se envolver para ajudar a moldar seu futuro. Convidamos você a participar desse esforço, seja por meio do projeto de código aberto Chromium, do W3C e outros órgãos de padrões, ou simplesmente nos acompanhando no web.dev e na nossa conta do Twitter @ChromiumDev. E, nas próximas duas semanas, como parte deste CDS 2021 virtual, estamos organizando vários workshops, lounges de aprendizado em grupo e horários de atendimento individuais onde você pode se envolver diretamente com a equipe do Chrome, auditar seus próprios sites com orientação especializada, nos dar feedback e compartilhar suas ideias para o futuro da web.

[47:00] E, com isso, obrigado por assistir, e espero ver vocês novamente em pessoa em breve em um futuro evento Chrome Dev Summit. Até então.