WEBVTT 00:00:00.006 --> 00:00:02.306 Olá a todos. 00:00:02.306 --> 00:00:07.840 [EXTERNA] Meu nome é David. 00:00:09.080 --> 00:00:10.290 Eu sou David Catuhe. 00:00:10.290 --> 00:00:15.870 Estou trabalhando para Microsoft DX, e meu foco está no 00:00:15.870 --> 00:00:20.650 os padrões da Web aberta e Obviamente, para Microsoft Edge. 00:00:20.650 --> 00:00:23.520 Eu farei que todos os ao longo desta sessão 00:00:23.520 --> 00:00:27.640 tentando dizer não Microsoft Spot e só dizendo: Microsoft Edge, então 00:00:27.640 --> 00:00:29.750 Por favor, seja paciente comigo. 00:00:29.750 --> 00:00:31.070 Estou aqui com David. 00:00:31.070 --> 00:00:32.320 >> Hello. Portanto, estou fazendo 00:00:32.320 --> 00:00:34.020 mais do que as mesmas coisas, e 00:00:34.020 --> 00:00:37.300 Estou trabalhando como o programa sênior Gerenciador do mesmo conteúdo do curso. 00:00:37.300 --> 00:00:40.970 >> Portanto, Sim, hoje nós iremos apresentar a você a parte mais interna 00:00:40.970 --> 00:00:42.830 da borda da Microsoft. 00:00:42.830 --> 00:00:45.990 E na maioria das vezes, tentaremos Concentre-se nos novos recursos 00:00:45.990 --> 00:00:47.590 que adicionamos nele. 00:00:47.590 --> 00:00:51.600 E queremos fazer apenas uma introdução pouco antes, 00:00:51.600 --> 00:00:53.960 Para sabe explicar por que um novo navegador? 00:00:55.210 --> 00:00:56.455 O que há dentro? 00:00:56.455 --> 00:00:59.185 E, em seguida, vamos fazer alguma codificação. 00:00:59.185 --> 00:01:00.185 >> E muita demonstrações. 00:01:00.185 --> 00:01:03.455 >> Sim, portanto, Envie uma avaliação. 00:01:03.455 --> 00:01:05.125 Existem alguns prêmios. 00:01:05.125 --> 00:01:06.725 Basta use o código QR aqui. 00:01:06.725 --> 00:01:09.435 Acho que você está acostumado com isso. 00:01:10.435 --> 00:01:13.700 Portanto, a agenda, três partes, Por que um novo mecanismo? 00:01:13.700 --> 00:01:17.400 Em seguida, web moderno interoperabilidade significa hoje em dia, e 00:01:17.400 --> 00:01:20.267 Obviamente, vamos nos concentrar em seguida sobre os recursos e código. 00:01:21.540 --> 00:01:23.230 Apenas uma pesquisa rápida. 00:01:23.230 --> 00:01:25.090 Quem é um desenvolvedor da web? 00:01:26.530 --> 00:01:27.670 Adoro vocês. 00:01:27.670 --> 00:01:29.830 Eu adoro usuário obviamente bem. 00:01:29.830 --> 00:01:33.310 [RIR] Mas Isso é um grande grupo de pessoas, e 00:01:33.310 --> 00:01:35.910 Lembro do último ano Quando perguntamos a esta pergunta, 00:01:35.910 --> 00:01:40.830 talvez fosse 20% da sala, e acho que é agora como 50. 00:01:40.830 --> 00:01:42.380 Essa é uma boa avaliação. 00:01:42.380 --> 00:01:43.690 Portanto, primeiro pergunta. 00:01:43.690 --> 00:01:44.880 Por que a criação de um novo mecanismo? 00:01:44.880 --> 00:01:46.780 Por que criar um novo navegador? 00:01:46.780 --> 00:01:50.520 Portanto, para dar apenas um pouco do vocabulário, 00:01:50.520 --> 00:01:52.570 é como um navegador está funcionando. 00:01:52.570 --> 00:01:54.790 Temos a janela em si. 00:01:54.790 --> 00:01:55.820 O que podemos chamar o cromo. 00:01:55.820 --> 00:01:58.460 Não é fácil de usar quando nós lidamos com navegador, para 00:01:58.460 --> 00:02:00.360 Vamos chamá-lo de uma janela. 00:02:00.360 --> 00:02:04.760 E dentro dessa janela, temos o Plataforma da Web, que significa que a DLL 00:02:04.760 --> 00:02:09.430 e todo o C++ esse identificador de código todas as coisas relacionadas à HTML, 00:02:09.430 --> 00:02:14.900 JavaScript, CSS para processar uma imagem da página, OK? 00:02:14.900 --> 00:02:18.420 Ou seja, o nome de a plataforma de Web é Trident. 00:02:18.420 --> 00:02:22.190 Temos, obviamente, o mesmo texto para Chrome, e 00:02:22.190 --> 00:02:25.760 o nome da plataforma Web Esse tempo é de intermitência. 00:02:25.760 --> 00:02:30.870 Temos WebKit para Safari, e Temos Gecko para Firefox. 00:02:30.870 --> 00:02:32.830 Mas todos nós funcionam da mesma forma, uma janela, e 00:02:32.830 --> 00:02:34.690 interna, uma plataforma da Web, certo? 00:02:34.690 --> 00:02:35.450 Um mecanismo de processamento. 00:02:37.400 --> 00:02:38.502 Apenas um pouco de histórico. 00:02:38.502 --> 00:02:42.860 20 anos atrás, começamos 00:02:42.860 --> 00:02:47.820 em 1995 com uma primeira versão do Internet Explorer, 20 anos atrás. 00:02:47.820 --> 00:02:51.450 Quando falamos em ciência da computação, é como dinossauros. 00:02:52.740 --> 00:02:54.510 Nesse momento criamos uma primeira versão. 00:02:54.510 --> 00:02:57.330 Mas vamos apenas passar para o IE6. 00:02:57.330 --> 00:03:01.210 IE6 foi a primeira versão onde apresentamos um brinquedo novo, 00:03:02.370 --> 00:03:05.130 o! DOCTYPE. 00:03:05.130 --> 00:03:10.163 Foi uma idéia para nós para endereço ao mesmo tempo, novos recursos e 00:03:10.163 --> 00:03:14.102 compatibilidade de trabalho pendente. 00:03:15.470 --> 00:03:18.010 Queremos adicionar muitos novos recursos no Internet Explorer 00:03:18.010 --> 00:03:20.330 sem quebrar a web. 00:03:20.330 --> 00:03:23.080 Então eu disse, tudo bem, vamos considerar 00:03:23.080 --> 00:03:28.632 Se o desenvolvedor da web coloque bank.type no início da página. 00:03:28.632 --> 00:03:30.440 Consideramos que é um disparador para 00:03:30.440 --> 00:03:35.880 Para usar o novo recurso que adicionamos IE6. 00:03:35.880 --> 00:03:37.428 Mas porque nós não temos Deseja interromper a web 00:03:37.428 --> 00:03:42.830 Nós terceirizamos relatório anterior versão como IE5 etc. 00:03:42.830 --> 00:03:46.470 Chamamos a que o modo de doc modo de documento. 00:03:46.470 --> 00:03:51.670 O modo de documento é um sinalizador compact em nosso código que ativa e 00:03:51.670 --> 00:03:54.400 desativar qualquer recurso específico que temos. 00:03:54.400 --> 00:03:58.584 Estamos apenas pode imaginar que dentro iCode, há uma dezena de if. 00:03:58.584 --> 00:04:01.306 Se o IE6, então pode fazer isso. 00:04:01.306 --> 00:04:04.050 Se IE5, então não é possível fazer isso. 00:04:04.050 --> 00:04:05.330 OK? 00:04:05.330 --> 00:04:07.969 E para o IE6, tivemos nesse momento, 00:04:07.969 --> 00:04:11.330 dentro o mesmo mecanismo modo de documento dois. 00:04:11.330 --> 00:04:15.680 Portanto, ele pode ser uma combinação dos dois se, na verdade. 00:04:15.680 --> 00:04:18.170 Se isso para qualquer versão em seguida, é possível fazer isso. 00:04:18.170 --> 00:04:21.570 Se não for a versão específica, em seguida, podemos fazer isso. 00:04:23.040 --> 00:04:24.930 Mais adiante, vamos para o IE8. 00:04:27.160 --> 00:04:30.690 Com o IE8, apresentamos um terceiro modo de documento. 00:04:30.690 --> 00:04:33.130 Mesma história aqui realmente. 00:04:33.130 --> 00:04:34.960 Tivemos esse conceito ainda mais. 00:04:34.960 --> 00:04:38.260 Três documentam modo, então modo se dentro do código. 00:04:39.490 --> 00:04:43.757 Tenha sempre em mente que Queríamos fornecer novos 00:04:43.757 --> 00:04:47.712 recursos sem quebrar a web OK? 00:04:47.712 --> 00:04:49.151 E, em seguida. 00:04:49.151 --> 00:04:52.481 Vamos passar para IE11. 00:04:52.481 --> 00:04:54.457 E adivinhe? 00:04:54.457 --> 00:04:58.315 Nesse momento, sabíamos que havia um problema. 00:04:58.315 --> 00:05:03.200 >> [RIR] >> Não é possível-lo. 00:05:03.200 --> 00:05:08.230 O desenvolvedor que criou IEngine foram realmente coragem equipe. 00:05:08.230 --> 00:05:12.880 Vamos imaginar que temos várias de se IE11 e não 10 mas 00:05:12.880 --> 00:05:17.080 8 e qualquer que seja, foi apenas muito complicado fazer. 00:05:17.080 --> 00:05:21.679 Mas podemos fazer isso porque eu trabalhado por Chris naquele momento era compatível, 00:05:21.679 --> 00:05:25.320 compatibilidade com versões anteriores. 00:05:25.320 --> 00:05:29.750 Ao mesmo tempo, cromo, 00:05:29.750 --> 00:05:33.740 Firefox, Opera, Safari são o que chamamos de verde. 00:05:33.740 --> 00:05:37.540 Isso significa que elas têm uma versão específica. 00:05:37.540 --> 00:05:41.890 Eles não têm se cromo 31 ou Se 32 de cromo, o qualquer. 00:05:41.890 --> 00:05:45.240 Eles apenas têm todas o recurso está sempre disponível. 00:05:45.240 --> 00:05:49.070 E eles são atualizados com bastante freqüência. 00:05:50.640 --> 00:05:52.940 Não era um jogo justo para nós. 00:05:54.660 --> 00:05:56.890 Portanto, decidimos introduzir um novo navegador. 00:05:56.890 --> 00:05:58.850 A idéia é muito simples na verdade, 00:05:58.850 --> 00:06:01.530 Vamos manter IE11 de compatibilidade com versões anteriores. 00:06:01.530 --> 00:06:03.680 Nós não toque IE11 mais. 00:06:03.680 --> 00:06:07.296 Seria em [INAUDIBLE] Se nós adquirimos para a empresa, 00:06:07.296 --> 00:06:11.650 ou para um determinado recurso que Não há suporte para a web moderna. 00:06:11.650 --> 00:06:13.970 Chamamos a que os recursos herdados. 00:06:13.970 --> 00:06:17.100 Não queremos quebrar a web mas queremos ir e 00:06:17.100 --> 00:06:20.270 para fornecer uma experiência melhor para os desenvolvedores da web. 00:06:20.270 --> 00:06:25.380 Portanto, vamos apresentar Microsoft Edge, com base no novo 00:06:25.380 --> 00:06:29.900 DLL é uma bifurcação do Trident, e Voltarei para que depois, e 00:06:29.900 --> 00:06:33.340 que se espalharão por todos nossos dispositivos Windows 10. 00:06:33.340 --> 00:06:37.340 E você pode ver aqui vai ter, não é especial em mas 00:06:37.340 --> 00:06:40.680 Borda no seu Windows phone no tablet, em seu PC. 00:06:40.680 --> 00:06:45.969 E isso é algo que eu realmente adoro para ser honesto com você. 00:06:45.969 --> 00:06:50.470 [RIR] E falando sobre o novo navegador 00:06:51.520 --> 00:06:54.240 Obviamente, precisamos conversar sobre interoperabilidade com 00:06:54.240 --> 00:06:57.160 na web em si, e com outros fornecedores de navegador. 00:06:57.160 --> 00:07:01.470 E David, pode dar nos mais informações sobre isso? 00:07:01.470 --> 00:07:05.110 >> Sim, hoje quando você está usando na web, a web, o endereçamento 00:07:05.110 --> 00:07:09.260 Há uma variedade de dispositivos Você pode direcionar, portanto, é enorme, isso 00:07:09.260 --> 00:07:14.060 seus tablets, PCs, celulares, TVs, mesmo. 00:07:14.060 --> 00:07:15.710 >> Fridge. >> Muito deles. Fridge. 00:07:15.710 --> 00:07:16.720 Sim, no seu caso fridge, 00:07:16.720 --> 00:07:17.260 é isso mesmo. 00:07:17.260 --> 00:07:18.970 >> Temos um fridge conectado. 00:07:18.970 --> 00:07:23.200 >> Não a idéia de gravar uma vez e para executar em todos os lugares, isso é um sonho. 00:07:23.200 --> 00:07:26.460 Em seguida, você vê que existem é uma especificação. 00:07:27.990 --> 00:07:32.115 Especificação escrita como navegador fornecedores é um pouco complexa. 00:07:32.115 --> 00:07:33.124 Leva tempo. 00:07:33.124 --> 00:07:34.186 Por exemplo, 00:07:34.186 --> 00:07:39.600 Especificação de arquivo HTML é mais de 600 páginas para ler e analisar. 00:07:39.600 --> 00:07:43.590 Portanto, estamos fazendo isso, estamos escrevendo navegadores juntos. 00:07:43.590 --> 00:07:46.900 Mas às vezes, os desenvolvedores da web não está lendo as especificações. 00:07:46.900 --> 00:07:48.760 >> Às vezes, que eu não sei. 00:07:48.760 --> 00:07:49.260 >> Sim. 00:07:50.980 --> 00:07:52.730 E, mas ele funciona bem na maioria das vezes. 00:07:52.730 --> 00:07:57.660 Na área de trabalho de energia, por exemplo, Se você tiver uma aparência para esse lado. 00:07:57.660 --> 00:08:01.700 Agora, se você estiver usando a versão moderno do Firefox de um navegador de Internet 00:08:01.700 --> 00:08:04.000 11 ou até a borda da Microsoft. 00:08:04.000 --> 00:08:06.680 Bem na maioria das vezes você não terá muito problema 00:08:06.680 --> 00:08:09.250 Criando o site para todos os baralhos do navegador. 00:08:09.250 --> 00:08:13.410 Assim por diante do lado do desktop, Eu recebo o sonho está lá. 00:08:13.410 --> 00:08:14.420 Quase lá, quase. 00:08:15.730 --> 00:08:19.130 Vamos mudar para a versão móvel. 00:08:20.850 --> 00:08:24.505 No espaço móvel, você pode ver Se o mesmo tamanho está sendo executado em 00:08:24.505 --> 00:08:28.810 Sistema operacional, no Safari Mobile, Firefox em um iPhone para 00:08:28.810 --> 00:08:32.670 instância e o Internet Explorer, Elemento e Phone do Windows. 00:08:32.670 --> 00:08:36.400 E você pode ver que há alguns problema de processamento de valores e 00:08:36.400 --> 00:08:39.160 Vamos tentar entender Por que temos esse problemas. 00:08:39.160 --> 00:08:40.550 >> David absolutamente. 00:08:40.550 --> 00:08:43.770 Portanto, temos esse problema tentamos aqui para capturar, 00:08:43.770 --> 00:08:48.010 não é científico não é algo proporcional ou qualquer que seja. 00:08:48.010 --> 00:08:53.100 É apenas uma maneira da me explicar a você como está funcionando a web. 00:08:53.100 --> 00:08:55.540 Temos as janelas do navegador, e 00:08:55.540 --> 00:08:59.730 eles têm sua própria implementação algumas coisas específicas. 00:08:59.730 --> 00:09:02.187 Mas, na maioria das vezes que tentamos trabalhar no que chamamos de núcleo das 00:09:02.187 --> 00:09:06.180 interseção entre operável onde a web simplesmente funciona em qualquer lugar, certo? 00:09:07.380 --> 00:09:10.710 Quando pensamos na web móvel é um pouco diferente, porque 00:09:10.710 --> 00:09:16.270 Na maioria das vezes web developer criado site móvel para kit na web. 00:09:16.270 --> 00:09:20.510 E foi um pouco complicado, até mesmo para o Firefox. 00:09:20.510 --> 00:09:23.140 E IE precisa ir dessa maneira. 00:09:23.140 --> 00:09:25.600 Portanto, aqui vai borda. 00:09:25.600 --> 00:09:29.790 E para a borda, a primeira coisa que fizemos foi livrar-se de 00:09:29.790 --> 00:09:32.540 todos os o turf de gelo específico que tínhamos. 00:09:32.540 --> 00:09:34.968 Assim, podemos remover este azul parte na parte inferior. 00:09:34.968 --> 00:09:39.270 Pense em anexos. 00:09:39.270 --> 00:09:44.040 Em vez de usar o ouvinte do advento, adicionamos em anexos de tempo 00:09:44.040 --> 00:09:45.280 o que é bem. 00:09:45.280 --> 00:09:49.040 E posso ver, até mesmo hoje em dia, em [INAUDÍVEL] ou coisas como essa 00:09:49.040 --> 00:09:52.670 Posso ver se anexo, e use o anexo. 00:09:52.670 --> 00:09:54.878 Se ele não estiver presente, use. 00:09:54.878 --> 00:09:56.503 Removemos. 00:09:56.503 --> 00:09:58.671 Nós só queríamos coisas que funcionam em qualquer lugar. 00:09:58.671 --> 00:10:01.336 E, em seguida, adicionamos muito. 00:10:01.336 --> 00:10:06.474 Recursos e correções de interoperabilidade para garantir que nossa conexão 00:10:06.474 --> 00:10:11.470 com o interoperável interseção é maior, certo? 00:10:11.470 --> 00:10:17.380 Pense assim David, se podemos simplesmente sobre padrões da web aqui. 00:10:17.380 --> 00:10:20.810 Obviamente, a Microsoft trabalha na direção de padrões da web. 00:10:20.810 --> 00:10:23.480 Essa é a maneira de percorrer. 00:10:23.480 --> 00:10:25.434 Mas, como você mencionou, precisamos ser pragmático. 00:10:25.434 --> 00:10:33.550 E as coisas de maneira estão funcionando, as coisas de maneira devem funcionar, 00:10:33.550 --> 00:10:37.530 Na verdade, esse é o desenvolvedor da web devem orientar a especificação. 00:10:38.550 --> 00:10:41.990 Então, o que decidimos era para ser pragmático, como mencionei anteriormente. 00:10:41.990 --> 00:10:45.790 Vamos trabalhar com padrões da web, mas às vezes, precisamos atualizar ou 00:10:45.790 --> 00:10:47.290 Alinhe as especificações. 00:10:47.290 --> 00:10:50.610 Às vezes, teremos que corrigi bibliotecas por aí. 00:10:50.610 --> 00:10:54.480 Às vezes, teremos de fornecer comentários para outros navegadores de Web e 00:10:54.480 --> 00:10:59.180 Obviamente, a qualquer momento queremos trabalhar, correção nossos próprios navegadores. 00:10:59.180 --> 00:11:03.080 A maneira que queremos que a web trabalho é que ela só deve funcionar. 00:11:03.080 --> 00:11:05.490 Para abrir uma página da Web com borda. 00:11:05.490 --> 00:11:07.070 Ele deve funcionar, certo? 00:11:08.490 --> 00:11:09.910 E, obviamente, Como já foi mencionado, 00:11:09.910 --> 00:11:13.760 podemos fornecer bibliotecas de bugs ou qualquer janela do navegador. 00:11:13.760 --> 00:11:16.900 Por isso não é apenas nos realmente. 00:11:16.900 --> 00:11:20.290 Trata-se também de como vimos pelos usuários. 00:11:20.290 --> 00:11:24.090 Então, vamos analisar alguns exemplos para dar uma idéia de como conseguimos corrigir 00:11:24.090 --> 00:11:26.950 algumas das coisas muito facilmente. 00:11:26.950 --> 00:11:29.340 Vamos reinicializar a página à esquerda 00:11:29.340 --> 00:11:33.210 antes de apresentarmos algumas das as correções para nosso servidor de web. 00:11:33.210 --> 00:11:37.710 Assim, ele foi executado em Windows phone e IE. 00:11:38.980 --> 00:11:43.150 E ele não estava funcionando bem porque sobre as partes do site, 00:11:43.150 --> 00:11:47.620 as pessoas que provavelmente pensa Você deve superar com iPhone ou 00:11:47.620 --> 00:11:50.430 Android e estava fazendo algo no servidor web. 00:11:50.430 --> 00:11:52.000 Se for Android ou 00:11:52.000 --> 00:11:55.860 WebKit, por favor, forneça a versão móvel do site. 00:11:55.860 --> 00:11:58.820 Caso não forneça a área de trabalho versão do site. 00:11:58.820 --> 00:12:02.800 O problema para nós é que o IE era uma versão móvel do Internet Explorer em execução em 00:12:02.800 --> 00:12:07.810 Windows phone e, em seguida, adicionado mobile, outra versão móvel. 00:12:07.810 --> 00:12:12.740 Portanto, para alterar isso, Apresentamos apenas uma determinada 00:12:12.740 --> 00:12:17.740 forma, encontramos um esqueleto chave de UID, na verdade. 00:12:17.740 --> 00:12:21.680 Portanto, a maneira é simplesmente dizer que não estamos no IE, 00:12:21.680 --> 00:12:25.190 Estamos também trabalhando como servidor E ou Android. 00:12:25.190 --> 00:12:28.510 E a forma que o código do servidor da web pensará que estamos um iPhone e 00:12:28.510 --> 00:12:32.270 um dispositivos com Android e serviço o conteúdo para os dispositivos móveis. 00:12:32.270 --> 00:12:36.560 E ele irá trabalhar diretamente porque não havia nenhum problema 00:12:36.560 --> 00:12:39.020 a parte de execução ring do mecanismo de JavaScript. 00:12:39.020 --> 00:12:42.240 Era apenas alguns incorreto detecção do lado do servidor 00:12:42.240 --> 00:12:44.709 que foi quebrar a execução Toque na versão do mobile. 00:12:46.510 --> 00:12:50.060 Portanto, decidimos Altere nosso User-Agent. 00:12:50.060 --> 00:12:53.990 Portanto, imagino que todos vocês sabem Cadeias de caracteres do agente do usuário. 00:12:53.990 --> 00:12:57.450 E vamos voltar no histórico novamente do primeiro, 00:12:57.450 --> 00:12:59.800 Qual apresentou qual é o Netscape. 00:12:59.800 --> 00:13:03.240 E estamos usando a versão 5 do Mozilla. 00:13:03.240 --> 00:13:06.420 E todos têm sido combinação de todas as etapas. 00:13:06.420 --> 00:13:10.720 Portanto, podemos está jogando o mesmo jogo Quando o cromo inserido o jogo e 00:13:10.720 --> 00:13:15.190 decidiram introduzir um tipo Coisas Gecko para adicionar ao 00:13:15.190 --> 00:13:16.678 O código da versão do Firefox. 00:13:16.678 --> 00:13:20.200 O servidor web foi detecção que e Hoje em dia você pode ver que, 00:13:20.200 --> 00:13:22.905 todo mundo está sendo cópia colagem de versão diferente. 00:13:22.905 --> 00:13:25.640 Portanto, a idéia é realmente para não fazê-lo mais, 00:13:25.640 --> 00:13:31.490 Para usar a detecção de algum recurso em vez de rastreamento a assistência ao usuário. 00:13:31.490 --> 00:13:33.010 Outras coisas interessantes. 00:13:33.010 --> 00:13:36.300 Então, vamos para ir para um site que não estava funcionando bem na 00:13:36.300 --> 00:13:38.440 IE11 um Windows 8.1. 00:13:38.440 --> 00:13:41.070 O principal problema era devido ao fato de que, 00:13:41.070 --> 00:13:43.620 o código estava usando alguns prefixos. 00:13:43.620 --> 00:13:48.750 Para que prefixos foram usados para ativar você testar alguns recursos novos. 00:13:48.750 --> 00:13:49.390 Portanto, por exemplo, 00:13:49.390 --> 00:13:53.630 aqui, o site estava usando a versão de avaliação edition - webkit. 00:13:53.630 --> 00:13:56.520 Problema é que webkit- não está sendo usada pelo IE. 00:13:56.520 --> 00:13:59.440 Obviamente, você pode ver, estamos usando Trident, como podemos estava dizendo. 00:13:59.440 --> 00:14:01.690 Portanto, para gerenciar para resolver esse problema, 00:14:01.690 --> 00:14:07.300 Decidimos adicionar algumas das recurso específico do webkit-, CSS, 00:14:07.300 --> 00:14:12.190 para a versão de inicialização está sendo usada IE e hoje em dia, Microsoft Edge. 00:14:12.190 --> 00:14:13.110 Basta fazer isso, 00:14:13.110 --> 00:14:16.890 em seguida, nós já foi corrigindo muita problema na web, porque o código 00:14:16.890 --> 00:14:19.950 será não atualizá-lo para o último versão da especificação. 00:14:19.950 --> 00:14:23.260 E estamos usando o último versão da especificação. 00:14:23.260 --> 00:14:25.160 >> Sim, Isso é um ponto interessante aqui. 00:14:25.160 --> 00:14:28.450 Ele estava funcionando a renderização da web mecanismo estava funcionando mas 00:14:28.450 --> 00:14:31.900 nós não estava recebendo o direito de traço algo. 00:14:31.900 --> 00:14:34.430 Podemos estava recebendo traço MS ou nada para 00:14:34.430 --> 00:14:36.010 é realmente o problema aqui. 00:14:36.010 --> 00:14:39.585 >> Assim a idéia quando nós, assim todos os estava pensando em [INAUDIBLE] 00:14:39.585 --> 00:14:43.470 permitindo a execução com alguns novos recursos foi prefixos. 00:14:43.470 --> 00:14:47.000 O que parece uma boa idéia neste momento. 00:14:47.000 --> 00:14:51.990 Mas agora a nova versão do uso recursos experimentais seria 00:14:51.990 --> 00:14:55.690 Para usar em vez disso, as coisas sobre: sinalizadores como você pode ter em cromo e 00:14:55.690 --> 00:14:57.130 Agora na borda da Microsoft. 00:14:57.130 --> 00:14:59.370 Portanto, basta digitando que na barra de endereços 00:14:59.370 --> 00:15:02.350 Você pode habilitar alguns recursos experimentais. 00:15:02.350 --> 00:15:06.080 Portanto, se o usuário não tem que no navegador, ele não quebrará. 00:15:06.080 --> 00:15:09.660 E se o recurso torna-se então armazenado o seguinte programa 00:15:09.660 --> 00:15:11.830 Você pode, Vamos movê-lo de outro sinalizador. 00:15:11.830 --> 00:15:13.120 >> E Você não terá que alterar o código? 00:15:13.120 --> 00:15:14.110 >> Você não precise Altere o código. 00:15:14.110 --> 00:15:15.290 Ele habilitará por padrão. 00:15:18.360 --> 00:15:22.300 Assim como você poderia, também preste atenção algumas coisas. 00:15:22.300 --> 00:15:26.710 Portanto, não use a detecção, recurso de detecções, 00:15:26.710 --> 00:15:28.030 é realmente importante. 00:15:28.030 --> 00:15:31.020 Porque, por padrão você tem para que um novo navegador e 00:15:31.020 --> 00:15:33.130 navegador desconhecido são bons por padrão. 00:15:33.130 --> 00:15:34.640 Então, vamos imaginar que hoje em dia. 00:15:34.640 --> 00:15:35.480 Eu não sei. 00:15:35.480 --> 00:15:40.660 A maioria de vocês escreve um novo programa com um novo endereço para o nome e o novo usuário. 00:15:40.660 --> 00:15:43.552 Mas é bom porque ele moderno. 00:15:43.552 --> 00:15:45.083 Portanto, não é necessário que detectar isso. 00:15:45.083 --> 00:15:46.230 E preencha alguns pacotes. 00:15:46.230 --> 00:15:47.720 Portanto, estamos todos os sacos de preenchimento de hoje. 00:15:47.720 --> 00:15:52.100 Portanto, você tem um monte de baias de bug Você pode preencher, isso em mosy@google. 00:15:52.100 --> 00:15:55.350 E agora você também pode enviar alguns bugs você nos avisar 00:15:55.350 --> 00:15:57.860 que são o problema, talvez seja necessário em nosso mecanismo de renderização. 00:15:57.860 --> 00:16:01.025 Enviando apenas algumas simples código, como em JSFiddle ou 00:16:01.025 --> 00:16:04.070 e nós será revisá-lo e Tente corrigir nosso engine. 00:16:05.800 --> 00:16:08.680 >> Muito bem, então suficiente sobre a história e Por que fizemos isso e 00:16:08.680 --> 00:16:10.800 mais sobre os novos recursos que adicionamos. 00:16:10.800 --> 00:16:17.560 Ponto até um pouco antes de uma mecanismo, nós sabemos significa impor um ritmo mais rápido. 00:16:18.710 --> 00:16:21.080 É óbvio que não precise gastar tempo. 00:16:21.080 --> 00:16:25.061 Pense se todos a porção de if ainda que tínhamos no tempo é 00:16:25.061 --> 00:16:27.440 Trabalhando com o novo recurso de que adicionar. 00:16:27.440 --> 00:16:28.320 Portanto, isso é fácil 00:16:28.320 --> 00:16:31.690 nós e aqui é esse novo recurso que é está trabalhando. 00:16:31.690 --> 00:16:36.124 É apenas um extrato do o status.modern.ie 00:16:36.124 --> 00:16:38.480 site é nosso roteiro. 00:16:38.480 --> 00:16:40.260 O que estamos trabalhando no? 00:16:40.260 --> 00:16:41.930 O que já é feito. 00:16:41.930 --> 00:16:45.026 Tudo aqui é público. 00:16:45.026 --> 00:16:49.164 Você só precisa ir para status.Modern.IE encontrar muita 00:16:49.164 --> 00:16:50.579 etapas que fizemos. 00:16:50.579 --> 00:16:55.451 Fizemos milhões de coisas novas apenas para garantir que sabemos o caminho 00:16:55.451 --> 00:16:59.210 na interoperabilidade seção está funcionando bem. 00:16:59.210 --> 00:17:03.876 Tivemos novos recursos, fizemos correções para capacidade interoperável. 00:17:03.876 --> 00:17:07.339 Mais sobre ele ir para status.Modern.IE você pode encontrar todas as 00:17:07.339 --> 00:17:09.146 informações que desejar. 00:17:09.146 --> 00:17:12.251 E também, você encontrará as coisas que estamos trabalhando e 00:17:12.251 --> 00:17:14.670 coisas que estamos considerando isso muito. 00:17:14.670 --> 00:17:17.359 Portanto, basta aguardar um bom motivo para implementá-las. 00:17:18.990 --> 00:17:23.510 Portanto, vamos dar uma olhada em quais é possível com borda. 00:17:23.510 --> 00:17:24.410 OK? 00:17:24.410 --> 00:17:25.850 Portanto, eu alternará para seis. 00:17:29.880 --> 00:17:34.520 A primeira demonstração deseja mostrar é este aqui. 00:17:34.520 --> 00:17:38.230 Esta demonstração foi desenvolvida com um amigo nosso, Michel Rousseau, 00:17:38.230 --> 00:17:40.570 quem é um designer, um designer 3D. 00:17:40.570 --> 00:17:45.550 E fizemos nós objeto 3D no 3Ds Max. 00:17:47.440 --> 00:17:51.865 Nenhum plug-in Edge Microsoft somente, Este webGL de recursos 00:17:51.865 --> 00:17:53.870 OGO de Web e Game Pad. 00:17:53.870 --> 00:17:58.820 Deixe-me apenas ativar o Game Pad aqui, encontre o Game Pad em algum lugar. 00:17:58.820 --> 00:18:00.100 >> O direito Game Pad. 00:18:00.100 --> 00:18:02.595 >> Sim porque >> Que é a correta. 00:18:02.595 --> 00:18:04.010 >> Muito bem. 00:18:04.010 --> 00:18:07.810 >> E pode apenas transformamos Apague as luzes isso é possível 00:18:08.980 --> 00:18:12.730 Talvez não, Desculpe, tente ir para lá. 00:18:12.730 --> 00:18:17.060 Portanto, esta versão executado no meu pouco 1 x seu HD um Intel placa isso 00:18:17.060 --> 00:18:20.850 um o menos que outra pessoa podemos encontrar por aí. 00:18:20.850 --> 00:18:24.490 E vemos que estamos executando em 60 quadros por segundo. 00:18:24.490 --> 00:18:26.287 E com o áudio de Web 00:18:26.287 --> 00:18:31.798 executando para dar nesse maravilhosa atmosfera que pode dizemos. 00:18:31.798 --> 00:18:35.535 E mais uma vez, o som é Atualmente, seguindo a câmera 00:18:35.535 --> 00:18:39.080 [INAUDÍVEL] em câmera o que você procura. 00:18:39.080 --> 00:18:41.180 Indo do áudio na Web computar tudo para você, 00:18:41.180 --> 00:18:45.140 Portanto, você terá a capacidade para que algumas coisas. 00:18:45.140 --> 00:18:48.110 É fácil fazê-lo, nós verá que juntos. 00:18:48.110 --> 00:18:49.780 Portanto, por exemplo, indo lá, 00:18:49.780 --> 00:18:53.010 Você pode ter os maravilhosos a reprodução de alguns pianos de esqueleto. 00:18:53.010 --> 00:18:55.830 E se movemos longe da o esqueleto, automaticamente, 00:18:55.830 --> 00:18:58.620 Há uma distância específica sendo o computador pela Web áudio e 00:18:58.620 --> 00:19:00.840 Você não ouvirá o som mais. 00:19:00.840 --> 00:19:03.580 E, em seguida, você pode mover para cemetery. 00:19:03.580 --> 00:19:06.320 Temos alguma diversão coisas ali. 00:19:06.320 --> 00:19:09.480 >> Até agora encontramos que clip está inativo. 00:19:11.350 --> 00:19:13.756 Descobrimos que seu fantasma. 00:19:13.756 --> 00:19:15.461 >> Eu não sei se você se lembra de clip. 00:19:15.461 --> 00:19:18.005 Quem sabia clip na sala? 00:19:18.005 --> 00:19:21.712 >> Ele está lá. 00:19:21.712 --> 00:19:23.045 Então descansar em paz, clip. 00:19:23.045 --> 00:19:25.672 >> Talvez o com que- >> Gato Schroedinger. 00:19:25.672 --> 00:19:30.212 >> Não sabemos se estava morto ou Não, então agora sabemos está inativo. 00:19:30.212 --> 00:19:34.961 >> E Finalmente, encontramos IE6 está inativo. 00:19:34.961 --> 00:19:39.171 >> [APLAUSOS] 00:19:39.171 --> 00:19:43.836 >> E live agora tempo para espartana. 00:19:43.836 --> 00:19:50.461 >> [APLAUSOS]. 00:19:50.461 --> 00:19:53.635 >> Para que o objetivo principal aqui é Mostrar que sem qualquer plug-in 00:19:53.635 --> 00:19:57.444 apenas web, podemos fazer realmente impressionantes coisas como em um aplicativo nativo 00:19:57.444 --> 00:19:58.090 Na verdade. 00:19:58.090 --> 00:19:59.730 >> Apenas imagine ter que em tela inteira. 00:19:59.730 --> 00:20:03.010 Ninguém provavelmente será sabe ou não é que o PC é HTML5 em execução e 00:20:03.010 --> 00:20:03.990 Código JavaScript. 00:20:03.990 --> 00:20:05.461 Portanto, é bem legal. 00:20:05.461 --> 00:20:08.907 >> Muito bem, além de exemplo, demonstrado ontem durante 00:20:08.907 --> 00:20:12.610 a apresentação é Arcade de vôo mesmo texto aqui. 00:20:12.610 --> 00:20:14.010 Você pode, obter, tudo bem, isso 00:20:14.010 --> 00:20:18.575 Simplesmente, sou deste jogo específico, então Desculpe. 00:20:18.575 --> 00:20:20.170 Mesma coisa aqui. 00:20:20.170 --> 00:20:20.900 >> Está pronto para voar? 00:20:20.900 --> 00:20:24.661 Usar o direito e teclas de seta para a esquerda para ativar 00:20:24.661 --> 00:20:25.380 >> Certeza. 00:20:25.380 --> 00:20:25.973 Fiz. 00:20:25.973 --> 00:20:28.132 >> E o acima e abaixo da seta chaves [CROSSTALK] [INAUDIBLE] 00:20:28.132 --> 00:20:33.339 >> Web aqui não está resolvendo 00:20:35.258 --> 00:20:39.750 com os jogadores. 00:20:39.750 --> 00:20:44.010 Portanto, se você está camadas back estão jogando, portanto. 00:20:44.010 --> 00:20:44.990 >> Mas Obrigado. 00:20:44.990 --> 00:20:47.730 Aqui, temos durm para processam a interface de usuário. 00:20:47.730 --> 00:20:50.867 Dentro da durm, temos a kent Blaster, temos as coisas WebGm. 00:20:50.867 --> 00:20:53.260 Webaab é usado para fazer o som. 00:20:53.260 --> 00:20:55.389 Temos jogo pacotes de nós comprar diretamente sem nenhum 00:20:56.540 --> 00:20:59.210 vez de plug-in específica novamente, isso é simplesmente incrível. 00:20:59.210 --> 00:21:02.000 >> E, finalmente, vamos Mova para outra coisa. 00:21:02.000 --> 00:21:04.730 Portanto, tudo o que foi criado sobre nosso 00:21:04.730 --> 00:21:06.935 mecanismo favorito que é Babylon GS. 00:21:06.935 --> 00:21:10.490 [RIR] Um código-fonte aberto Web framework gl assim 00:21:10.490 --> 00:21:13.700 Esta é a coisa com showcase durante a primeira sessão de abertura. 00:21:13.700 --> 00:21:17.690 Portanto, ele está sendo executado no Pompeii cidade que foi 00:21:17.690 --> 00:21:19.090 reconstituídos alguns drones. 00:21:19.090 --> 00:21:23.150 Por isso adotamos algumas imagens da cidade e reconstruir uma malha 3D completa 00:21:23.150 --> 00:21:25.940 que realmente use com Alguns muito de texturas. 00:21:25.940 --> 00:21:29.870 Estamos usando, reconhece seu 3D especialistas que podemos está nomeando a carga. 00:21:29.870 --> 00:21:33.560 Portanto, é uma forma de carregar o dispositivo versão da malha com base em 00:21:33.560 --> 00:21:34.640 a distância que você está. 00:21:34.640 --> 00:21:37.860 >> Nós temos mais do que um trilhões pixels aqui porque os drones 00:21:37.860 --> 00:21:40.390 a capacidade de capturar >> Uma célula T para 00:21:40.390 --> 00:21:41.850 cada dois centímetros. 00:21:41.850 --> 00:21:43.040 Então centímetros três. 00:21:43.040 --> 00:21:44.640 Espero que você obtê-lo. 00:21:44.640 --> 00:21:45.980 Não há tradução um. 00:21:47.150 --> 00:21:48.740 >> E você verá que podemos fazer, em uma cidade, e 00:21:48.740 --> 00:21:50.840 tudo o que está sendo computação em tempo real. 00:21:50.840 --> 00:21:52.710 A cidade é, na verdade, realmente grande, portanto. 00:21:53.810 --> 00:21:55.880 Tudo pode ser executado em andamento. 00:21:55.880 --> 00:22:00.530 Usando o gamepad agora e Web GL você possa voar sobre a cidade e 00:22:00.530 --> 00:22:02.370 Você pode mover a próxima parte deste. 00:22:02.370 --> 00:22:05.950 E podemos carregará alguns superior medidas de definição e textura. 00:22:05.950 --> 00:22:10.603 E é bem legal imaginar que Essa opção estará disponível imediatamente se você 00:22:10.603 --> 00:22:14.956 Vá para um servidor web específico que pode obter esse tipo de experiência em execução 00:22:14.956 --> 00:22:16.290 no navegador. 00:22:16.290 --> 00:22:18.310 Com nenhum plugin todos. 00:22:18.310 --> 00:22:20.980 Então [INAUDIBLE] foi realmente ser capaz de demonstrar a você. 00:22:20.980 --> 00:22:23.870 E agora, precisamos mostrar a você como a- >> Como fazer isso. 00:22:23.870 --> 00:22:24.440 >> Como fazer isso. 00:22:26.010 --> 00:22:30.530 Então, vamos mudar para o computador que é um cinco e 00:22:30.530 --> 00:22:33.840 Vamos começar falando sobre o áudio na web. 00:22:35.760 --> 00:22:40.950 Assim, análise da web é uma maneira de conectar 00:22:40.950 --> 00:22:45.550 Alguns som e coloque algum som em o espaço livre no [INAUDIBLE]. 00:22:45.550 --> 00:22:48.400 Ela se baseia no gráfico de roteamento, portanto 00:22:48.400 --> 00:22:52.650 Você tem algum nó específico de áudio que vai se conectar. 00:22:52.650 --> 00:22:54.830 E, portanto, o nó pode ter algum impacto no volume, 00:22:54.830 --> 00:22:57.940 pode ter impacto sobre o livre Especialização [INAUDÍVEL]. 00:22:57.940 --> 00:22:59.450 Você poderia ter impacto nos filtros. 00:22:59.450 --> 00:23:01.810 Você pode ter alguns filtros de baixos Alguns filtros de altos. 00:23:01.810 --> 00:23:04.850 Você pode diminuir a música Você pode acelerar a música. 00:23:04.850 --> 00:23:07.060 Você pode fazer o que quiser. 00:23:07.060 --> 00:23:10.290 Como você pode imaginar em jogos, Por exemplo, usando Webado. 00:23:10.290 --> 00:23:13.490 Você pode criar algum som a forma de procedimento. 00:23:13.490 --> 00:23:15.540 Portanto, é realmente impressionante. 00:23:15.540 --> 00:23:19.860 Portanto, vou mostrar algo temos em nosso site js usando 00:23:19.860 --> 00:23:24.520 áudio de Web como let eu ativar o som. 00:23:24.520 --> 00:23:27.190 Ah, eu já foi compor a música assim desculpas para isso. 00:23:27.190 --> 00:23:30.360 Vai ser muito chato porque se trata de um loop. 00:23:30.360 --> 00:23:34.120 Apenas para mostrar o que estamos carregar som aqui, e 00:23:34.120 --> 00:23:37.400 vamos pedir para ser em loop. 00:23:37.400 --> 00:23:40.420 E a reprodução automática, e Estou comprometendo-lo para o avaliador da web. 00:23:40.420 --> 00:23:41.630 Vou mostrar a você e 00:23:41.630 --> 00:23:46.040 em seguida, vou anexá-lo música a determinados objetos 3D. 00:23:46.040 --> 00:23:47.620 Nós chamamos essa malha, e 00:23:47.620 --> 00:23:50.200 fazendo que eu não sei se você pretende realmente [INAUDIBLE] 00:23:50.200 --> 00:23:53.260 na sala porque é necessário maioria dos fones de ouvido tempo. 00:23:53.260 --> 00:23:56.070 Mas a caixa atual é Mover tudo ao redor da cabeça. 00:23:56.070 --> 00:23:59.950 E graças ao Webado, pode iterar à direita, na frente de mim, e 00:23:59.950 --> 00:24:00.730 em seguida, à esquerda, 00:24:00.730 --> 00:24:04.990 automaticamente do assistente fazer qualquer computação na parte de tela Java. 00:24:04.990 --> 00:24:08.330 Isso é processado o navegador e da API propriamente dita. 00:24:09.760 --> 00:24:13.120 Deixe-me mostrar o código. 00:24:13.120 --> 00:24:15.270 As primeiras coisas que você precisa fazer Quando você desejar criar alguns 00:24:15.270 --> 00:24:17.970 coisas de áudio da Web é Crie o contexto. 00:24:17.970 --> 00:24:21.160 Portanto, se você for um JavaScript Talvez programador 00:24:21.160 --> 00:24:25.340 Você já conhece mais ou menos Você precisa criar o contexto. 00:24:25.340 --> 00:24:28.680 Portanto, a maneira de fazer isso, portanto, fomos falar sobre isso antes. 00:24:28.680 --> 00:24:33.820 Iniciar off maneira é criar o outro contexto no objeto Window. 00:24:33.820 --> 00:24:37.240 Mas como cromo foi o primeiro uma para conectá-lo. 00:24:37.240 --> 00:24:39.060 Eles introduzidos usando um prefixo. 00:24:39.060 --> 00:24:40.810 Portanto, você pode adicionar a função a ele. 00:24:40.810 --> 00:24:43.090 Eles estão prestes a remover ele na próxima versão. 00:24:43.090 --> 00:24:45.690 Na hora média, Você precisa testar as duas versões. 00:24:45.690 --> 00:24:49.900 É a versão webkey ou a versão de prefácio en? 00:24:49.900 --> 00:24:51.890 Se depois você esteve sobre como verificar isso. 00:24:51.890 --> 00:24:57.660 Isso é can existente e criar ele e criar alguns nós específicos. 00:24:57.660 --> 00:25:01.030 Portanto, por exemplo, o nó de ganho é o volume. 00:25:01.030 --> 00:25:04.570 E em seguida, você será sobre Conecte-o a esta conexão. 00:25:04.570 --> 00:25:07.930 Essa conexão pode ser alguns alto-falantes, alguns fones de ouvido, ou 00:25:07.930 --> 00:25:11.240 Se você deseja gravar a soma para baixo em um disco por exemplo. 00:25:11.240 --> 00:25:13.970 Portanto, você está se conectando. como esse conjunto de anotações. 00:25:13.970 --> 00:25:17.610 Em seguida, quando você deseja criar algumas coisas específicas, 00:25:17.610 --> 00:25:21.155 Você precisa configurar alguns Propriedades de auto específico para 00:25:21.155 --> 00:25:24.210 [INAUDÍVEL] para instância sobre o Panner. 00:25:24.210 --> 00:25:27.920 O nó de Panner no modo de exibição de [INAUDIBLE] é uma maneira de fazer algo 3D. 00:25:27.920 --> 00:25:29.100 Nos espaços de áudio. 00:25:29.100 --> 00:25:31.750 Então, vamos dizer que você deseja criar sons 3D. 00:25:31.750 --> 00:25:35.100 Portanto, é necessário criar a panner para conectar-se que o nó de áudio 00:25:35.100 --> 00:25:36.750 para o nó de origem. 00:25:36.750 --> 00:25:37.740 E uma vez feito isso, 00:25:37.740 --> 00:25:41.750 Você precisa escolher a forma como o som se comportará no espaço 3D. 00:25:41.750 --> 00:25:44.500 Então, vamos dizer que deseja que o som para parar 00:25:44.500 --> 00:25:46.380 Depois de 10 metros de uma maneira linear. 00:25:46.380 --> 00:25:50.250 Posso configurar o que no mecanismo de definindo algumas propriedades. 00:25:50.250 --> 00:25:54.411 Então você precisa entender um monte de propriedades em nosso mecanismo de jogos e 00:25:54.411 --> 00:25:58.400 [INAUDÍVEL] decidiu configurar alguns padrão 00:25:58.400 --> 00:26:00.730 propriedades para [INAUDIBLE] e Vamos ver como ele funciona. 00:26:00.730 --> 00:26:05.139 Portanto, com base nisso, o que decidimos para criar é uma experiência engraçada. 00:26:12.140 --> 00:26:13.310 Portanto, preciso recarregá-lo. 00:26:20.150 --> 00:26:21.050 Qual é a equipe de você? 00:26:21.050 --> 00:26:22.150 Posso falar por um tempo isso. 00:26:22.150 --> 00:26:23.460 >> Sim. 00:26:23.460 --> 00:26:24.146 >> Este é o façam. 00:26:24.146 --> 00:26:28.661 E vamos dar que 00:26:32.748 --> 00:26:34.580 Portanto, não em I. 00:26:34.580 --> 00:26:35.888 Ele já está em uso. 00:26:35.888 --> 00:26:37.202 OK. 00:26:37.202 --> 00:26:39.269 Este um. 00:26:44.643 --> 00:26:47.270 >> Tem certeza já está sendo usado? 00:26:47.270 --> 00:26:48.760 >> Não, ainda não estiver em uso. 00:26:48.760 --> 00:26:49.260 >> Novamente. 00:26:50.450 --> 00:26:54.300 Trabalho de ventilação Tenho certeza de que Sim, temos tempo. 00:26:54.300 --> 00:26:59.660 Você verá que? 00:26:59.660 --> 00:27:06.010 Atualização, que deve funcionar, boa Sim, 00:27:06.010 --> 00:27:09.590 portanto a idéia Lembre-se que eu vou mostrar um cubo que foi mover ao redor de meu 00:27:09.590 --> 00:27:13.220 head e eu tiver colocado algum som Para usar os mesmos princípios. 00:27:13.220 --> 00:27:17.090 Portanto, em vez de atualizar a posição do som com base na câmera 00:27:17.090 --> 00:27:20.770 em si, decidimos atualizar o som baseado na distância 00:27:20.770 --> 00:27:22.750 estão no centro do círculo. 00:27:22.750 --> 00:27:26.180 E em cada cubo, decidi colocar alguma música específica que ter sido 00:27:26.180 --> 00:27:29.130 Redigir, isso é várias faixas do Meus musics. 00:27:29.130 --> 00:27:32.600 E quando estou mudando um dos cubos próximo ao centro da cena, 00:27:32.600 --> 00:27:34.840 ele vai bomba o volume. 00:27:34.840 --> 00:27:37.330 E quando estou removendo de o círculo, ele deve interromper o som. 00:27:37.330 --> 00:27:40.080 Assim, a idéia é permitem misturar esses sons usando o cubo. 00:27:40.080 --> 00:27:43.520 Portanto, descobrimos era muito engraçado e desde o ponteiro 00:27:43.520 --> 00:27:48.535 eventos sendo usados pelo IE 11 e por Max fora borda hoje. 00:27:48.535 --> 00:27:50.865 Agora você pode mover que experiência em uma maneira muito fácil. 00:27:50.865 --> 00:27:52.195 Portanto, precisarei de vários valores. 00:27:52.195 --> 00:27:53.985 >> Sim. >> Assim, eu perguntará alguém. 00:27:53.985 --> 00:27:54.525 >> Que 's boa. 00:27:54.525 --> 00:27:57.265 >> Por exemplo, Vejamos a figura. 00:27:57.265 --> 00:27:58.772 E, em seguida, podemos planejar a música junto. 00:27:58.772 --> 00:28:01.072 [MÚSICA] 00:28:01.072 --> 00:28:02.135 Como essa. 00:28:02.135 --> 00:28:03.965 E, em seguida, reutilize o mouse. 00:28:03.965 --> 00:28:08.520 E podemos até mesmo fazer, ver, Você pode acessar alguns do cubo. Muito bem. 00:28:08.520 --> 00:28:09.770 SO. 00:28:09.770 --> 00:28:10.950 Vou fazer piadas ignorante, 00:28:10.950 --> 00:28:13.655 porque talvez você observe que Temos um sotaque estranho. 00:28:13.655 --> 00:28:20.320 [RISADAS] E 00:28:20.320 --> 00:28:23.180 Tenho algum problema para lendo meus próprios slides como. 00:28:24.450 --> 00:28:26.890 E você pode escrever a versão frontal as músicas por blocos de construção 00:28:26.890 --> 00:28:28.950 juntos, criando blocos juntos e 00:28:28.950 --> 00:28:31.200 colocar isso em algo do mesmo. 00:28:31.200 --> 00:28:31.730 >> David Obrigado. 00:28:31.730 --> 00:28:33.640 Vamos mudar para meu. 00:28:33.640 --> 00:28:38.020 Vamos mudar para algo completamente diferente. 00:28:38.020 --> 00:28:40.790 Eu quero mostrar a você os recursos CSS. 00:28:40.790 --> 00:28:42.910 Isso é algo que eu realmente adoro. 00:28:42.910 --> 00:28:47.120 Filtro de CSS é uma maneira de qualquer desenvolvedor de web para adicionar 00:28:47.120 --> 00:28:50.650 lançar o processo usando o efeito sombreadores em qualquer elemento inútil. 00:28:52.310 --> 00:28:56.160 E para mostrar que, neste exemplo Eu tenho um isso lendo a página. 00:28:56.160 --> 00:28:58.590 Eu quero ler meu texto, mas Eu tenho este Dragão maravilhosa. 00:28:58.590 --> 00:29:02.160 Eu sou grande fã do Dragão Se você não observar. 00:29:02.160 --> 00:29:04.180 E eu não quero Remova meu Dragão. 00:29:04.180 --> 00:29:06.500 Quero manter meu Dragão mas Quando eu quero ler meu texto 00:29:06.500 --> 00:29:08.520 Quero apenas remover a distração. 00:29:08.520 --> 00:29:10.810 Podemos encontrar que em um modo de exibição de leitura qualquer que seja. 00:29:10.810 --> 00:29:14.360 O que eu estou fazendo quando Eu estou posicionar o texto. 00:29:14.360 --> 00:29:19.590 Apenas aplicando o [INAUDIBLE] no meu elemento div na parte de trás. 00:29:19.590 --> 00:29:23.340 Portanto, apenas Posso apenas facilmente ler o texto. 00:29:23.340 --> 00:29:28.170 Também tenho a oportunidade de Use escala de cinza e desfoque juntos. 00:29:28.170 --> 00:29:31.510 É possível mesclar recursos de CSS para 00:29:31.510 --> 00:29:34.410 em seguida, ele será indefinido e escala de cinza. 00:29:34.410 --> 00:29:39.280 E se você vir que consigo reproduzir [INAUDÍVEL] 60 quadros por segundo e 00:29:39.280 --> 00:29:40.500 Você pode controlá-lo facilmente. 00:29:40.500 --> 00:29:42.450 Portanto, vamos ter apenas uma olhada no código. 00:29:42.450 --> 00:29:45.150 E para que estou usando Visual Código do Studio, eu adoro essa ferramenta. 00:29:46.290 --> 00:29:48.975 Eu apenas desinstalado Sublime texto. 00:29:48.975 --> 00:29:52.070 >> [RIR] >> Por isso! 00:29:52.070 --> 00:29:54.200 O que temos aqui é tudo, na verdade, muito simples. 00:29:54.200 --> 00:29:58.110 Eu tenho meu texto aqui, Este conteúdo. 00:29:58.110 --> 00:30:00.211 E eu tenho meu plano de fundo. 00:30:00.211 --> 00:30:05.131 Este é o diveware coloquei usando a regra de css aqui, 00:30:05.131 --> 00:30:09.220 Coloquei apenas meu backup imagem JPG dentro. 00:30:09.220 --> 00:30:14.890 E o que eu quero fazer é, quando eu Meu texto de foco, eu quero aplicá-la. 00:30:14.890 --> 00:30:17.560 A regra de CSS digamos, OK, 00:30:17.560 --> 00:30:20.370 Vamos usar o efeito de desfoque com esse tamanho de desfoque. 00:30:20.370 --> 00:30:23.835 E como eu estou caminhando bem, Estou usando o versão de prefixos e 00:30:23.835 --> 00:30:25.280 Além disso, a versão de unprefixes 00:30:25.280 --> 00:30:28.790 para garantir que eu não ter problema no futuro. 00:30:28.790 --> 00:30:31.440 Isso do ponto de vista de o JavaScript código propriamente dito que do 00:30:31.440 --> 00:30:32.780 muito simples. 00:30:32.780 --> 00:30:36.140 Aplicar a regra de CSS ao passar o mouse. 00:30:36.140 --> 00:30:38.590 Ao retirar o mouse remover a regra de CSS. 00:30:38.590 --> 00:30:39.090 Isso é tudo. 00:30:40.250 --> 00:30:42.950 E um outro exemplo que Estou fazendo quando eu clicar em 00:30:42.950 --> 00:30:44.390 no objeto em escala de cinza. 00:30:44.390 --> 00:30:47.590 Você também pode controlar isso obviamente diretamente a partir de JavaScript ao dizer 00:30:47.590 --> 00:30:50.700 Desejo desfoque e em tons de cinza. 00:30:50.700 --> 00:30:52.640 Portanto, você pode combinar todos os efeitos, 00:30:52.640 --> 00:30:55.310 Você pode fazer convoluções, sépia, qualquer que seja. 00:30:55.310 --> 00:30:58.060 Você pode executar o photoshop como efeito. 00:30:58.060 --> 00:31:01.720 Em seguida, clicamos e é totalmente acelerando o uso de sombreador, então 00:31:01.720 --> 00:31:03.270 que está livre para usar. 00:31:03.270 --> 00:31:04.470 Fazer isso. 00:31:04.470 --> 00:31:05.700 O principal problema que nós temos, 00:31:05.700 --> 00:31:10.250 é que um dia, Filtros CSS podem não ser suportados. 00:31:10.250 --> 00:31:13.300 Portanto, isso levar a outra demonstração. 00:31:13.300 --> 00:31:14.170 David? 00:31:14.170 --> 00:31:15.470 >> Sim. 00:31:15.470 --> 00:31:16.240 >> Este um. 00:31:16.240 --> 00:31:20.020 Desta vez, vamos apenas Mostrar, como ele deveria funcionar. 00:31:20.020 --> 00:31:24.980 Assim como você pode ver, Eu sempre tenho o mesmo resultado. 00:31:26.950 --> 00:31:30.230 Mas o que acontece se CSS Não há suporte para o filtro? 00:31:30.230 --> 00:31:31.710 E para simular a, e 00:31:31.710 --> 00:31:35.390 para mostrar a você e todos os sinalizadores estão trabalhando, eu posso entrar e 00:31:35.390 --> 00:31:38.910 até o momento certo, diga o filtro CSS é um recurso experimental. 00:31:38.910 --> 00:31:44.130 E quero não usá-las apenas Para ver como eles podem trabalhar 00:31:44.130 --> 00:31:46.150 Se não houver nenhum filtro CSS. 00:31:46.150 --> 00:31:50.400 Portanto, eu tenho apenas fazer isso, Reinicie o navegador. 00:31:52.180 --> 00:31:56.890 Switch para suportar aqui e Eu tenho o comportamento não reservado. 00:31:56.890 --> 00:31:59.455 Dessa vez porque CSS Não há suporte para o recurso, 00:31:59.455 --> 00:32:03.480 Eu estou apenas brincando com a opacidade da imagem e 00:32:03.480 --> 00:32:07.400 defini-la como 0,1, para podemos ver o plano de fundo. 00:32:07.400 --> 00:32:11.420 Como fazer para que sem qualquer código qualquer código JavaScript? 00:32:11.420 --> 00:32:13.890 É interessante pergunta que faço. 00:32:16.000 --> 00:32:17.710 Tenho apenas usar um bem legal 00:32:17.710 --> 00:32:23.530 novo recurso chamado ArtsReport me permitir testar a presença ou 00:32:23.530 --> 00:32:29.150 a ausência de qualquer regra CSS mesmo com o parâmetro associado. 00:32:29.150 --> 00:32:31.780 Portanto, é realmente interessante aqui. 00:32:31.780 --> 00:32:38.190 Se não há suporte para o filtro de webkit para desfocar com 20 pixels, ou, 00:32:38.190 --> 00:32:42.090 Se houver suporte ou se filtrar com Desfoque com 20 pixels é suportado, 00:32:42.090 --> 00:32:44.820 Vamos definir que o desfoque regra é esta. 00:32:46.760 --> 00:32:49.200 E se não estiver, suporte, 00:32:49.200 --> 00:32:53.060 em seguida, vamos definir esse Desfoque apenas é alterar a opacidade. 00:32:53.060 --> 00:32:54.980 Do ponto de vista de o desenvolvedor de JavaScript 00:32:56.000 --> 00:32:58.460 o desenvolvedor de JavaScript será ainda aplica a mesma regra indefinida. 00:32:59.690 --> 00:33:02.690 Mas o CSS filtros serão removidos e 00:33:02.690 --> 00:33:05.120 substituído por opacidade, Graças ao ArtsReport. 00:33:06.480 --> 00:33:10.341 Portanto, nós podemos dar o controle sobre digamos, 00:33:10.341 --> 00:33:13.243 capacidade de adaptação ao designer CSS. 00:33:13.243 --> 00:33:13.963 Isso é realmente interessante. 00:33:13.963 --> 00:33:16.725 Isso é realmente poderoso. 00:33:16.725 --> 00:33:18.025 David. 00:33:18.025 --> 00:33:21.290 Próxima demonstração sobre livros Flex. 00:33:21.290 --> 00:33:22.480 >> Flex livros e subconjunto. 00:33:22.480 --> 00:33:25.490 Portanto, vamos voltar para minhas informações. 00:33:25.490 --> 00:33:27.100 >> Porque podemos falar sobre a capacidade de adaptação. 00:33:27.100 --> 00:33:27.780 >> Sim. 00:33:27.780 --> 00:33:30.310 Assim, hoje em dia você já viu que falamos muito sobre 00:33:30.310 --> 00:33:33.580 design responsivo e mais sobre design adaptável, 00:33:33.580 --> 00:33:38.790 que é mais como adaptar a UX Global ao dispositivo atual. 00:33:38.790 --> 00:33:41.840 E quando se está criando alguns coisas responsiva, você terá de mídia 00:33:41.840 --> 00:33:46.080 consultas, você tem muito legal novo vídeo como a caixa flex. 00:33:46.080 --> 00:33:49.190 Mas o problema quando pode ter você deseja exibir algumas imagens e 00:33:49.190 --> 00:33:53.350 Se você tem vários definição sobre a resolução das imagens 00:33:53.350 --> 00:33:57.208 Digamos que, para usar um iPhone algumas telas do responsável pela retenção, para 00:33:57.208 --> 00:33:58.897 um telefone clássico e de um PC. 00:33:58.897 --> 00:34:02.740 E você não deseja baixar todas as imagens no lado do cliente e 00:34:02.740 --> 00:34:06.630 Para definir, através de JavaScript, como escolher um adequado? 00:34:06.630 --> 00:34:09.150 Portanto, seria melhor permitir que o navegador decidir 00:34:09.150 --> 00:34:11.510 com base no que está acontecendo em execução? 00:34:11.510 --> 00:34:15.970 Portanto, se ele estiver sendo executado os novos Windows phone com nossa 00:34:15.970 --> 00:34:19.430 tela, resolução, quero mostrar a versão específica da imagem, 00:34:19.430 --> 00:34:21.730 em vez disso, outro o dispositivo de carga. 00:34:21.730 --> 00:34:25.710 Para fazer isso, você tem SourceSet está disponível. 00:34:25.710 --> 00:34:27.310 Isso é muito simple de usar. 00:34:27.310 --> 00:34:30.030 A primeira coisa que você precisa Para usar a marca de imagem 00:34:30.030 --> 00:34:33.570 é usar a origem clássica Talvez você tenha de propriedade. 00:34:33.570 --> 00:34:34.370 Portanto, é um retorno ao estado. 00:34:34.370 --> 00:34:37.480 Portanto, se o navegador não é suporte de fonte definida, 00:34:37.480 --> 00:34:40.610 ele vai usar Esta imagem específica. 00:34:40.610 --> 00:34:42.290 Então, vamos fazer isso por padrão. 00:34:42.290 --> 00:34:46.890 Mas, se o navegador está sendo capaz de lidar com esta nova propriedade ali, 00:34:46.890 --> 00:34:53.230 Você pode dizer ao navegador, por favor Use essa versão da imagem x1. 00:34:53.230 --> 00:34:57.720 Se o atual DPI da tela corresponde exatamente a CSS e 00:34:57.720 --> 00:35:02.220 a proporção de hardware e pixels em seguida, use essa imagem. 00:35:02.220 --> 00:35:06.510 Portanto, se por exemplo ir uma tela física menor 00:35:06.510 --> 00:35:09.380 com olhos da unidade de acabamento Peça para os navegadores. 00:35:09.380 --> 00:35:13.140 Use outra versão do imagem e você tem o ponto de você 00:35:13.140 --> 00:35:17.550 pode subir que você como essa regras específicas. 00:35:17.550 --> 00:35:22.700 Isso poderia ser ótimo, agora com alguns dos membros do equipe, como por mim 00:35:22.700 --> 00:35:24.950 Há alguns tela 4K em casa. 00:35:24.950 --> 00:35:28.540 Quando você desejar ter alguns, resfriamento site está sendo exibido no. 00:35:28.540 --> 00:35:31.250 Assim, podemos escolhê-lo dessa forma. 00:35:31.250 --> 00:35:35.200 Deixe-me mostrar isso página da Web Simple em i11. 00:35:35.200 --> 00:35:37.230 Não está usando. 00:35:37.230 --> 00:35:39.320 Ele está usando a imagem padrão. 00:35:39.320 --> 00:35:43.050 E verifique se, porque quando Vou usar uma nova versão do 00:35:43.050 --> 00:35:47.390 a imagem, estou colocará uma determinada logotipo no canto superior esquerdo da imagem. 00:35:47.390 --> 00:35:51.660 Portanto, no momento, iE utiliza a imagem padrão dele foi- 00:35:51.660 --> 00:35:53.040 >> Um um manchadas. 00:35:53.040 --> 00:35:56.290 >> Um um manchada, mais uma vez, tivemos Criando com nosso jogo agente. 00:35:56.290 --> 00:35:57.660 Isso é realmente interessante. 00:35:57.660 --> 00:36:01.400 Se eu estou alternando para Microsoft Edge, Você pode ver que 00:36:01.400 --> 00:36:06.410 podemos ver a mesma imagem Traduza usando a versão 1. 00:36:06.410 --> 00:36:09.870 Mas, como simular agora que desejo que uma versão superior. 00:36:09.870 --> 00:36:13.444 [CROSSTALK] Portanto, você precisa de uma completa em um dispositivo específico. 00:36:13.444 --> 00:36:18.130 Você pode simular que usando a opção de zoom, do seu navegador. 00:36:18.130 --> 00:36:21.860 Por exemplo, digamos que eu deseja simular o fato de que 00:36:21.860 --> 00:36:24.330 a resolução de tela atual ainda é o mesmo, mas 00:36:24.330 --> 00:36:28.590 Eu quero mudar o DPI, fazendo como isso e você precisa atualizar. 00:36:28.590 --> 00:36:31.780 E você verá o navegador decidiu levar automaticamente 00:36:31.780 --> 00:36:33.520 uma versão mais recente da imagem, e 00:36:33.520 --> 00:36:36.400 tem sido download somente essa imagem específica. 00:36:36.400 --> 00:36:40.590 Portanto, para verificar que, podemos, para instância, vá em S2F2s. 00:36:42.080 --> 00:36:44.980 Descubra a demonstração adequada, deve ser isso uma. 00:36:48.250 --> 00:36:49.363 Log que aqui. 00:36:55.943 --> 00:36:58.719 E vamos verificar a rede Vamos atualizar. 00:37:00.500 --> 00:37:03.998 não era um direito, vamos Feche a borda apenas para evitar deixar-me. 00:37:03.998 --> 00:37:07.306 >> Você está realmente é bom que. 00:37:16.541 --> 00:37:17.475 >> Sim, estou realmente bons. 00:37:17.475 --> 00:37:20.960 >> [DIVERTIDO] de agradecimento para suporte me David. 00:37:20.960 --> 00:37:23.150 E você pode ver que o navegador decidido, 00:37:23.150 --> 00:37:24.990 para carregar apenas o elemento adequado versão da imagem. 00:37:24.990 --> 00:37:30.370 Portanto, você já foi referenciado um monte de imagens diferentes em seu código. 00:37:30.370 --> 00:37:33.705 Mas o navegador e o cliente decidiu escolher a correta 00:37:33.705 --> 00:37:36.525 com base na resolução atual e capacidades. 00:37:36.525 --> 00:37:41.275 E até mesmo na especificação, é especificado que o navegador 00:37:41.275 --> 00:37:44.865 pode até mesmo optar por carregar a imagem com base na largura de banda atual. 00:37:44.865 --> 00:37:48.025 Então, digamos que você tem uma tela de retina, portanto você está muito 00:37:48.025 --> 00:37:50.735 satisfeito com isso, mas você tem uma conexão muito lento para baixo. 00:37:50.735 --> 00:37:53.465 Provavelmente não é uma boa idéia para fornecer a alta resolução 00:37:53.465 --> 00:37:54.390 imagem do que. 00:37:54.390 --> 00:37:57.400 Portanto, se o teste está sendo sobre a diretamente você tentaria, enviar 00:37:57.400 --> 00:38:03.370 você baixa resolução da imagem para um site de velocidade, um site rápido. 00:38:03.370 --> 00:38:07.870 Assim, decidimos usar que, portanto, estou atualmente regravação do nosso site para 00:38:07.870 --> 00:38:10.530 Será um loop para nossos Site Babylon hoje. 00:38:12.700 --> 00:38:13.745 >> Este é anúncios gratuitos. 00:38:13.745 --> 00:38:15.720 >> Sim. 00:38:15.720 --> 00:38:17.130 Talvez chegaremos em apuros. 00:38:17.130 --> 00:38:17.630 Eu não sei. 00:38:18.640 --> 00:38:21.310 Assim, hoje nosso site é parecido. 00:38:21.310 --> 00:38:25.894 Por isso, tentamos imitar o moderno EUA colocar usando 00:38:25.894 --> 00:38:28.140 Alguns layouts específicos. 00:38:28.140 --> 00:38:31.870 Ficamos muito felizes com isso, mas ele não estava destacando-se. 00:38:31.870 --> 00:38:35.760 Além disso, estamos muito boas Desenvolvedores de JavaScript. 00:38:35.760 --> 00:38:37.945 Estamos menos bons designers. 00:38:37.945 --> 00:38:43.730 [RIR] E com essa idéia para alterar que, todos nós decidiu alterar isso. 00:38:43.730 --> 00:38:48.980 Para fazer isso, a nova versão que estou trabalhando no momento é esta. 00:38:48.980 --> 00:38:52.058 Portanto, eu estava usando Consultas mágicos e Flexbox. 00:38:52.058 --> 00:38:54.730 Para ter o melhor tamanho, 00:38:54.730 --> 00:38:58.220 Isso vai para adaptar-se, para a resolução atual. 00:38:58.220 --> 00:39:01.271 E o ponto positivo é pode misturar fontes caixa Flex 00:39:01.271 --> 00:39:04.190 consultas com alguns boa experiência. 00:39:04.190 --> 00:39:08.720 Se estou ampliando dentro do site, e atualizá-lo agora. 00:39:11.170 --> 00:39:14.950 Você verá novamente a resolução da imagem. 00:39:14.950 --> 00:39:18.100 E eu possa testar que, mesmo assim o projeto não foi concluído. 00:39:18.100 --> 00:39:20.540 Se você for um designer de BOM e você trabalha gratuitamente. 00:39:20.540 --> 00:39:22.560 Estamos [DIVERTIDO] são boas-vindas. 00:39:22.560 --> 00:39:23.630 >> Envie email. 00:39:27.572 --> 00:39:29.740 >> Mas, Se o que estou executando no meu telefone 00:39:31.270 --> 00:39:32.250 >> Que deve estar em algum lugar. 00:39:34.180 --> 00:39:37.292 Aqui é, isso Vou enviar leitura sobre isso. 00:39:41.307 --> 00:39:43.960 Pode vê-lo, então Este é o mesmo site. 00:39:43.960 --> 00:39:46.190 E no telefone se Estou ligando-volta, 00:39:46.190 --> 00:39:48.900 Você pode ver aqui que estou carregando em 2 x versão da imagem. 00:39:48.900 --> 00:39:52.260 Porque, atual resolução de tela meu 00:39:52.260 --> 00:39:55.390 Windows phone é alta suficiente para ter uma boa taxa da imagem. 00:39:55.390 --> 00:39:56.753 Você pode testá-lo em um dispositivo. 00:39:56.753 --> 00:39:59.776 Portanto, o BOM é que você pode testá-lo no Microsoft Edge em 00:39:59.776 --> 00:40:01.690 a área de trabalho e David estava dizendo, 00:40:01.690 --> 00:40:04.920 Esta é a mesma exata de mecanismo- Executando o Windows phone. 00:40:04.920 --> 00:40:08.092 Portanto, é muito fácil fazer apenas verificar que tudo 00:40:08.092 --> 00:40:11.420 está sendo funcionando bem, na tela do hardware específico. 00:40:11.420 --> 00:40:14.600 E, em seguida, você terá uma boa Experimente também, como esse. 00:40:15.830 --> 00:40:17.210 >> David Obrigado. 00:40:17.210 --> 00:40:19.228 Portanto, voltar a demonstração do outra. 00:40:22.936 --> 00:40:29.660 Muito bem, portanto, também, desde IE9, Prestamos suporte SVG dentro de HTML. 00:40:29.660 --> 00:40:34.460 A comunidade pedir que nós, e Graças ao UserVoice que eu 00:40:34.460 --> 00:40:37.930 Mencione depois e Obrigado aos a forma como estamos trabalhando agora. 00:40:37.930 --> 00:40:43.610 Ouvimos a comunidade, e que eles solicitem Por favor, nos suporte foreignObject. 00:40:43.610 --> 00:40:44.900 Portanto, o que é foreignObject? 00:40:44.900 --> 00:40:49.665 foreignObject é o oposto de ter SVG dentro de HTML. 00:40:49.665 --> 00:40:54.470 foreignObject é a capacidade Para incorporar o HTML dentro de SVG. 00:40:55.610 --> 00:40:58.510 Isso dessa forma, Você pode ter uma página SVG. 00:40:58.510 --> 00:40:59.510 Deixe-me mostrar. 00:41:02.280 --> 00:41:05.350 Aqui, eu tenho meu elemento HTML. 00:41:05.350 --> 00:41:08.170 Meu HTML Eu tenho meu elemento SVG, portanto 00:41:08.170 --> 00:41:10.710 processamento baseado em um vetor. 00:41:10.710 --> 00:41:16.630 E dentro desse SVG, pode ter o que aqui, chamamos a foreignObject 00:41:16.630 --> 00:41:18.180 onde posso pode colocar HTML. 00:41:19.350 --> 00:41:22.226 Portanto, é interessante porque SVG é puramente um vetor. 00:41:22.226 --> 00:41:27.020 O foreignObject, será controlado por esse vetor puramente 00:41:27.020 --> 00:41:31.830 espaço e podem ser aplicadas a qualquer específicos efeito que podemos ter para SVG. 00:41:31.830 --> 00:41:36.280 É possível misturar objeto de vetor, e coloca alguns, por exemplo, o texto contido. 00:41:36.280 --> 00:41:39.440 Podemos usar isso para jogar Como estou fazendo aqui. 00:41:39.440 --> 00:41:44.430 Eu gostaria de mostrar a você o poder de SVG usando HTML dentro. 00:41:45.440 --> 00:41:47.390 Vou usar filtros, novamente. 00:41:47.390 --> 00:41:50.317 Não é o filtro CSS neste momento é filtros SVG. 00:41:50.317 --> 00:41:52.110 Oferecemos suporte para filtros SVG. 00:41:52.110 --> 00:41:55.230 E um efeito de aplicar filtros SVG 00:41:55.230 --> 00:41:57.770 na parte superior da imagem processada de vetor, OK? 00:41:57.770 --> 00:42:02.780 Esta imagem incluirá, imagem HTML processado. 00:42:02.780 --> 00:42:08.300 E o que é interessante, pois Posso fazer coisas como essa. 00:42:08.300 --> 00:42:11.110 Aqui, isso é o que eu Chame o navegador drunken. 00:42:14.630 --> 00:42:17.670 Muito cerveja você vai para casa e você deseja pesquisar alguma coisa, e 00:42:17.670 --> 00:42:18.899 o mundo como este. 00:42:20.160 --> 00:42:23.874 OK, vamos procurar Borda da Microsoft. 00:42:23.874 --> 00:42:28.750 >> [RIR] >> E lembre-se de que já sabíamos que. 00:42:28.750 --> 00:42:33.420 O iFrame dentro de meu SVG está funcionando perfeitamente. 00:42:33.420 --> 00:42:34.686 Não há nenhum problema nisso. 00:42:34.686 --> 00:42:37.544 E como eu sou dentro de SVG, 00:42:37.544 --> 00:42:41.895 Aplicar na parte superior desse SVG e Use Minhas coisas. 00:42:41.895 --> 00:42:44.728 Eu tenho outra coisa que eu posso fazer com que eu queria mostrar. 00:42:44.728 --> 00:42:48.799 Isso em vez de usar que, 00:42:48.799 --> 00:42:53.061 Eu quero usar apenas esse. 00:42:56.228 --> 00:42:58.770 Opa, vamos voltar lá. 00:42:58.770 --> 00:42:59.895 Esqueci algo. 00:42:59.895 --> 00:43:00.895 >> Sim, o traço. 00:43:00.895 --> 00:43:02.728 >> Muito bem, Obrigado, David. 00:43:05.853 --> 00:43:07.450 Vamos forçar uma atualização. 00:43:07.450 --> 00:43:08.825 Esse é um navegador de Minecraft. 00:43:08.825 --> 00:43:12.270 >> [RIR] >> Assim, e o que é interessante é 00:43:12.270 --> 00:43:15.770 Se eu procuro babylonjs.com, que não é fácil. 00:43:15.770 --> 00:43:17.580 Tenho que se lembrar de clique aqui. 00:43:18.680 --> 00:43:22.660 Eu sou um player Minecraft e Poder tomar qualquer objeto 3D. 00:43:22.660 --> 00:43:27.978 E isso é, página HTML, usando o SVG, dentro de SVG há GL Web com- 00:43:27.978 --> 00:43:31.812 >> [APLAUSOS] 00:43:31.812 --> 00:43:34.639 >> Está sendo executado em 60 quadros por 00:43:34.639 --> 00:43:36.110 segundo, certo? 00:43:36.110 --> 00:43:37.740 Tenho que admitir que é apenas BOM. 00:43:38.960 --> 00:43:41.765 Portanto, não temos certeza sobre o caso de uso aqui, mas 00:43:41.765 --> 00:43:44.310 [RIR] você obter o ponto. 00:43:44.310 --> 00:43:44.850 Você obtém o ponto. 00:43:44.850 --> 00:43:46.440 Você pode usar HTML dentro de SVG. 00:43:46.440 --> 00:43:46.940 Isso é legal. 00:43:48.300 --> 00:43:49.975 Eu sou muito claro que seu filho vai adorar que. 00:43:49.975 --> 00:43:54.090 >> [RIR] >> E, em seguida, as coisas mais recentes 00:43:54.090 --> 00:43:59.115 Queremos mostrar equipe antes Mover para o Q&A é HTTP/2. 00:43:59.115 --> 00:44:01.944 HTTP/2 é um pouco difícil 00:44:01.944 --> 00:44:06.884 para encontrar algo muito visual para que você veja o que é HTTP/2. 00:44:06.884 --> 00:44:11.490 Bem, HTTP/2 está sendo construído Obrigado para o Google tem feito 00:44:11.490 --> 00:44:12.350 com SPDY. 00:44:12.350 --> 00:44:15.670 Portanto, é SPDY, está tentando para criar algo novo 00:44:15.670 --> 00:44:20.252 diferente de HTTP/1.1 Agora é razoavelmente antiga. 00:44:20.252 --> 00:44:21.790 Acreditamos que alguns dispositivos móveis, e 00:44:21.790 --> 00:44:24.520 outros novos dispositivos, temos alguns problema com o desempenho. 00:44:24.520 --> 00:44:27.890 Por isso, tentamos localizar Alguns acessos ilegais em que. 00:44:27.890 --> 00:44:31.680 Então, vamos falar por exemplo o número de solicitações de que um navegador pode 00:44:31.680 --> 00:44:33.160 Envie para um servidor web. 00:44:33.160 --> 00:44:38.100 E a maior parte do tempo, por padrão foi quatro solicitações simultâneas 00:44:38.100 --> 00:44:42.720 o servidor web de um determinado cliente em um domínio específico. 00:44:42.720 --> 00:44:45.490 Portanto, se você quiser carregar, Digamos que 10 ou 00:44:45.490 --> 00:44:48.740 imagem 20, desta Web servidor de seus clientes. 00:44:48.740 --> 00:44:52.914 Só foi possível fazê-lo por meio de quatro diferentes solicitações e 00:44:52.914 --> 00:44:54.300 Você terá que aguardar a ele. 00:44:54.300 --> 00:44:59.000 E se você quiser, fica lá fora era um golpe sendo conhecido por todas as pessoas. 00:44:59.000 --> 00:45:01.960 Portanto, você pode criar vários domínios como CDNs. 00:45:01.960 --> 00:45:06.570 Portanto, CDN número um, dois, número de CDN Número CDN três ou quatro. 00:45:06.570 --> 00:45:10.480 Digamos que e graças ao que Você é capaz de quatro solicitações para 00:45:10.480 --> 00:45:14.190 a CDN primeira e, em seguida, quatro solicitações para o outro, etc. 00:45:14.190 --> 00:45:15.580 Mas, você está fazendo o tipo de hackers, 00:45:15.580 --> 00:45:21.160 porque o navegador tem de fazer isso Além disso, o fato de que você foi forçado. 00:45:21.160 --> 00:45:24.520 Quando você fazer algo muito solicitação para adicionar muitos 00:45:24.520 --> 00:45:28.620 sobrecarga sobre cada de a solicitação HTTP para o servidor web. 00:45:28.620 --> 00:45:33.522 Portanto, escrever HTTP/2 estará agora tratados pela força-tarefa IETF como 00:45:33.522 --> 00:45:36.860 um início-out e Estamos todos trabalhando nisso. 00:45:36.860 --> 00:45:39.510 Portanto, é implementado pela borda da Microsoft e 00:45:39.510 --> 00:45:41.390 O cromo e o Firefox. 00:45:41.390 --> 00:45:45.510 E a idéia de que eu estou procurando uma página da web do servidor do Google, 00:45:45.510 --> 00:45:48.890 Portanto, eles já foram implementá-lo em um dos seu pilha de servidor. 00:45:48.890 --> 00:45:53.476 E você verá que a maneira de Carregar imagem muito mais rápida para 00:45:53.476 --> 00:45:54.875 vários razão. 00:45:54.875 --> 00:45:59.095 Primeiro fomos capazes de fazer Alguns multiplexação em streams. 00:45:59.095 --> 00:46:02.335 Você não será forçado mais para enviar várias solicitações no servidor web. 00:46:02.335 --> 00:46:04.145 Você pode criar uma única solicitação, e 00:46:04.145 --> 00:46:07.155 Vamos incorporar vários fluxos dentro dessa solicitação. 00:46:07.155 --> 00:46:10.265 Assim, podemos vai negociá-lo apenas uma vez com o servidor web. 00:46:10.265 --> 00:46:14.185 Estamos usando codificação binária também, usando HTTP/2. 00:46:14.185 --> 00:46:18.370 Portanto, é mais clara na rede. 00:46:18.370 --> 00:46:22.550 E podemos dizer também que é necessário no lado do cliente. 00:46:22.550 --> 00:46:25.390 Por exemplo, Quando você carrega uma página HTML, 00:46:25.390 --> 00:46:29.330 todos nós sabemos que será alguns CSS e JavaScript dentro desse. 00:46:29.330 --> 00:46:32.840 Portanto, é um pouco burro para carregar a página HTML e 00:46:32.840 --> 00:46:35.300 em seguida, em Sim, eu sei isso arquivo JavaScript específico. 00:46:35.300 --> 00:46:37.950 Faça outra round trip para o servidor, recuperá-lo. 00:46:37.950 --> 00:46:39.810 E, em seguida, eu quero que o arquivo CSS, etc. 00:46:39.810 --> 00:46:44.573 Assim, a idéia é permitir que o servidor web Digamos que você deseja que o index. HTML, 00:46:44.573 --> 00:46:47.640 dentro do HTML, há foo. js. 00:46:47.640 --> 00:46:49.390 Portanto, o que vamos fazer na mesma solicitação 00:46:49.390 --> 00:46:52.580 Vamos enviar Faça diretamente o Foo. js, 00:46:52.580 --> 00:46:54.700 com o cliente para economizar algum tempo. 00:46:54.700 --> 00:46:56.550 Assim, podemos pode prever o que você precisa. 00:46:56.550 --> 00:46:58.170 Em vez disso, diga eu Este arquivo não é necessário 00:46:58.170 --> 00:47:00.110 Como eu já acertou no cache. 00:47:00.110 --> 00:47:04.270 Perdemos um pouco de tempo, mas a maioria das a hora em que ele ganhará a velocidade. 00:47:04.270 --> 00:47:05.790 Portanto, é uma página da Web feita pelo Google, 00:47:05.790 --> 00:47:09.690 Isso é realmente interessante porque pode simular o que está acontecendo. 00:47:09.690 --> 00:47:14.244 Portanto, vamos carregar a página usando HTTP/1 e, em seguida, 2002, 00:47:14.244 --> 00:47:17.650 Infelizmente, 200 milissegundos latência de luz. 00:47:17.650 --> 00:47:20.590 Você pode ver, ele está sendo serializados. 00:47:20.590 --> 00:47:23.690 Portanto, eu tenho várias solicitações a parte da imagem. 00:47:23.690 --> 00:47:26.170 E eu não podem fazer muito rápido, porque eu preciso 00:47:26.170 --> 00:47:30.460 Voltar para o servidor sempre para carregar alguma nova parte da página. 00:47:30.460 --> 00:47:34.120 >> E cada solicitação terão 200 milissegundos de latência. 00:47:34.120 --> 00:47:36.560 >> E a outra parte, usando HTTP/2 00:47:36.560 --> 00:47:40.300 Você verá que eu estou sendo capaz de ter Alguns fluxo múltiplos está sendo processado. 00:47:40.300 --> 00:47:42.870 E eu tenho a solicitação exclusiva, no servidor web para carregar 00:47:42.870 --> 00:47:45.790 todos os fluxos, portanto é muito mais rápido para carregar a imagem. 00:47:45.790 --> 00:47:47.770 E agora o ponto. 00:47:47.770 --> 00:47:49.928 É muito visual porque é em uma imagem. 00:47:49.928 --> 00:47:53.240 Mas pense que, com todos os caminhos da página da web que você precisa 00:47:53.240 --> 00:47:55.500 carregar do lado do servidor, e realmente com a mesma velocidade. 00:47:55.500 --> 00:47:59.750 Portanto, é muito bom ter que especificamente no mobile, 00:47:59.750 --> 00:48:02.660 sobre o Windows Phone 10 usando o Microsoft Edge. 00:48:02.660 --> 00:48:07.720 Ou todos os novos dispositivos que você pode ter tem moderno mecanismo, como se fosse 00:48:07.720 --> 00:48:11.620 amp realmente a velocidade da página da Web sem fazer nada para você. 00:48:11.620 --> 00:48:15.050 É completamente compatível com HTTP/1.1. 00:48:15.050 --> 00:48:17.310 Esta é a mesma coluna os verbos mesmos. 00:48:17.310 --> 00:48:20.610 Podemos alterar a forma de comunicar-se com o protocolo e 00:48:20.610 --> 00:48:23.740 no fluxo e todos os a net sessão envolvidos. 00:48:23.740 --> 00:48:24.240 >> Obrigado, David. 00:48:25.440 --> 00:48:30.240 Por isso, tentamos aqui manualmente selecionar alguns dos nossos recursos favoritos, 00:48:30.240 --> 00:48:33.860 Como já foi mencionado, muitos eles são ainda dentro da caixa. 00:48:33.860 --> 00:48:36.130 Portanto, a melhor idéia para Se você quiser tentar 00:48:36.130 --> 00:48:39.710 Basta instalar a mais recente versão da compilação Windows 10. 00:48:39.710 --> 00:48:41.820 O mecanismo de borda está aqui. 00:48:41.820 --> 00:48:44.660 Até o momento, ele ainda é espartana de projeto? 00:48:44.660 --> 00:48:47.940 Mas, basta alterar em sua mente e Renomeie-o para Microsoft Edge e 00:48:47.940 --> 00:48:49.100 Você obtém o ponto. 00:48:49.100 --> 00:48:53.410 Se você quiser que um recurso se você realmente deseja que um recurso, use, e 00:48:53.410 --> 00:48:56.730 Envie seus comentários no uservoice.modern.IE. 00:48:56.730 --> 00:48:59.690 Por exemplo, aqui eu capturo ASM.js. 00:48:59.690 --> 00:49:01.900 Era pedir uma enorme para a comunidade. 00:49:01.900 --> 00:49:03.870 Por favor, suporte a ASM.js. 00:49:03.870 --> 00:49:07.754 ASM.js é uma maneira para compilar C++ em JavaScript, 00:49:07.754 --> 00:49:10.820 e ASM.js adicionará alguns. 00:49:10.820 --> 00:49:14.290 Não posso dizer que, algumas informações adicionais para 00:49:14.290 --> 00:49:15.400 o coletor de lixo e para 00:49:15.400 --> 00:49:18.796 o mecanismo de JavaScript para melhorar o desempenho, certo? 00:49:18.796 --> 00:49:23.700 Mecanismo de suporte, irreal Unity suporte, portanto, se você estiver usando 00:49:23.700 --> 00:49:29.080 A unidade 5, você pode exportar apenas o jogo da Web GL com ASM.js. 00:49:29.080 --> 00:49:32.640 Agora, se você acabou de instalar o bastante versão mais recente do Windows 10 00:49:32.640 --> 00:49:35.510 e borda da Microsoft, 00:49:35.510 --> 00:49:40.530 Você será capaz de executar Web GL jogos do Unity usando ASM.js. 00:49:40.530 --> 00:49:42.112 Você vai fazer a respeito: sinalizadores. 00:49:42.112 --> 00:49:46.100 Portanto, se você ir Microsoft Edge Hoje em dia, você digita sobre: sinalizadores e 00:49:46.100 --> 00:49:50.150 Você é capaz de habilitar ASM.js dentro de borda da Microsoft. 00:49:50.150 --> 00:49:53.130 E vou mostrar outro exemplo aqui sobre as pendências. 00:49:53.130 --> 00:49:56.878 Assim, as pessoas perguntam mostrar a sintaxe erros no depurador, justo. 00:49:56.878 --> 00:50:00.838 Colocamos que em nossa lista de pendências, e indicamos que é na parte superior e 00:50:00.838 --> 00:50:02.336 Esperamos que iniciá-lo em breve. 00:50:02.336 --> 00:50:05.623 Portanto, esta é uma nova maneira de para se comunicar com vocês, e 00:50:05.623 --> 00:50:06.795 com a comunidade. 00:50:06.795 --> 00:50:09.355 Permita-nos saber que você deseja algo e 00:50:09.355 --> 00:50:13.675 nós lhe informará que estamos trabalhar com alguns que consideramos 00:50:13.675 --> 00:50:17.440 e alguns deles não são realmente em nossa lista de prioridade. 00:50:18.760 --> 00:50:21.390 Por favor, avalie a sessão. 00:50:21.390 --> 00:50:22.470 E agora é hora de pergunta. 00:50:23.670 --> 00:50:24.195 Muito bem. 00:50:24.195 --> 00:50:32.000 >> [INAUDÍVEL] >> Deixe-me mostrar [DIVERTIDO]. 00:50:33.670 --> 00:50:34.920 Ah, eu não pode responder a essa pergunta. 00:50:36.230 --> 00:50:39.449 Posso ir para tipo moderno. 00:50:39.449 --> 00:50:43.020 Caso status.modern. 00:50:43.020 --> 00:50:44.000 A questão sobre: >> Ah, Desculpe. 00:50:44.000 --> 00:50:44.756 >> Sim, por favor, a pergunta é. 00:50:44.756 --> 00:50:47.690 >> A pergunta é sobre o modelo, modelo de HTML, que é certo. 00:50:47.690 --> 00:50:48.832 Estamos trabalhando nele? 00:50:48.832 --> 00:50:49.690 >> Estamos trabalhando nele? 00:50:51.400 --> 00:50:52.110 Portanto, Sim. 00:50:52.110 --> 00:50:54.170 Até o momento, estamos sob investigação. 00:50:54.170 --> 00:50:56.520 É parte de um texto mais maior, Na verdade. 00:50:56.520 --> 00:51:01.470 Portanto, é a melhor coisa que você pode fazer nos fornecessem comentários em voz do usuário 00:51:01.470 --> 00:51:03.560 para informar-nos por que ele é realmente importante para você. 00:51:03.560 --> 00:51:04.810 Em seguida, peça recomendações a pessoas para votar. 00:51:04.810 --> 00:51:07.130 Essa é a melhor maneira de comunicar-se conosco. 00:51:07.130 --> 00:51:09.280 Mas, Sim, Sabemos que é realmente importante. 00:51:09.280 --> 00:51:11.035 E em questão. 00:51:11.035 --> 00:51:13.650 >> [INAUDÍVEL] >> Sim. 00:51:13.650 --> 00:51:16.690 Ele, algumas das outras partes pode ser facilmente preenchidos 00:51:16.690 --> 00:51:18.790 sobre os parceiros de web Eu sei por este. 00:51:18.790 --> 00:51:22.230 Uma pergunta. 00:51:22.230 --> 00:51:23.355 Muito bem? 00:51:23.355 --> 00:51:23.855 >> Então quanto estamos vai para manter 11 IE? 00:51:27.350 --> 00:51:30.679 >> Para a pergunta é, quanto tempo Vamos manter 11 IE? 00:51:30.679 --> 00:51:35.034 11 IE faz parte do Windows 10, então 00:51:35.034 --> 00:51:39.250 ciclo de vida do mesmo como 10 do Windows. 00:51:39.250 --> 00:51:41.230 >> Ciclo de vida como Vista? 00:51:41.230 --> 00:51:43.438 >> Não tenho idéia para isso, Desculpe-me assim sobre isso. 00:51:43.438 --> 00:51:49.780 Posso procurar em nossa equipe de suporte [Externa] e descobrir para você. 00:51:49.780 --> 00:51:55.093 Mas o IE 11 seriam aceitas desde como o Windows 10 terá suporte, 00:51:55.093 --> 00:51:57.194 é parte do Windows 10. 00:51:57.194 --> 00:51:58.654 Sim? 00:51:58.654 --> 00:51:59.813 >> Que é na sua camiseta? 00:51:59.813 --> 00:52:00.845 >> É uma boa pergunta. 00:52:00.845 --> 00:52:03.698 [RIR] O que há na minha camiseta? 00:52:03.698 --> 00:52:09.070 [RIR] Para manter esta pergunta, Quero ter certeza. 00:52:09.070 --> 00:52:10.946 É lá qualquer outra pergunta eu? 00:52:10.946 --> 00:52:11.782 >> Muito bem. 00:52:11.782 --> 00:52:12.618 >> Muito bem. 00:52:12.618 --> 00:52:17.060 >> [INAUDÍVEL] >> Sim. 00:52:17.060 --> 00:52:20.390 A questão é que a Microsoft está 10 será apenas 10 do Windows? 00:52:20.390 --> 00:52:22.035 E, Sim, a resposta é Sim. 00:52:22.035 --> 00:52:25.520 Muito bem. 00:52:25.520 --> 00:52:34.810 >> [INAUDÍVEL] 00:52:34.810 --> 00:52:38.051 >> Na maioria das vezes, se você estiver no 00:52:38.051 --> 00:52:44.855 o sobre sinalizadores, Acho que está aqui. Não. 00:52:44.855 --> 00:52:46.410 >> [INAUDÍVEL] 00:52:46.410 --> 00:52:47.120 >> OK. 00:52:47.120 --> 00:52:48.107 >> Sim, isso é uma boa pergunta 00:52:48.107 --> 00:52:49.105 Você [CROSSTALK] >> Mas a pergunta 00:52:49.105 --> 00:52:51.270 Você pode repetir a pergunta? >> Para a pergunta é: 00:52:51.270 --> 00:52:55.250 alguns dos recursos estão sob sinalizadores em Edge da Microsoft. 00:52:55.250 --> 00:52:57.910 Portanto, preciso ir para sinalizadores para habilitá-los. 00:52:57.910 --> 00:53:01.724 Se estiver usando o Windows 10 Web View, é possível usar, por exemplo, SMGS? 00:53:01.724 --> 00:53:06.480 >> Não Você não conseguirá [INAUDIBLE]. 00:53:06.480 --> 00:53:08.480 >> Eu tinha absoluta certeza, mas Eu queria ter certeza. 00:53:08.480 --> 00:53:11.510 >> A resposta é não. Yup. 00:53:11.510 --> 00:53:12.715 Pergunta ali? 00:53:12.715 --> 00:53:16.460 >> [INAUDÍVEL]. 00:53:16.460 --> 00:53:18.655 >> Sim. Estamos trabalhando na implementação da Web 00:53:18.655 --> 00:53:20.310 driver para Microsoft Edge. 00:53:23.296 --> 00:53:24.491 Sim? 00:53:24.491 --> 00:53:31.200 >> [INAUDÍVEL] >> Extensão. 00:53:31.200 --> 00:53:33.050 Que significa JavaScript extensão certo? 00:53:33.050 --> 00:53:37.280 Até agora, não é possível responder isso pergunta porque é realmente 00:53:37.280 --> 00:53:38.540 muito cedo para nós. 00:53:38.540 --> 00:53:40.730 Já fizemos uma demonstração ontem. 00:53:40.730 --> 00:53:43.580 Não sei, era dois dias atrás durante a apresentação. 00:53:43.580 --> 00:53:44.170 É possível. 00:53:44.170 --> 00:53:47.100 Estamos trabalhando nisso, mas tudo relacionado ao desempenho 00:53:47.100 --> 00:53:49.760 e coisas como que, estamos muito no início do nosso ciclo de desenvolvimento. 00:53:50.870 --> 00:53:52.215 Espera-se que não, claramente. 00:53:52.215 --> 00:54:02.590 >> [INAUDÍVEL] 00:54:02.590 --> 00:54:03.090 >> Eu não sei. 00:54:04.400 --> 00:54:06.100 Desculpe-me até, mas não sei. 00:54:06.100 --> 00:54:07.990 É uma parte diferente do a equipe de engenharia. 00:54:07.990 --> 00:54:09.700 Portanto, eu não quero dizer algo errado. 00:54:09.700 --> 00:54:12.010 Portanto, eu não sei. 00:54:12.010 --> 00:54:12.604 Sim? 00:54:12.604 --> 00:54:13.620 [RIR]. 00:54:13.620 --> 00:54:15.145 >> [INAUDÍVEL]. 00:54:15.145 --> 00:54:17.586 >> Então as perguntas é, 00:54:17.586 --> 00:54:23.150 é CSS ensino particular está funcionando com a transição de CSS? 00:54:24.210 --> 00:54:26.660 Eu testei com a transição, portanto, Sim. 00:54:26.660 --> 00:54:30.790 E para ver a animação, não vejo qualquer motivo por que não deveria. 00:54:30.790 --> 00:54:34.120 Verifiquei apenas mas 99% é OK. 00:54:34.120 --> 00:54:37.679 E vejo que Jacó dizer, Sim, isso é 100% Sim. 00:54:37.679 --> 00:54:39.424 [RIR]. Muito bem? 00:54:39.424 --> 00:54:43.177 >> Para o aplicativo de suporte a regras de CSS, 00:54:43.177 --> 00:54:46.670 Esse é um padrão de [INAUDIBLE]? 00:54:46.670 --> 00:54:47.810 >> Absolutamente sir, absolutamente. 00:54:49.230 --> 00:54:51.291 >> Você sabe como amplamente que é suportado em navegadores? 00:54:51.291 --> 00:54:53.996 >> Eu sei que ele tem suporte no Chrome. 00:54:53.996 --> 00:54:55.540 Podemos ir para. 00:54:55.540 --> 00:54:56.603 Você conhece este site? 00:54:56.603 --> 00:55:01.820 >> [INAUDÍVEL] >> Ainda não é- 00:55:01.820 --> 00:55:02.455 >> Sim, ele não ainda. 00:55:02.455 --> 00:55:09.400 >> [INAUDÍVEL] >> Portanto, Sim, ele é suportado. 00:55:09.400 --> 00:55:11.360 >> Firefox, Chrome, borda, maravilhosa. 00:55:11.360 --> 00:55:12.356 Vivemos em um mundo maravilhoso. 00:55:12.356 --> 00:55:16.486 >> Nenhum Safari, interessante. 00:55:17.743 --> 00:55:20.800 >> [RIR] >> [INAUDÍVEL] 00:55:20.800 --> 00:55:21.446 >> Sim? 00:55:21.446 --> 00:55:26.094 >> [INAUDÍVEL] >> Soquete de da web? 00:55:26.094 --> 00:55:27.350 Sim sir. 00:55:27.350 --> 00:55:29.165 E isso é uma boa transição, Obrigado. 00:55:29.165 --> 00:55:32.860 [RIR] Porque o que tenho em Minha camisa baseia-se em WebSocket. 00:55:32.860 --> 00:55:37.010 Para emitir uma equipe Temos apenas quatro minutos. 00:55:37.010 --> 00:55:38.050 Se você tiver qualquer pergunta, 00:55:38.050 --> 00:55:40.250 Sinta-se livre para nos pede à direita após. 00:55:40.250 --> 00:55:43.288 Eu quero mostrar a você o que é JS. 00:55:43.288 --> 00:55:46.618 Anunciamos que ontem, então Vamos explicar o que é o produto. 00:55:46.618 --> 00:55:49.820 Decidimos logo após JS para trabalhar em uma nova estrutura. 00:55:49.820 --> 00:55:53.080 Então amamos gravar novo estruturas para ajudar os desenvolvedores. 00:55:53.080 --> 00:55:56.028 Mas aparentemente não todos desenvolvedor é desenvolvedor de anúncio de web, 00:55:56.028 --> 00:55:58.190 Portanto, descobrimos que recentemente. 00:55:58.190 --> 00:56:01.586 E, em seguida, decidimos trabalhar em a estrutura que poderia ajudar a mais 00:56:01.586 --> 00:56:03.470 desenvolvedor que apenas WebGL. 00:56:03.470 --> 00:56:08.600 E quando estamos estivesse escrevendo nossos próprios código, descobrimos que ele era 00:56:08.600 --> 00:56:12.468 complexa para depurá-lo na todas as versões móveis. 00:56:12.468 --> 00:56:15.610 Quando você estiver escrevendo um código, você deseja escrevê-lo uma vez e 00:56:15.610 --> 00:56:18.700 Execute-o em todos os lugares, mas se, em seguida você deseja executá-lo em qualquer lugar, 00:56:18.700 --> 00:56:21.270 Você precisa depurá-lo em todos os lugares. 00:56:21.270 --> 00:56:24.440 O problema que é há várias ferramentas diferentes para fazer isso, mas 00:56:24.440 --> 00:56:27.500 Não há ferramentas para executar realmente em todos os lugares para nos ajudar. 00:56:27.500 --> 00:56:30.150 Portanto, decidimos escrever uma depuração 00:56:30.150 --> 00:56:32.460 estrutura de ferramenta ajudá-lo a fazer isso. 00:56:32.460 --> 00:56:38.090 E apenas com base em JavaScript puro CSS e o uso de um servidor do Node. js 00:56:38.090 --> 00:56:43.370 no back-end para permitir tempo real comunicação com o WebSocket. 00:56:43.370 --> 00:56:47.910 >> Então aqui eu tenho um servidor Node. js, Posso fazer apenas npm install Vorlon. 00:56:47.910 --> 00:56:49.240 Isto é, nada mais. 00:56:49.240 --> 00:56:51.500 Que será executado e Fornece um painel de controle. 00:56:51.500 --> 00:56:52.310 O painel é aqui. 00:56:52.310 --> 00:56:54.450 Posso ir olhar ele meu painel de controle. 00:56:54.450 --> 00:56:57.279 Se vamos aguardar para qualquer conexão usando o Web Sockets, por exemplo, 00:56:57.279 --> 00:56:58.254 Se ele for aceito, ou 00:56:58.254 --> 00:57:00.771 usando a pesquisa com assurity de TI Se ele não oferece suporte. 00:57:00.771 --> 00:57:03.400 Estamos usando Socket.IO para fazer isso. 00:57:03.400 --> 00:57:05.130 Ele funciona quase todos os lugares. 00:57:05.130 --> 00:57:06.045 Isso funciona em meu fridge. 00:57:06.045 --> 00:57:10.750 [RIR] Portanto, eu tenho uma demonstração aqui, especialmente para 00:57:10.750 --> 00:57:13.990 e Eu quero mostrar esta demonstração. 00:57:13.990 --> 00:57:15.620 Vamos abrir aqui. 00:57:15.620 --> 00:57:17.840 E eu tenho este. 00:57:17.840 --> 00:57:23.470 Portanto, apresentamos preservar 3D suporte bem dentro da borda. 00:57:23.470 --> 00:57:26.600 Portanto, temos a fatia, fazemos Esse tipo de coisa realmente interessante. 00:57:26.600 --> 00:57:31.690 Estou tentando reproduzir o que ter o media player XBMC agora. 00:57:31.690 --> 00:57:34.050 Isso é muito bom e Se eu não tenho um preservar para ele. 00:57:34.050 --> 00:57:38.820 Portanto, esta é apenas uma demonstração deseja dar porque o que. 00:57:40.350 --> 00:57:41.092 Ah, posso não. 00:57:41.092 --> 00:57:43.390 Esta demonstração não está funcionando em um dispositivo específico. 00:57:43.390 --> 00:57:46.230 Isso não é fácil saber Se estiver usando um telefone 00:57:46.230 --> 00:57:47.890 Não entender o porquê que não está funcionando. 00:57:47.890 --> 00:57:52.928 Portanto, o que pode fazer é adicionar apenas no meu 00:57:52.928 --> 00:58:01.520 uma referência de código aqui até http://localhost. 00:58:01.520 --> 00:58:03.550 Para que o servidor está em execução nesta URL. 00:58:03.550 --> 00:58:05.460 E eu quero que o vorlon.js. 00:58:05.460 --> 00:58:06.280 Isso é tudo. 00:58:06.280 --> 00:58:07.920 Você não precisa de nada mais. 00:58:07.920 --> 00:58:09.380 Crap. 00:58:09.380 --> 00:58:12.530 Você não precisa de nada mais. 00:58:12.530 --> 00:58:13.100 Parece bom. 00:58:13.100 --> 00:58:14.470 >> É necessário digitá-la corretamente. 00:58:14.470 --> 00:58:16.240 >> Sim, e Não estou realmente é bom, certo? 00:58:16.240 --> 00:58:20.610 >> Esta é a parte mais difícil, podemos Tente corrigir o problema, para ajudá-lo. 00:58:20.610 --> 00:58:22.658 >> [DIVERTIDO] parece, AH sem que não 's boa, 00:58:22.658 --> 00:58:25.750 porque esqueci esta Sim, Obrigado. 00:58:25.750 --> 00:58:27.200 Pode ser longo para mim. 00:58:28.860 --> 00:58:33.490 E, em seguida, voltar aqui, Eu estou recarregando xxyy esta página, certo? 00:58:36.520 --> 00:58:38.019 >> E vá para esse site. 00:58:39.170 --> 00:58:41.200 >> Esqueci algo mas Vou verificar isso aqui. 00:58:43.190 --> 00:58:46.430 E então Estou trabalhando em ferramenta de análise de interface do usuário 00:58:46.430 --> 00:58:49.370 Portanto, não considere a iPhone coisas aqui. 00:58:49.370 --> 00:58:52.338 Estou apenas tentando analisar o usuário cadeia de caracteres enviada pelo cliente para 00:58:52.338 --> 00:58:54.890 Quero dizer, Ei é um iPhone ou qualquer que seja. 00:58:54.890 --> 00:58:55.540 Só estou trabalhando nisso. 00:58:55.540 --> 00:58:58.540 Assim, aqui, com um simples clique no meu cliente, 00:58:58.540 --> 00:58:59.770 Posso ver que ter meu [INAUDIBLE]. 00:58:59.770 --> 00:59:03.840 Para que esse cliente pode ser qualquer dispositivo que pode acessar o servidor. 00:59:03.840 --> 00:59:05.650 Portanto, se você deseja usá-lo publicamente, 00:59:05.650 --> 00:59:08.700 Você só precisa colocar que em qualquer servidor, no Azure ou qualquer que seja. 00:59:08.700 --> 00:59:13.390 Ele funcionará e Você pode ver que você está aqui. 00:59:13.390 --> 00:59:16.700 Obviamente, você pode clicar em qualquer elemento para ver, AH Sim OK, 00:59:16.700 --> 00:59:20.330 Vejo que você estiver usando essas coisas. 00:59:20.330 --> 00:59:25.410 Selecionando itens como: Deixe-me encontrar uma interface gráfica do usuário por exemplo. 00:59:25.410 --> 00:59:29.700 Você pode então ter retângulo vermelho o item selecionado para 00:59:29.700 --> 00:59:32.520 Você sabe onde você está e o que você está trabalhando. 00:59:32.520 --> 00:59:34.460 E você também tem o console aqui. 00:59:34.460 --> 00:59:37.260 O console é realmente importante, porque se algo é 00:59:37.260 --> 00:59:41.100 falhando no dispositivo, será Envie algumas mensagens no console. 00:59:41.100 --> 00:59:43.190 O console enviará todos os as mensagens para você, 00:59:43.190 --> 00:59:44.150 Voltar ao painel de controle. 00:59:44.150 --> 00:59:45.900 Assim, você sabe o que está acontecendo. 00:59:45.900 --> 00:59:49.865 Eu queria mostrar também ferb plug-in aqui. 00:59:49.865 --> 00:59:53.428 Estamos usando modernizer em o dispositivo para conhecer todos os recursos 00:59:53.428 --> 00:59:55.550 recursos do dispositivo. 00:59:55.550 --> 00:59:58.250 Enviar de volta para o painel de controle para Você pode notar certo, 00:59:58.250 --> 01:00:01.740 Esse dispositivo específico parece Ele oferece suporte, por exemplo, 01:00:01.740 --> 01:00:04.180 CSS transformação 3D ou Preserve 3D ou qualquer que seja. 01:00:04.180 --> 01:00:06.720 Aqui, temos a lista de todos os e 01:00:06.720 --> 01:00:10.300 Tenho muito orgulho de mostrar que é na borda do DreamWeaver. 01:00:10.300 --> 01:00:10.880 Isso é legal. 01:00:10.880 --> 01:00:13.789 AH não, nós não oferecem suporte a Banco de dados SQL, mas tudo bem. 01:00:13.789 --> 01:00:17.860 Isso é antigo. 01:00:17.860 --> 01:00:21.340 Você pode também aqui, Adicione o ar quente ou qualquer que seja. 01:00:21.340 --> 01:00:25.050 Você pode simplesmente dizer que desejo executar algo aqui no Meu console e 01:00:25.050 --> 01:00:26.890 Isso será executado no cliente. 01:00:26.890 --> 01:00:29.230 Assim você pode controlar Esse tipo de coisa. 01:00:29.230 --> 01:00:30.190 Você pode fazer isso. 01:00:30.190 --> 01:00:30.910 É gratuita. 01:00:30.910 --> 01:00:33.960 Por favor, usá-lo em qualquer um dos a etapa de depuração e 01:00:33.960 --> 01:00:37.160 Estamos abertos a qualquer contribuições de >> É código-fonte aberto. 01:00:37.160 --> 01:00:40.470 >> Sim. Em seguida, adicionaremos plug-ins áudio na web 01:00:40.470 --> 01:00:47.700 para que você possa exibir o nó e Para exibir o material de áudio de web do nó. 01:00:47.700 --> 01:00:50.880 Podemos pensar em se conectar para o modo de depuração também. 01:00:50.880 --> 01:00:52.920 Assim, por exemplo, Você está escrevendo no sistema operacional do Firefox. 01:00:52.920 --> 01:00:56.230 Há uma porta do depurador onde estamos pode conectar-se para saber onde estamos em 01:00:56.230 --> 01:00:59.680 o código e, provavelmente, colocar alguns ponto de interrupção talvez no futuro. 01:00:59.680 --> 01:01:02.270 Por isso, ele tem um realmente Abra a infra-estrutura. 01:01:02.270 --> 01:01:02.850 Na verdade, é a 01:01:02.850 --> 01:01:05.730 completo porque maioria das vezes quando estamos lidando com dispositivos móveis, 01:01:05.730 --> 01:01:09.890 código do aplicativo, nada que é realmente difícil desenvolver. 01:01:09.890 --> 01:01:12.010 Isso proporciona primeiro kit de ad. 01:01:13.880 --> 01:01:15.520 Obrigado por tudo sendo lá. 01:01:15.520 --> 01:01:16.428 Agradeço muito por ele. 01:01:16.428 --> 01:01:23.810 >> [APLAUSOS] >> Não se esqueça de avaliar. 01:01:23.810 --> 01:01:25.317 >> Obrigado, Obrigado. 01:01:25.317 --> 01:01:28.330 [EXTERNA]