[Powered by Google Translate] [Seminario - Windows 8 - Desenvolvemento App / Partido con HTML5]
[Chris Bowen, Edwin Guarin - Universidade de Harvard]
[Isto é CS50. - CS50.TV]
>> Hey, todo o mundo. O meu nome é Edwin Guarin. Este é Chris Bowen.
Vou deixar presentarse en un segundo.
Eu só quero facer un anuncio rápida.
Primeiro de todo, todo o que CS50 alumnos reciben Windows 8 de balde.
Entón, se está a pensar en realmente utilizalo para o seu proxecto final, que é o seu.
Nate pode enviar un correo-e máis tarde para obter instruccións.
A segunda cousa é se decide escribir unha aplicación Windows 8 para o seu proxecto final CS50,
nós imos estar facendo algúns agasallos: un Xbox,
que pode ser capaz de dar unha lousa lonxe, cousas así.
Polo tanto, se hai algo que che impide, imos Chris ou sei
como podemos axudar a construír algo moi legal.
Entón, unha vez máis grazas por teren benvida hoxe, e eu vou entrega-la a Chris.
>> Grazas, Edwin.
Grazas a todos por unirse a nós hoxe.
Eu son Chris Bowen. Eu son un dos compañeiros de Edwin aquí no Nordeste.
Eu só quería pasar un pouco de tempo con vostede está falando
como facer unha aplicación de Windows Store con HTML5, JavaScript e CSS
e tipo de obter calquera preguntas que pode ter sobre el respondeu para ti
como está ollando para pensar quizais usalo para un final oportunidade CS50.
>> Dito isto, imos mergullar á dereita dentro
Vou pasar por riba de lamas por aquí.
Se ten algunha dúbida, non dubide en enviar-me un e-mail.
Estou cbowen@microsoft.com, e hai o meu blog e meu Twitter.
Con todo, quere poñerse en contacto comigo, todo ben.
Teño preto dunha hora de cousas, e quero aproveitar as súas dúbidas ao longo do camiño,
por iso, non teña vergoña de ter preguntas durante este.
Eles non poden ver quen está facendo as preguntas sobre a gravación,
entón vai ser tan anónimo como quere ser.
>> Déixeme mergullo na dereita, só dar-lle unha rápida introdución ao Windows 8,
e amosar-lle algunhas das cousas sobre Windows tenda de aplicacións que pode considerar
como está a pensar en desenvolver unha aplicación.
Estamos mirando para Windows 8. Nós estivemos fóra por algunhas semanas agora.
Moita forte adopción aí xa.
Pode ter visto xa as máquinas de superficie que temos tamén.
Hai un aquí, en realidade, pode dar un ollo se está aquí en persoa.
Realmente quero falar con vostede, lle amosar un pouco sobre o Windows 8.
A idea con Windows 8, que realmente trae para adiante todo o que vostede sabe sobre o Windows
nalgunhas novas experiencias - en particular, cousas como na máquina de superficie con toque,
este tipo de dispositivos máis móbiles que xa están no mercado,
pero tamén é o Windows no seu núcleo.
Entón, iso significa que pode instala-lo realmente en calquera cousa que roda Windows 7,
desde o seu maior plataforma de xogos triplo SLI para abaixo para o seu ordenador portátil
e os seus novinho outros dispositivos que pode incorporarse hoxe.
Eles van executar Windows 8.
Vou lle amosar só un pouco,
e as experiencias que ve aquí son cousas que pode crear.
A idea é que é táctil, rato, teclado,
calquera que sexa o dispositivo que está a executar a aplicación en diante, que vai funcionar moi ben.
Windows 8 vai axudar con todos eses escenarios.
>> Estes diapositivas de banda, imos só ir directo para dar un ollo por aquí.
Deixe-me amosar-lle ao redor da miña pantalla de inicio. Esta é a miña pantalla Inicio.
Vou darlle un pouco de unha visita aquí.
Eu estou nunha máquina non-táctil, polo que tanto como eu quero tocar a pantalla do meu portátil,
el non vai facer nada, así que vou rodar por aquí un pouco e amosar-lle.
Algunhas cousas que pode entender é o feito de que estes que son chamados de azulexos en directo
Realmente pode animar, e poden proporcionar información para ti -
quizais actualizacións sobre as estatísticas de un xogo
ou amosar-lle noticias dalgúns das aplicacións anteriores que están aquí no lado da man esquerda.
Alí imos nós. Eu estou seguro que é só positivo e fantástica gran noticia.
Podes ver aquí é realmente chamar a súa atención ao seu programa, dicindo:
"Ei, hai algo novo aquí. Bótalle un ollo. Volve dentro e ver o que hai de novo para ti."
Iso é chamado de azulexos en directo, e pode facer notificacións
ou dereito desde o propio programa
ou se der un ollo en máis detalles, vai descubrir como escribir un servizo remoto
que realmente pode enviar información sobre a peza
que é o que está a suceder con estas aplicacións de novas.
Están realmente a recibir noticias desde a nube e actualizar o azulexo alí
que a xente sabe que hai unha razón para abrir a aplicación e bótalle un ollo
en todo o que a última noticia é en calquera destes
ou se hai novos ingresos ou unha puntuación máis alta a bater
ou un amigo de xogo ou calquera outra cousa sobre estas aplicacións.
É algo para seducir-lo cara atrás dentro
Entón, iso é as tellas en directo, e que podería ser unha persoa, que podería ser un sitio tamén.
Xeralmente é unha aplicación.
>> Practicamente todas esas cousas que eu teño aquí veu de Windows Store. Vou publicar isto.
É unha das aplicacións que recibe por defecto
en calquera máquina que está a executar Windows 8.
Pode vir aquí para atopar calquera cousa que quere,
a partir de cousas que son destacadas para xogos que eu non teña visto antes.
Oh, wow, temos un novo máquinas aquí.
Pode instala-los aquí na tenda,
e imos falar sobre como desenvolver estes.
Ten unha morea de opcións en como crealos.
Imos centrar na historia JavaScript con HTML e CSS,
pero para o usuario, para o comprador da aplicación, non importa o que se escribiu no
Poden ir adiante e traballar con el.
Estou intrigado con un presente, entón eu teño abrir iso e dar un ollo.
Cada aplicación, incluíndo os que pode enviar e vender ou dar de balde,
o que quere facer na tenda, vai ter unha páxina principal como esta.
Pode enviar a súa solicitude con unha morea de capturas de pantalla - vostede ver algúns aquí -
detalles sobre a aplicación, e co tempo vai acumular as dúas clasificacións -
son basicamente só a clasificación de estrelas - e comentarios,
que fornecen un pouco máis de discernimento.
De feito, alguén ten que escribir algo e dicirlle o quão incrible é,
e que vai entrar na súa sección de comentarios aquí, que eu non mirei.
Fantástico. "Non vai mesmo abrir." Como é grande.
Así, para as persoas para quen este fixo aberta e carreira, eles parecen realmente apreciar-lo. [Risas]
Teña isto en mente. A Internet. Calquera pode dicir o que queira sobre a súa aplicación.
Polo tanto, asegúrese de que está facendo un gran traballo con el,
asegúrese de que está facendo iso o máis cómodo para o usuario, como pode
porque son unha parella click de distancia de ofrecer unha revisión,
e que pode acumular-se á súa clasificación xeral revisión.
E quere facer o mellor, porque vai ter que afrontar outras aplicacións.
Haberá miles de aplicacións xa na tenda,
e as posibilidades son, pode haber algo que fai función semellante ao que está facendo.
Entón, se realmente pode destacar da multitude, que será a súa vantaxe, por suposto.
>> Nós imos entrar na tenda un pouco máis tarde.
Realmente quero concentrarse na creación de apps.
Pero a versión curta da tenda é de distribución mundial,
automaticamente parte do Windows 8, a xente só quentalo-la e dar un ollo a varias aplicacións aquí,
tes a Dress Up Stick Book e todo tipo de varios apps.
Fresh Paint, eu uso moito iso - mal, pero eu usalo moito.
Está me amosando que eu xa posúe-lo.
Deixe-me amosar-lle unha cousa que eu non teño - UVideos Non teño como novo.
Ve aquí é gratuíto, para que poida instala-lo dereito da tenda.
Ten opcións tamén. Pode, por suposto, dalo afastado.
Pode poñer publicidade na aplicación ou xogo.
Tamén pode cobrar por el, e podería moi facilmente proporcionar unha proba para a aplicación ben
así que pode deixar a xente probalo por unha semana ou o que quere facer.
Isto é só personalizable a través do portal. Non escribir calquera código para iso.
Entón di: "Pode usar isto por unha semana e, a continuación, ten que compra-lo",
ou pode facer cousas como: "Vostede podería xogar os 3 primeiros niveis deste xogo
"E, a continuación, ten que mercar para acceder o resto."
Podes incluso facer a compra na aplicación, ben, entón pode dicir,
"Temos aventuras ou conxuntos de elementos gráficos ou cousas que son destravados adicionais -
"Máis receitas que son destravados -. Se mercar eses conxuntos estendidos"
E pode facelo todo dentro da aplicación ou xogo en si.
Entón, totalmente de ti, a súa elección.
Hai unha morea de cousas que podes facer na tenda,
e despois, basicamente, está someténdose a unha canle de certificación.
Podemos falar todo sobre iso un pouco máis tarde, pero este é o obxectivo.
Quere comezar o seu programa visibilidade mundial na tenda aquí.
>> De volta á pantalla de inicio aquí, gustaríame lle amosar un pouco máis.
Se eu lanzar estas aplicacións, deixe-me dar un exemplo de algunhas funcionalidades cruz-app aquí.
Para iso, eu vou lanzar Fresh Paint.
Unha cousa que vai ver aquí é cada bit da pantalla,
todos os píxeles da pantalla, vaia para a súa aplicación.
Lonxe van os días en que ten esas fronteiras arredor das fiestras
con moitos botóns que están sempre aí ocupando espazo o tempo.
Agora o que realmente quere estar lonxe diso e só ten o seu contido ser o foco.
Podemos facer cousas con Windows, acceder outros tipos de menús.
Un deles é, en realidade, o que se chama a barra de encantos,
e vén para fóra a partir do lado da pantalla.
Realmente pode pasar rapidamente de lado se ten unha pantalla táctil,
pode botón dereito do rato, se ten un rato, hai un atallo de teclado para el,
sempre hai máis que unha forma de facer algo no ambiente aquí.
Isto trae á luz unha serie de cousas que podes facer.
A máis obvia é que pode volver á pantalla de inicio
pero os outros 4 son o que son chamados de encantos.
Son contratos que pode chamar a como un creador de aplicación. Son moi legal.
Investigación, eu estou seguro que é algo que vai facer,
compartir eu vou lle amosar nun segundo,
e Dispositivos e Configuración, estas son todas as cousas que a súa aplicación pode conectar a
para alavancar Windows, para dicir: "Eu fixen a miña parte
"E quero Windows para soportar algunhas outras funcións,
"E eu non quero escribir unha morea de código para facer isto acontecer."
Isto é realmente un beneficio de usar estes recursos.
Deixe-me amosar-lle unha.
Para iso, eu vou facer unha nova pintura.
Tamén falei sobre o uso de cada pixel para o seu programa.
Por defecto, iso é o que a aplicación de pintura parece cando está a usar.
É realmente só sobre o que está deseñando, o seu contido.
Podería facer cousas horribles aquí. Que debo debuxar? Eu non sei.
Rabiscos? Oh, xenial. Eu podo facer garabatos. Fantástico.
Un pavo? [Risas]
Este é o pavo máis abstracto que vai ver.
Eu tamén pode traer á tona o que se chama a barra de aplicacións,
e iso é realmente unha das principais formas que pode usar
para ocultar todas as cousas que podería ser no seu programa ou xogo antes
só ocupando espazo o tempo.
Entón, agora pode poñelas aquí, e iso é realmente unha das máis belas experiencias
coa barra de aplicacións que eu xa vin.
Pon as opcións aquí para seleccionar cores diferentes.
Queriamos un pavo, polo que imos poñer un pouco de marrón aquí, comezar a mesturar nun par de cores.
Imos dar unha cor intermedia aquí e despois volva aquí.
Pode comezar a debuxar. Aí está o pavo. Fantástico.
Non sei debuxar, para comezar, pero facelo cun touchpad diante dunha audiencia é aínda mellor.
Isto é incrible.
A idea, con todo, é todo o que me interesa é aquí na superficie.
Imos dicir que eu estou tan contento con este que eu teño que compartilo con alguén.
Normalmente o que faría con outras versións de Windows,
quizais tomar unha captura de pantalla, faría algún copy-paste do texto
ou cousas do tipo que quere compartir a fóra,
e despois ir e abrir outra aplicación e poñelas para el.
Aquí non ten que facelo.
Pode realmente traer para fóra da barra de encantos e dicir: "quero compartir iso."
Neste momento el vai amosar todas as aplicacións
que sabe como traballar co que está a ser compartido.
Neste caso é unha imaxe, de xeito que vai dicir: "Eu vexo que ten unha imaxe."
"Quere compartir isto?" Podes ver que eu enviar correo-e me encher o tempo.
El recoñece que, e iso está me ofrecendo isto como un atallo,
pero é tamén me mostrando todas as aplicacións que sabe como xestionar a toma de unha foto
e facer algo con el.
Estes foron nomeados para Windows que pode facelo.
Neste momento este é o Windows.
O usuario só escolle o que quere facer con el.
Vou facer o meu habitual de PuzzleTouch. Podes ver que eu creei todo tipo de crebacabezas co paso do tempo.
Vou levar PuzzleTouch e dicir: "Eu quero compartir esta creación incrible con PuzzleTouch".
Vai a ir adiante e dicir: "Moi ben. Quere compartir isto? Fantástico".
"Quere facer un puzzle que é doado, intermedio, o que quere?"
Vou facer un intermediario aquí.
Isto fai o puzzle. Vai ser un puzzle terrible, porque é na maior parte en branco.
Pero el está listo, e é realmente de volta no outro programa.
Se eu saír de aquí, podo buscalo e lanzalo.
Agora, se rolar un pouco aquí, hai que ver a miña creación en algún lugar.
Onde é que eu vou? Que tipo de puzzle que eu fixen? Eu facelo doado?
Oh, alí está el, alí mesmo.
[Risas] É o puzzle de pavo facilmente recoñecible que está aquí.
Pero a cousa que quero recordar-lle, a cousa legal aquí
se as aplicacións non sabía nada sobre o outro.
Eles só dixo: "Eu teño unha foto para compartir, e sei como xestionar as imaxes."
E vostede como un creador, non ten que escribir este código.
Cando alguén me pide para compartir, eu vou poñer algúns datos a esta estrutura de datos pouco
e eu son feito.
A outra aplicación asume, fai a súa cousa, e iso é o fin da posta en común de experiencias.
Isto é só unha cousa que podes facer - moi, moi poderoso -
e iso vai ser unha desas cousas que realmente podería axudar a diferenciar a súa aplicación
e tamén o seu partido tamén na tenda.
As persoas van ser capaces de dicir: "Isto é realmente útil."
"Eu uso este creador de puzzle o tempo. É fantástico."
>> Iso é o suficiente de un breve resumo do que está pasando aquí.
Hai un par de outras características tamén que quizais imos destacar coma nós atravesamos código.
Pero quero mergullo en diapositivas, e para facelo, eu estou indo a ir ao escritorio,
que é en si unha pedra en directo aquí.
Eu podo ir para iso e, con certeza, eu estou nos meus diapositivas,
pero deixe-me amosar-lle realmente onde estamos.
Estamos realmente en modo escritorio.
Isto é realmente onde o que eu estaba dicindo antes sobre Windows levar adiante
a novas experiencias se mostra.
Este é o Windows, vostede sabe.
Aplicacións de Windows son chamados de aplicacións de escritorio. Eles corren aquí.
Se ten aplicacións existentes e quere executa-los en Windows 8,
podes perfectamente facelo.
Estas non son as mesmas cousas que as aplicacións de tendas, que están aquí,
como pintura e estas aplicacións NBC News e cousas así. Aqueles virá da tenda.
Poden chamar a algunhas das características que eu estaba mostrándolle
e outros que eu non mostre aínda.
Pero só manter isto presente. Temos soporte para ambas cousas tamén.
Sinto moito. É algo que non mostra na pantalla? Eu perdín por completo. Isto é raro.
Okay. Grazas por apuntar isto.
O que non viu por un tempo é o meu mostrando que o ambiente de traballo é aquí.
Cal é a última cousa que viu? Viu isto?
Esta é a área de traballo. Xa sabe o que parece.
Non é nada terrible inusual.
É a nosa realización desta experiencia para adiante para ti e deixar usar as cousas que tivo.
Por exemplo, eu vou amosar-lle o Visual Studio. Esta é unha aplicación de escritorio.
Correrá neste modo.
Vai apoiar un ambiente máis complexo
con unha morea de opcións e cousas así, entón pasa a ser unha boa opción como unha aplicación de escritorio.
>> Dito isto, imos aos diapositivas para algo
e darlle algún contido introdutorio e, a continuación, entrar na realidade de codificación aquí.
A boa noticia é que eu oín que está concentrando en unha morea de CSS e JavaScript, HTML.
Todas esas cousas que está a aprender transportar directamente para facer o Windows tenda de aplicacións.
As cousas que ten oído sobre a aplicación de selectores CSS e todas aquelas cousas
é o que fai para crear unha aplicación aquí para a tenda.
Nós imos pasar por estes cousas aos poucos.
Basicamente, eu estou construíndo sobre as cousas que xa tivese tempo para aprender.
Este é o marco xeral das tecnoloxías que pode usar
para facer aplicacións para Windows 8.
O material sobre a dereita, as aplicacións de escritorio, é realmente o que nós xa sabemos.
Iso é unha cousa que é realmente o Windows 7 mundo traspostos para Windows 8.
Todas estas opcións transportan: C #, VB, tipo Win32 do desenvolvemento.
Grande. Sen problemas. O novo material está no lado da man esquerda.
Iso é o Windows tenda de aplicacións, que é cando quero facer a miña petición con fío en Windows 8
utilizando todos os recursos, obtelo na tenda, e teña esta experiencia moi legal
das aplicacións de Windows Store.
Para iso, podes ver aquí que ten todas as súas opcións con XAML, C + +,
C #, VB, podería facer DirectX, cousas así, cousas que van máis alá do foto.
Pero para nós, que imos centrar ben na o feito de que o HTML, CSS e JavaScript
son realmente un cidadán de primeira clase para facer aplicacións para Windows 8
e para a Windows Store.
Entón, iso é bo para todos aquí e as persoas asistir en vídeo
porque pode só aproveitar todas esas experiencias que ten
e realmente amarre en que Windows ofrece.
Vai facelo por medio dun conxunto de APIs, que debe ser ningunha sorpresa.
Cada OS ten as súas propias APIs
Expomos o que Windows pode facer a través do que se chama WinRT.
É un conxunto de APIs que só fai todo para ti.
Se precisa abrir ficheiros, ten que utilizar a cámara, xeolocalización, cousas así,
eles pasan por o que Windows pode ofrecer para ti.
Para acceder tanto, temos un pouco máis de JavaScript que vai facelo aínda máis doado
para lle facer iso. Nós imos chegar a iso nun momento.
Pero, polo de agora, iso é basicamente o seu guión.
As cousas que xa vén facendo enriba dalgunhas APIs
que axudan a traballar con Windows é igual a App Store.
E iso é realmente todo o que tes que saber do alto nivel.
>> Imos mergullo en realidade, traballar coas cousas agora.
As cousas que probablemente xa viu unha morea de,
IE9 cun pouco tempo nós introduciu soporte para unha morea de, na época,
normas máis recentes da web, de xeito que unha gran cantidade de novas características de estilo CSS,
unha morea de novo HTML, ECMAScript 5, o que é moi JavaScript.
Entón, todo para que, excepto a modo estricto estaba no IE9.
Só unha tonelada de cousas con CSS, CSS3, todo alí dentro.
E todo iso leva adiante para o que estamos facendo con Windows 8.
Podes usar estas cousas, e pode usar todo o que hai de novo no IE10.
Con IE10 introducimos soporte para todas esas cousas tamén.
Están todos con aceleración de hardware, polo que, se está en unha máquina que ten algún tipo de GPU,
que pode ser moi cada máquina que podería comezar nos últimos 8 anos,
vai ser capaz de ter saída de aceleración de hardware,
produción visual con CSS, Canvas, SVG.
Todas esas cousas van pasar por aceleración de hardware
e que ser moito máis rápido e máis eficiente.
A versión curta de todo isto - eu non vou pasar por cada cousa por aquí -
se velo nesta lista, se pode facelo no IE10,
se é unha aplicación web que está executando que funciona en IE10,
é algo que se pode facer como unha aplicación de Windows Store.
E iso é moi bonito iso. Entón, se funciona no IE10, que vai funcionar como unha aplicación de Windows Store.
É sobre a mesa como algo que podería usar.
>> Hai moita cousa aquí. Non temos ata medianoite, entón eu non podo revisar todo aquí.
Pero hai algúns sitios que van axudar a entender o que estas cousas poden facer,
e eu vou lle amosar un deles nun segundo.
Eu só quería destacar algunhas das principais cousas que podes ollar.
Poida que xa teña visto algúns deles nos seus estudos,
pero estes son realmente útiles, en particular con Windows tenda de aplicacións, ao lado da CSS.
Polo tanto, ser capaz de facer as transformacións e transicións, proporcionan un movemento con animacións -
estes son todos parte CSS agora, e eles están todos compatibles con navegadores modernos,
e IE10 e IE9 ter engadido soporte ao longo do tempo para todas estas cousas.
E entón por que gravala-lo só, por que pasar por todo o traballo de facer isto coa man
cando podería utilizar transformar un simple CSS para crear un efecto 3D para a súa aplicación?
Grande. É así que funciona.
Eu non podo facelo máis difícil do que iso.
Se sabe como facelo en CSS, xa sabe como facelo na aplicación Windows Store.
>> Indo alén de que, para esquema, cousas como mesmo a App Store,
pero indo ademais, buscando quizais unha aplicación de noticias que está mostrándolle artigos
ou ingresos ou cousas así, eses outros tipos de recursos do CSS son realmente útiles:
Reixa, Flexbox, CSS Rexións é un moi novo estándar tamén.
Esas cousas son todos os que van axudar a pór para fóra o contido e fluxo de contido entre as seccións,
ser capaz de facer paxinación e hifenização, sen lle ter que escribir as cousas só.
Acaba de dicir: "Por favor, faga o seguinte para min"
e como o real da pantalla é diferente en diferentes máquinas
ou como podes ver en un momento, como aproveitar unha aplicación
ter menor cantidade de espazo na pantalla, iso non é problema para CSS.
Pode sacar proveito - we'll talk sobre consultas de medios nun segundo -
pode coidar das cousas co reposicionamento do seu contido, que flúe de contidos desde rexións
só con esas cousas que xa pode ver con tecnoloxía web.
>> No lado do HTML5, tamén hai unha morea de cousas
que será moi útil para ti con Windows tenda de aplicacións.
Unha vez máis, nós non imos pasar por todo iso, pero son só aquí.
Entón, se precisa usalo, de audio e vídeo, se quere facer a validación de formularios,
xeolocalización, todas as cousas que podes facer en JavaScript con JavaScript 5 ou ECMAScript 5,
IndexedDB para almacenamento local - estas son todas as opcións para ti.
Se está a buscar unha resposta, basta ollar para as tecnoloxías existentes con HTML5 e CSS
e vai atopar respostas máis fácil do que ter que rodar unha morea de cousas que vostede mesmo.
Déixeme lle amosar algo aquí.
Eu teño un sitio web que pode ir.
Déixeme saír fóra deste foto por un segundo.
>> Se saír para IETestDrive.com,
Eu non vou facer moito dunha demostración aquí.
IETestDrive.com está realmente mostrándolle moito do que hai de novo no IE10,
as cousas que podes facer.
Creo que iso é moi útil, xa que en vez de ler a través de unha chea de papeis brancos,
ollar algunhas demos, e que vai axudar a poñer-lo no seu propio radar persoal
sobre se a tecnoloxía ten sentido mesmo facer calquera investigación máis con
así vai entender ", eu vexo o que iso é para".
"Eu entendo o cadro de solicitude de Animación fai por min."
"Eu entendo como eu podería usar Rexións ou filtros SVG."
Ve-los en acción, velos nun exemplo aquí,
e decidir por si mesmo se isto vai ser útil para ti nos seus propios proxectos e ademais
como continuar a traballar coa tecnoloxía web.
Aquí eu só ía encouraged-lo a un ollo.
Eu non creo que vou gastar moito tempo, en realidade, a executar estes.
Temos o suficiente para mostrar con código escrito.
Vai ver aquí as cousas a partir de efectos de chamada para xogos baseados en tocar nesa sección,
animación, moi rápido animación acelerada por hardware alí,
algunhas optimizacións que podes ver en algunhas destas mostras, así como,
e hai moitos, moitos máis.
Se pasar por riba aquí e abrir o mapa do sitio,
hai só un número ridículo de mostras aquí.
Podes ve-los todos aquí.
Se está mirando para algo ou escoitou falar de algo
e está a se pregunta se cadra iso sería algo legal para usar na aplicación,
tente ollar aquí, e probablemente hai unha boa demostración de que para salvar-se algún tempo.
>> Ok? Todas as preguntas ata agora para a xente aquí?
Okay. Nós imos seguir aquí.
De novo, só tes que comprobar iso.
Son os estándares web, entón vai a outros sitios de vitrina que sabe de
e ver se estas tecnoloxías teñen sentido para o que estás a facer.
>> Voltar diapositivas.
Dito isto, se está movendo dun mundo web realmente un mundo de aplicación local instalado,
polo que hai algunhas cousas a apuntar aquí.
Primeiro de todo, non hai ningún servidor web utilizada aquí.
Non hai Apache, non hai IIS rodando aquí
servindo-se as páxinas dun cliente remoto, a un axente navegador remoto.
Neste caso, realmente todo é embalado para ti.
Vostede alegan que como a aplicación para a tenda, é certificado,
é na tenda, e entón a xente aos miles instalará o seu xogo ou aplicación.
Pero, basicamente, están tirando para abaixo localmente para a súa máquina.
Non hai necesidade de saír á web máis menos que teña as chamadas que precisan dunha API remota,
e iso é perfectamente normal, así tamén.
Pero eles non van estar neste modo en que eles teñen que ir de resposta á petición dun servidor
para obter a seguinte páxina do seu contido.
Entón, o que dixen, hai algunhas diferenzas API menores. Estas son moi pequenas.
Eles é improbable bate-lo na súa codificación normal, pero son, polo menos documentada.
Son o tipo de bordo casos.
>> A outra cousa que vale resaltar é a diferenza de confianza.
Eu só mencionei iso porque eu só quero que seguro que eu dixen iso
por iso, se ten máis tarde, vai pensar ", dixo Chris algo sobre iso,
"Quizais por iso, si, todo ben", e entón vai cara atrás e descubrir o que era.
Contextos importa.
Por defecto, tentamos protexer o usuario de vectores de ataque.
Hai certas cousas que podes facer por defecto
e certas cousas que precisa cambiar de contexto para activar.
Como está a usar algunhas bibliotecas por aí - xa foi traballar con jQuery,
pero se ollar para outras bibliotecas por aí - podes estar a usar algunhas funcións
este tipo de uso vai alén do lugar, non interaccións máis dinámicas
Solicitudes XHR, cousas dese tipo.
Ás veces pode atopar aqueles será desactivado por defecto,
e, nese caso, só tes que facer unha busca, ollar para o contexto local e web,
e vai descubrir como fixar iso.
Só asegúrese de que sabía sobre iso cando comeza a usar outros frameworks,
que, debo mencionar, é perfectamente capaz de facer.
Entón, se atopa algún outro cadro - we'll talk sobre iso nun segundo -
para xogos e quere usalo, quere empregar as bibliotecas de control que están aí fóra
e non quere escribir as cousas que mesmo - é unha boa idea, non é? -
podes perfectamente usar este material.
Non hai nada que che impide utilizar calquera tipo de biblioteca que está baseado en JavaScript,
CSS, HTML5.
Unha vez máis, se é algo que pode facer no IE10, que é unha peza de unha morea estes días,
podes facelo.
Puxe-o no seu programa, referencia esta biblioteca JavaScript, e usalo na súa aplicación,
só manter presente que pode bater un contexto de seguranza de cando en vez - non moi a miúdo.
>> E, a continuación, as características, imos pasar por riba de un pouco máis dos que nós imos.
O UX vai tipo de habituar-se como se pode ver máis e máis aplicacións
da Windows Store.
Vostede ter unha idea de como eles funcionan e como a estética de deseño tende a funcionar
en diferentes aplicacións e que as persoas van ser empregado para probar.
Esta é realmente a parte máis importante.
Asegúrese de que, cando o lume ata a aplicación que non ten que ler un manual,
que nunca fan, polo xeito.
Deben só ser capaz de comezar a xogar a súa solicitude
e descubrir que sen moita dificultade.
Furando e unirse a unha gran cantidade destas prácticas,
vai facer os seus usuarios un gran favor, facendo isto máis doado.
>> Okay. Unha última cousa do lado da API e despois imos entrar realmente escribir código.
WinJS é a cousa que eu mencionen moi brevemente con este slide complexo
con todas estas diferentes opcións que ten para facer aplicacións.
WinJS, pode pensar niso como un amigo.
É o seu amigo para axudar a escribir cousas máis rapidamente.
É só JavaScript e CSS. Non ten que usalo. Pode usalo.
Se vai estar chamando para recursos de Windows, vai acabar usando-o,
pero se hai cousas como algúns patróns de deseño ou controis que realmente non quere usar,
quere usar outra cousa, cómpre a vostede.
Decida o que quere empregar e os estilos que quere usar.
As características de namespacing e clase xeración - ata.
Se prefire un ou outro, será o súa elección. Aínda é JavaScript e CSS.
Pero iso vai axudar a facer unha chea de cousas.
Por exemplo, aquí está un subconxunto do que pode facer,
cousas como axudar programación asíncrono con promesas.
Calquera de vós escoitou falar ou traballou co Node.js?
É un estándar común para traballar con programación asíncrono.
Entón, basicamente, o que está dicindo é: "Vaia facer algo,
"E me vai dar unha promesa de que vai volver para min cando está feito."
Isto é esencialmente o que está pasando.
Entón non conxelar a súa aplicación mentres o usuario vai e elixir un ficheiro
ou algo está a ser transmitido abaixo dende a web.
A interface de usuario segue a responder.
E pode facelo empregando a programación asíncrono.
Parece ridiculamente complexo, pero é moi doado, porque está a usar promesas
e que acaba de dicir: "Vaia facer, e cando estea listo, chamar de volta a este método."
Isto é moi bonito iso. Isto é todo embutido no WinJS.
Vai facelo moito máis doado escribir aplicacións realmente flexibles e poderosas.
>> Podes ver o resto aquí, unha chea de animacións.
Probablemente, unha das cousas máis importantes sobre este slide son controis.
Creo que teño un todo - si, fago.
Aquí está un exemplo de só algúns dos controis que pode usar nas súas aplicacións.
Isto é todo para arriba de WinJS.
Non está escribindo estes mesmos,
Acaba de dicir: "Aquí está como eu quero compoñer miña candidatura."
"Eu vou usar unha exhibición de virar para que eu poida ir entre os distintos cadros."
Eu non lle mostre Zoom semántica. Eu vou te amosar que en un segundo.
ListViews. Hai GridViews.
Xa viu unha reixa, como parte da aplicación de almacenamento,
co fin de ser capaz de utilizar bloques de contido e desprazamento a través daquel.
Menús despregables verás ao longo do tempo.
O conxunto de aplicacións eu mostre-lle que a aplicación frescos pintura, así como,
entón viu como pode personalizar que, poñendo botóns nel
e ter que esconderse cando non lle importa de usar iso.
Isto é realmente totalmente ata vostede empregar.
Estes son todos os controis que forman parte da WinJS.
Vou amosar-lle como facelo en só un segundo, pero hai máis que iso,
eo máis importante é usalos, se quere, aforrar tempo.
>> Se ten varias bibliotecas de control que desexa usar, que está perfectamente ben tamén.
Cousas como jQuery UI facer unha chea de este tipo de idea, así como,
proporcionando máis controis que se estenden o que pode facer en HTML e JavaScript.
Imos mergullo dentro Eu xa dixo iso. Utilice o que desexa.
Só ten que ter presente que pode funcionar nalgunhas cuestións de contexto.
Pero certamente pode mesturar e combinar todo tipo de bibliotecas que está cómodo con,
quere aprender, quere usar, para salvar-se algún tempo.
>> Imos falar sobre as ferramentas só por un segundo.
Pode obter o que precisa para comezar a traballar con Windows tenda de aplicacións.
Se eu volver, eu teño moitas cousas aquí enriba.
Se vai a esta páxina, que é dev.windows.com,
pode baixar todo o que necesitas.
Como os alumnos, ten acceso a máis do que o público en xeral o fai,
así pode obter versións máis sofisticadas do Visual Studio.
Edwin mencionado xa pode obter o Windows tamén.
Pero, en xeral, para todos os desenvolvedores, pode ir a este sitio web
e baixar todo o que precisa para facer unha proposta, e é todo de balde.
Polo tanto, hai unha versión gratuita do Visual Studio,
hai algunhas ferramentas que serán instalados a carón da que -
todo o que precisa para crear e probar a aplicación.
É só cando vai publicar a súa aplicación ata a tenda
que vai ter unha conta de creador.
Isto tamén eu creo que é gratuíto. É gratuíto para os estudantes tamén? >> [Guarin] Cal?
A conta de creador, a presentación real. >> [Guarin] Si
Esta é unha boa nova.
Vai mirar para iso.
El vai dicir para un individuo por defecto é US $ 49.
Pero non se rexistrar para que, como estudante.
Nós imos aproveitar vostede unha información a través dos seus programas que pode obter unha conta de forma gratuíta,
e que vai deixar a continuación, enviar as súas aplicacións á tenda,
como moitos como lle gusta, e todos os que a bondade seguirán en breve.
Entón, iso é dev.windows.com.
Podes baixar as ferramentas que pode ter aquí.
E se o desexa, pode obter unha versión de proba do Windows aquí,
pero, de novo, non vai ter.
>> O outro lugar - déixeme ligar un regalo para fóra para ti rapidamente - é design.windows.com.
Iso foi dev.windows.com.
Design.windows.com, pode adiviñar o que é para.
En realidade, é un sitio moi agradable. Hai unha morea de boas información aquí.
Pode traballar con el.
Vai dar-lle algúns consellos sobre algunhas cousas
que quizais non teña pensado antes ou tivo que xestionar antes,
como proxecto para o toque, designado para distintos factores de forma,
proxecto para as capacidades de Windows 8, as cousas que eu mencionen antes
como investigación e repartición, algunhas cousas que eu non falei aínda.
Están todos listados aquí, e é un bo conxunto de páxinas de arquivos útiles
que o axudará a entender como facer un determinado tipo de aplicación,
como facer a interacción, como xestionar a interface do usuario e UX da súa aplicación.
Eu recomendo que bótalle un ollo niso, especialmente se está nalgún punto
á espera de publicar unha aplicación para a tenda.
Vai querer saber como facer unha boa aplicación
porque eu mencionen antes, se non fai iso, non hai quen comentarios de novo.
A xente está indo a ser infeliz.
Eles non serán capaces de atopar as cousas que esperan nos lugares determinados.
Ninguén quere que isto ocorre con vostede.
>> Avanzando aquí, déixeme pechar iso.
Agora que sabe onde conseguir as cousas, vou amosar-lle como realmente comezar a usar o material.
Para comezar, eu vou realmente amosar-lle aquí un exemplo de aplicacións de escritorio na pantalla Inicio.
Aquí podes ver o Visual Studio, pode ver Blender e outras ferramentas de desenvolvemento que eu teño.
Teñen unha tella lixeiramente diferente.
Isto porque son aplicacións de escritorio,
e neses casos están todos indo a lanzar de volta para o meu escritorio
realmente só como aplicacións que está acostumado.
Así, a experiencia de Windows, que é o mesmo.
Eles non son, por exemplo, como Armed! ou esas cousas. Permítanme lanzar un rápido.
De feito, aquí está unha pregunta interesante.
Este foi desenvolvido por estudantes que traballan en colaboración con nerd.
Aplicación a pantalla completa, estes tipos de experiencias aquí.
Oh, agradables pantallas de corte e todo tipo de cousas divertidas.
Desenvolveron iso. Tamén podemos amosar a cousa toda, mentres estamos no asunto.
En realidade, eu traballei con eles algo, deulles algúns consellos sobre as cousas
porque estaban facendo Javascript para a súa aplicación.
Por favor, eu non estou tomando crédito polo seu traballo, fixeron todo o traballo.
Eu só dei-lles un pouco de consello aquí e alí,
pero fixeron algunhas grandes cousas usando un front-end JavaScript
e amarre nalgúns motores de física e cousas para facer unha chea de este traballo.
Vai. A ver se isto funciona.
Guau, que aínda funcionaba. Moi ben, moi ben. Pero esa é a idea.
Unha aplicación en pantalla completa, unha experiencia moi boa.
Isto está a apoiar non só o meu rato e pluma se eu tivera cousas así, pero tamén tocar.
Se eu tivese unha pantalla táctil, eu podería só deseñar para el e seguir traballando con isto.
>> Unha cousa que eu non mostrou, ea razón pola que eu estou levando iso
é que eu quería ter outro app para mostrar o que pode facer,
realmente pode tomar aplicacións en Windows e arrastralo los para o lado da pantalla.
Iso é chamado tirando unha aplicación.
Neste caso, eu tomei Inkarus e eu engade-o para o lado aquí.
Está agora en vista Snap, e que me permite facer outra cousa mentres que a aplicación está aí.
A maioría dos xogos que vai atopar vai simplemente facer unha pausa.
Isto adoita ser unha cousa decente a facer a non ser que o seu xogo de algunha maneira pode graduar abaixo
para que os pequenos dunha resolución, como é posible que algún tipo de xogos de mesa
ou cousas así de cando en vez.
Pero, en xeral, a mellor cousa que facer ea cousa máis apropiada a facer para os xogos
é deter a aplicación.
Para aplicacións como novas apps, se eu lanzar un presente e, a continuación, eu encaixar lo,
vai ver que realmente cambia significativamente na forma en que se está presentando os datos para ti.
Aquí está amosando que realmente nunha pota máis vertical que a información,
pero eu aínda podo absolutamente usar a aplicación.
Por iso, aínda é moi útil.
O feito de que está nunha visión menor non me impide usar este app. Entón, pense sobre iso.
É algo que ten que ter as súas aplicacións facer nalgún grao,
pero é ata a determinar como as súas aplicacións funcional debe ser
en que un tipo de ambiente menor.
Déixeme pechar que un baixo e voltar a onde estabamos aquí.
>> Edwin, engadiu unha foto de min xa? >> [Guarin] Yeah. >> [Bowen] Olle para iso.
Ve iso? Edwin engadiu unha foto. [Risas]
>> Imos volver aquí para o Visual Studio. Permítanme presentar isto para vostede.
Podería ter premendo na tella en que a pantalla Inicio.
El me trouxo de volta ao modo de escritorio, e está lanzando a aplicación de escritorio do Visual Studio.
Este é o Windows que xa coñece.
I pode ir adiante e crear un proxecto aquí.
Iremos concentrar novamente en JavaScript, HTML.
Vou saír e seleccionar até aquí baixo JavaScript, Windows Store.
Hai unha serie de modelos que pode usar.
Para a productividade, eu recomendo que bótalle un ollo a algunhas desoutras aquí
como a reixa e Split.
Son realmente útiles se está facendo unha aplicación
que vai ter este tipo de deseño e navegación. Vai ver estes moito.
O que eu acabo de demostrar era en realidade unha instancia da aplicación Grid.
Entón, se pensas que vai estar facendo unha aplicación de noticias ou un lector de RSS
ou algo parecido que trata sobre varias entradas para o cal desexa amosar o detalle,
pensar en usar un destes modelos para comezar axiña
e personalizar-lo de alí.
Pero só así podo amosar-lle todas as partes móbiles aquí
Vou crear a aplicación en branco, e despois imos ir un pouco máis fondo nos detalles.
Eu só estou facendo este programa en branco aquí.
Vai crear todo o proxecto para min.
Vou abrir as cousas que quero te amosar por defecto.
Déixeme achegar un pouco para dar a coñecer o que é creado por nós aquí.
As cousas que vai mirar en primeiro lugar son todos estándar nomeado.
Entón vai para buscar default.html, default.js e default.css.
A outra cousa a destacar é que xa temos unha referencia ao que eu mencionen antes.
Este é WinJS. Ninguén, en realidade, chámalle este nome longo aquí.
É WinJS, a Biblioteca de Windows para JavaScript.
Se abri-lo, podes ver que é todo aquí.
Hai diferentes arquivos CSS, hai JavaScript.
Está alí para axudar.
É realmente alí para proporcionar controis e estilos e outras cousas que pode simplemente usar automaticamente.
Pero, de novo, se hai cousas que quere empregar no lugar en termos de estilo e outros controis,
é enteiramente ata. Vou te amosar como usar un par destas cousas agora.
>> Volver máis para o noso lado esquerdo, deixe-me amosar-lle a páxina HTML estándar.
Xa viu o material WinJS, e iso é realmente todo o que está a suceder alí
coas liñas de media de reserva, só traendo o CSS por defecto
e traer un par de arquivos JavaScript de WinJS.
Non é preciso ser propietario do que está a suceder dentro deses ficheiros.
É moi interesante dar un ollo neles para tipo de revisar o que está a suceder alí dentro
porque hai técnicas intermedias e avanzadas moi interesantes a suceder alí dentro,
pero o bo é que os desenvolvedores, pode simplemente aproveitar deles, só usalos
e realmente non se preocupe con iso.
Aínda pode dirixir un coche sen ter que saber como funciona, non?
Entón ese é o tipo de cousas que está a ocorrer aquí.
Hai controis e estilos e outras cousas que pode só ir adiante e utiliza
eo código que pode usar en un segundo sen ter que saber o que está aí.
Aquí están os seus propios arquivos.
Estes son os lugares que pode modificar o seu propio CSS
eo seu propio JavaScript para facer as cousas rolando.
Estará engadindo seguramente outros arquivos Javascript e quizais outros arquivos CSS
como o seu proxecto medra, pero iso é realmente só un punto de partida.
Aquí está o Hola, equivalente mundo do HTML, polo que estamos de volta na etiqueta body.
Na parte superior, a propósito, é o DOCTYPE HTML5,
así vai recoñecer que desde o que estaba a traballar.
Hai completo IntelliSense aquí tamén, por iso, se fai cousas como o tipo nunha etiqueta de vídeo
e ampliar tanto, xa debería ter aprendido sobre o feito
que precisa para facer a codificación de fallback para as etiquetas de vídeo en HTML5 - ou quizais que ten -
para garantir que distintos navegadores teñen soporte para o teu vídeo.
Temos cousas como esta en todo HTML, mediante JavaScript, mediante CSS.
Isto está embutido, e eu vou lle amosar o CSS nun segundo.
Aquí pode ir adiante e comezar a modificar o código, a reserva.
De feito, antes de que eu cambie algo, eu vou correr ese e amosar-lle o que gaña.
Está indo a obter unha pantalla de inicio que pode personalizar
e entón comeza a Ola, experiencia do mundo aquí. É fantástico, non é?
Dalle barco que, non?
Contido vai aquí. Esa é a cousa básica.
El só pode ir mellor de alí.
Imos adiante e engadir en algunhas cousas.
Eu teño un pouco de reserva vou copiar aquí
só así non ten que me ver escribindo.
Deixe-me ir abrir a caixa de ferramentas aquí, e eu vou fixar iso porque eu vou estar facendo iso algunhas veces.
Caixa de ferramentas, se aínda non viu o Visual Studio, é o lugar onde vai atopar unha morea de controis.
Tamén pode poñer fragmentos de código que pode reutilizar.
Aquí eu só vou aparecer nalgún outro HTML, nada terrible avanzado en todo aquí.
É só HTML básico dicindo que teño unha entrada onde eu poida escribir,
Eu teño un botón onde eu poida enviá-lo, e entón eu teño unha span que é, esencialmente, un espazo reservado
que eu poida usar para a saída do "Ola, escribe isto."
É a introdución exemplo HTML.
Se eu executar tanto, comezan automaticamente o HTML, pero tamén obter automaticamente styling.
Esta é unha das cousas importantes da WinJS.
Vai dar-lle, por defecto, algúns ollar e sentir que é realmente consistente
co resto do que Windows 8 está facendo.
Aquí ve as cousas como o botón.
O botón por defecto en HTML non se parece tanto, pero fai aquí
porque está quedando este dereito CSS dende deste arquivo CSS en WinJS.
Se quere usar outra cousa, se quere cambiar isto, totalmente ben,
vai adiante e facer o que quere. Pero ese é o estándar.
Vai ser máis familiar para os usuarios.
E por suposto que iso non vai facer nada, porque realmente non conectar-se calquera tipo de código
para responder a iso. Era só o HTML.
Entón eu me podo librar diso, e nós imos voltar a nosa aplicación.
>> Déixeme pasar para os nosos default.js.
Isto parece moi complexo, pero está só facendo algunhas cousas para ti.
É cliché. Será o mesmo en todos os seus proxectos.
O único que este está facendo é só unha especie de preguntar: "Como cheguei aquí?"
e dicindo: "Vostede está lanzando esta aplicación por primeira vez?"
"Está retomando o app de telo de ser suspendido?"
Un par de cousas como esta.
Realmente, o noso foco neste arquivo aquí é ben aquí.
Neste momento, esta liña de código é moi importante.
É realmente indo a ir e ollar a través de toda a súa reserva,
e vai atopar as cousas que pediu ter se transformado en controis,
controis máis profundos, como un control de clasificación, como unha exhibición de reixa, como o menú desplegable
e esas outras cousas que eu mostre ese slide antes.
Eles non son controis HTML nativas.
Simplemente non dicir flotante como un elemento e que el sabe o que facer.
O que nós realmente facer é o mesmo que sucede noutros tipos de estruturas de control.
jQuery UI fai o mesmo tipo de visión xeral.
Usa as reservas no seu HTML, e entón algúns JavaScript vén a través de máis tarde e di:
"Oh, eu sei o que é. Isto é pedir para que isto sexa transformado en esas cousas",
que é outro HTML máis expresiva para facer como un control de valoración,
que é o que eu vou lle amosar agora.
Esta liña de código é unha promesa que está dicindo: "Cando esa promesa se cumpriu,
"Todo o que pediu, a continuación, foi creado."
E é iso. Parece un pouco complexo, pero é realmente o mesmo en todos os proxectos.
Por aquí é onde pode comezar a engadir en todo aquilo que quere que aconteza,
así que imos volver a iso nun segundo.
>> Primeiro de todo, eu teño un pouco de código que pode responder ao feito de
que alguén premendo no botón.
Eu estou indo a ir adiante e poñer isto en aquí.
Unha vez máis, eu non vou facer calquera escritura diante de ti aquí.
JavaScript Moi básico só dicindo que iso é chamado de
imos ser solicitado algúns detalles sobre como chegamos aquí
e logo, imos facer algunhas cousas básicas.
Vai atopar a cousa na miña páxina HTML que é nomeado nameInput,
agarralo, tomar o seu valor, tapa "Ola" diante del, e manter esta secuencia resultado
en que tag div que tiñamos antes de que realmente non tiña nada antes.
Agora imos atopar esa marca e facer o seu contido interno igual a esa cadea.
JavaScript Moi sinxelo.
Esperamos que está recoñecendo que non hai realmente nada de anormal a ocorrer aquí.
É só en liña recta ata HTML e JS aquí.
Se eu executar iso agora, aínda non vai facer ningún traballo porque eu non teño con fío-lo
para recibir o evento.
Para iso, eu vou facelo aquí, unha vez máis volver á miña caixa de ferramentas,
estoura-lo aquí.
Espero que viu todo este tipo de cousas antes, entón eu non vou máis explicar-lo.
Agora estamos indo a ir buscar o helloButton.
Nós imos dicir: "Botón, parabéns."
"Aquí está o caso no que agora está respondendo."
"Cando alguén fai clic en ti, chamar esta función, o buttonClickHandler".
E iso é o que a función que acabamos de engadir á dereita para abaixo na parte inferior alí. É iso aí.
Entón, agora temos unha aplicación incrible funcional.
Creo que vai ser realmente impresionado con iso.
Chris. Espere por el. Guau. Okay. Isto é incrible. [Risas]
Pero hai máis. Non compra-lo aínda. Espera.
>> Deixe-me amosar-lle un pouco máis aquí e saír da pantalla completa.
Nós imos andar antes de executar.
Déixeme entrar e realmente amosar-lle un pouco con CSS.
Só por defecto, se miramos cara atrás, a páxina aquí,
sempre que paraba na estas cousas WinJS e temos o ui-escuro,
en realidade, pode mudalo para o estándar para o uso de aplicacións de luz.
ui-escuro é bo para aplicacións gráficas como o uso de unha morea de fotos,
está amosando unha morea de contido visual.
Se está amosando unha morea de contido textual, o ui-luz é xeralmente unha boa opción.
Non ten que escolle-lo, pero eu mudei para el
e agora está a ver a mesma reserva, aínda todo,
está só usando basicamente un esquema invertida aquí
onde todo está facendo texto negro no branco.
Isto é todo moi ben.
Déixeme saír de aquí, e imos realmente facer algo máis co CSS.
Vou poñer-lo de volta na escuridade, porque eu creo que pode ser máis fácil de ver na pantalla
cando comezar a facer estas cousas.
Eu estou indo para substituír o corpo unha vez máis.
Vou aquí. Déixeme bombardealos iso.
Imos levar o corpo con clases.
Eu creo que fixo selectores básicos con CSS e cousas así xa,
entón probablemente sabe o que está pasando aquí.
Só atribuíndo algunhas clases para o noso cabeceira, e estamos creando unha nova div
para implicar o resto do material que agora podemos usar para denominar todos xuntos.
Entón o que podo facer agora é ir ao noso CSS estándar.
Xa mirou para consultas de medios aínda? Xa falou sobre iso, ao final?
Consultas multimedia forman parte desta tendencia emerxente -
ou é unha tendencia establecida agora realmente na web -
para o proxecto de resposta ou de adaptación,
ea idea é que as súas aplicacións poden realmente axustar-se de forma adecuada
con base no que o dispositivo que está a ser amosado no pode facer.
Entón, se está nun dispositivo móbil, obviamente, non vai ter tanto espazo na pantalla
como vai nun gran monitor de 30 polgadas sentado cun escritorio, un gran PC así.
Polo tanto, a resposta a esa idade sería ter 5, 6 versións diferentes da mesma páxina
e abre a versión que foi afinado para que determinado tamaño de pantalla.
Non moi ben. É moi, moi repetitivo e hai unha tonelada de mantemento para facelo.
Agora temos unha cousa chamada consultas de medios CSS,
e podemos usar isto para detectar automaticamente cando hai determinados tamaños
ou determinadas usos do seu contido que está a ser realizada.
Así, pode responder a iso e pode dicir: "Ok, neste caso
"Probablemente non ten nin me dicir-lle o que está pasando aquí."
Este é só dicir que esta aplicación é encaixado, como eu mostre antes -
agarrando-o e colocándose ao lado da pantalla -
entón imos facer o seguinte estilo.
Styling non é só sobre cores e cousas así.
É tamén sobre o deseño e as marxes e enchido e orientacións de contido
ou incluso desactivar ou activar partes enteiras da súa páxina
e neste caso, a súa aplicación ou o seu xogo tamén.
Entón, aquí podes facer tan sinxelo como quere.
Isto non sería útil en súas aplicacións, pero é hora de demostración,
entón eu estou indo a ir adiante e só engadir en selector corpo básico e dicir:
"Cando estou agarrado, imos adiante e facer o background-color e imos escoller algo."
Ten IntelliSense aquí. Isto é realmente moi legal.
En 2012, nós engadimos unha morea de cousas para soporte a CSS e JavaScript e HTML.
Vostede, claro, quedou suspendida IntelliSense tamén, pero iso non é a cousa legal.
O legal é que ten selectores visuais para unha morea de cousas tamén.
Entón, podería pasar e basta escoller unha cor,
ou pode saír e ser aínda máis específico e pode escoller -
iso vai ser terrible. Vou realmente escoller unha cor decente aquí.
Assist o marcado tamén, por certo. Ese é o formato estándar RGB alí.
Pero se eu cambiar a opacidade, que vai cambiar a un selector de canle alfa aquí.
Así pode ver que, a cor con esencialmente a transparencia por cento que ten para que
todo asados ​​ben aí.
Vou mantelo como 100% e, a continuación, cando acabar con iso, todo está ben e bo.
Agora, se eu executar a aplicación e tomamos o app e encaixa-lo,
que cor de fondo está a ser axustado automaticamente
só porque temos un pouco de CSS, que di: "Vaia facer iso."
Tamén pode escribir JavaScript, tamén, que vai facer o mesmo
ou que podería usar para realmente dar unha pausa no xogo, facer cousas así.
Esta é, probablemente, cando se pode usar JavaScript.
Podería apagar o loop do xogo nese momento.
Necesitará de un pouco de JavaScript, porque iso non sería algo que CSS.
Pero ten en conta que é só un evento.
Podería dicir: "Cando a miña candidatura é redimensionada,
"Imos ver se estamos a agarrou." E é iso.
>> Ok? Teño falado moito. Existen cuestións tan lonxe de onde estamos? É.
[Alumno] Existe un tutorial para que todos poidan obter máis información? Si >>.
A pregunta é, existe un tutorial para iso? Eu só vou estendela lo a todo.
Hai algunhas cousas que pode ir. Imos realmente saír de aquí.
Deixe-me volver aquí.
Algo a destacar é o propio Visual Studio ten tutoriais construídos dentro
Deixe-me librar diso.
Se vai crear un novo proxecto, non File, New Project,
e ollar para o lado esquerdo, hai un nó en liña neste selector.
Vai levar un pouco. Estou no meu MyFi aquí.
Pero el vai vir cara arriba e el me vai dar unha oportunidade para atopar modelos
pero tamén, máis importante, as mostras así.
Entón, podo facer clic en JavaScript.
Vai atopar mostras para min. A miña resolución é ben alto aquí.
Normalmente, podes ver unha lista de unha morea de cousas distintas aquí.
Se hai algo que quere probar, escolla o idioma,
JavaScript aquí, e dicir: "Eu non sei como facer xeolocalización".
"Eu non sei como abrir un arquivo".
"Eu non sei como sacar proveito da cámara web
"Ou optimizar de contacto ou cousas dese tipo."
Hai mostras para todo: o reparto, buscando, barras de aplicacións,
facer chamadas remotas a un servizo, JSON codificación.
Todos estes tipos de cousas hai mostras para aquí,
e eles non son grandes mostras que van levalo a madrugada para separar
só para descubrir que unha cousa que quería aprender.
Son moi bos. Son pequenos, mesmo para os tipos de puntos de mostras.
Aprendín unha tonelada, pasando por estes min mesmo,
e por iso eu recomendo que moi como unha cousa.
>> Outra cousa a destacar tamén é claro que eu mostre dev.windows.com,
por iso, se volver a ese, verá na parte inferior hai tamén as mostras aquí.
Entón pode baixar todos eles dunha soa vez, pero hai tamén unha serie de outros recursos, tamén aquí
que poden axudar a chegar ata a velocidade.
>> Outra cousa, e eu realmente recomendo que tentar iso,
Eu teño el no meu blog, pero eu só vou directo ao asunto.
Eu vou te amosar. O meu blog ten recursos e cousas así.
Unha das cousas a destacar é aquí, esa cousa: a súa idea. O seu programa. 30 días.
Se fai clic sobre iso, que vai levar vostede a un sitio realmente útil.
Isto é moito máis útil do que podería esperar.
Este será de 30 días de contido que pode basicamente obter consellos e trucos
durante todo este proceso, como está creando unha aplicación.
E como non pode esperar, pode realmente facelo para os xogos tamén
e para aplicacións de teléfono, cousas dese tipo.
Entón, basicamente, se rexistrar para el, e eles van estar enviándolle consellos e trucos sobre,
"Xa penso en facelo? Vostede soporta presión?"
"Aquí están algunhas orientacións sobre como facelo tamén."
"Xa penso en someterse á tenda?"
"Xa penso en como vai vender a súa solicitude?"
Vai percorrer todas esas moitas cousas.
E en realidade, se está no camiño de xogo, nalgún momento
vai comezar a recoñecer a persoa a falar con vostede
porque realmente tiña que ir a Redmint facer estas e 2 vídeos gravados alí.
Pero iso é todo parte da pista de xogo,
e hai tamén unha pista chea para o desenvolvemento xeral da aplicación.
Iso chama-se Xeración App
Eu sempre recomendo que para ti tamén, ademais de mostras.
>> Hai unha morea de vídeos nun sitio chamado Canle 9 tamén.
Esta é probablemente a última cousa que eu vou recomendar, ben antes de pasar aquí.
Channel9.msdn.com.
Isto é óptimo porque non vai ser a lectura a través de toneladas de papeis brancos.
É basicamente unha morea de vídeos, screencasts e cousas que son directo ao punto.
Eu non debería dicir que é sempre directo ao punto. Depende de quen está facendo a falar.
Pero, xeralmente, hai uns vídeos realmente-a-punto aquí
que debería amosar-lle algo en particular que pode querer aprender ou ver a demo.
Hai tamén todo o noso contido da nosa conferencia, que pasou hai unhas semanas
chamado build, e vai ver que alí mesmo.
Hai as súas principais tecnoloxías para Windows 8 xogos. Alí vai.
Eu estaba alí, en realidade. Non me pode ver. Estaba aquí.
Pero de calquera xeito, iso de lado, eu recomendo que bótalle un ollo nestes vídeos.
Son moi útiles.
Se está preso en algo ou só quere ver o que podería facer algo, o lume os anteriores.
>> [Guarin] Windows Mail só me enviou un correo-e con un link para o contido
para os alumnos a baixar co código de exemplo e cousas así. >> [Bowen] Grande.
Incrible. Grazas, Edwin.
>> Boa. >> [Alumno] Eu teño unha pregunta. >> [Bowen] Oh Si, por favor.
[Pregunta estudante inaudível] >> [Bowen] Oh, eu estou feliz que pediu iso. Si
A pregunta era, hai unha interface visual para min crear cousas?
Edwin ha recompensa-lo xenerosa a esta pregunta.
Existe un xeito de facelo.
Debemos facelo agora? Imos facelo agora.
Eu estou indo a ir a el agora.
De feito, deixe-me engadir unha cousa a esta demostración,
e entón eu vou amosar-lle a resposta real.
Eu estaba indo para engadir un pouco máis de CSS aquí.
Eu estaba un pouco pola tangente aquí.
Deixe-me poñer en algún CSS aquí para sacar proveito
das clases que nós engadimos un pouco tempo,
para a cabeceira, do div mainContent, e, a continuación, para o greetingOutput.
Se eu fai iso e executalo, podes ver agora que temos un estofado pouco diferente e as marxes,
polo que temos, de feito, algunhas compensacións aquí.
Estes son máis para o que vai esperar dunha aplicación pulido final.
Pero eu só estou mostrando isto para vostede porque é en liña recta ata CSS.
Entón, as cousas que xa sabe que pode usar aquí para axustar o contido que desexa.
Xa viu como facer o fondo cambiar así.
>> Se eu atrás para o noso HTML, eu vou engadir máis un conxunto de reserva,
e iso é realmente vai ser un control de WinJS.
Eu estou indo a ir e incorporarse tanto, un rótulo. Déixeme que seguro que eu estou facendo iso no lugar seguro.
Probablemente bo o suficiente.
Aquí eu só engadiu - e imos pantalla completa para que poida ver a cousa toda -
Eu engade unha etiqueta á seguinte div.
A div chámase ratingControlDiv.
Por si só non fará nada.
Se abre este nun explorador, estaría mirando en branco, o propio div.
Pero por mor desa liña misteriosa do código que eu mostre antes,
o proceso todo, que vai mirar para algo que se parece iso -
-Gañou data-control - e que vai atopar o que está nese parámetro.
Vai facer unha instancia sexa o que sexa que está a apuntar.
Neste caso, é un control de clasificación, polo que estou dicindo: "Por favor, vai e substituír esa cousa
"Co que tes que facer para facer un control de clasificación."
Podería ser un control de aleta, que podería ser o anel de progreso ou calquera que sexa o control que quere usar.
Están todos indo para o traballo, esencialmente da mesma maneira.
Está a utilizar reserva HTML5 estándar para indicar o que quere,
e entón está indo a obter un control ao final deste. Déixeme realizar este.
Eu só copiei en que, e agora que a reserva convértese en tanto,
que é en realidade un gran número de elementos HTML.
Estas son todas as imaxes individuais, e non hai divs ao seu redor con selectores.
Espero que podes ver iso. É un pouco sutil.
Podo pasar o rato sobre os elementos diferentes, e iso vai permitir-me a ver a clasificación aquí.
Podo facer clic sobre el, e el se lembra da clasificación, pero que é sobre el.
Non está facendo nada coa clasificación.
>> A última cousa que quero amosar-lle este
antes de pasar a unha experiencia de deseño máis visual
é un pouco de código que podo usar para responder a esas WinJS controis.
Déixeme saír de alí, de volta para fóra da pantalla completa,
e pasar a JS aquí para segundo.
Podo facelo aquí. Creo que vou substituír esa cousa toda.
En realidade, eu creo que vai substituír todo iso, pero imos descubrir xuntos.
Vou poñer isto aquí. É. Vou borrar iso tamén.
O que eu engadir? Parece moito. Non é moito.
Eu só estendeu esta liña de código que eu xa falei antes,
e eu digo: "Cando todo estea listo, cando foron feitos todos os meus controis,
"Entón faga iso." Entón, a continuación, realizar esta función chamada rematada.
Neste caso, iso é o que pode descubrir.
Vai descubrir que o control div.
De feito, hai unha cousa que me gustaría destacar.
Esta liña seguinte está realmente dicindo: "Eu teño que ratingControlDiv".
"Quero falar con el como se fose un control real, un control WinJS".
Entón, basicamente, está pedindo para que a partir del.
Está dicindo: "Eu quero falar contigo, como un control."
E entón pode comezar a dicir cousas como: "Estamos indo para engadir un oínte para ti
"Entón, cando está cambiado, podemos responder a iso."
E entón nós tamén podemos facer cousas como esta. En realidade, este é o código antigo alí.
Coido que estou faltando pegar en máis dunha función,
e iso sería a función real que responde ao control clasificación sendo alterado.
Déixeme pop que en certo aquí en baixo,
algo en torno de alí.
E, neste caso, o único que hai de novo é o feito de que estamos entrando en
que o control de clasificación e nos di que estamos pedindo o que se chama o tentativeRating.
Hai unha morea de outras cousas distintas que ese control pode dicir,
e vai control por control.
É moi sinxelo. Vai ser capaz de descubrir ningunha dificultade.
Eu corro iso, e agora cando cambiar as clasificacións e prema na clasificación,
podes ver agora é realmente responder a ela.
É poñer esa clasificación na pantalla en que tag div doutra forma baleira
baixo do control de rating.
Esa é a maxia de unha morea de cousas aquí tamén.
Entón, como está creando aplicacións para a Windows Store,
hai unha tonelada de controis que pode simplemente usar. Todos eles funcionan así.
>> Deixe-me amosar-lle o lado visual de proxectar a estas aplicacións.
A boa noticia é que xa terá esta ferramenta cando se instala todo
se ir para que descargue e recibe Visual Studio.
Podo prema co botón dereito sobre iso. Eu non vou zoom in
El só di Open in Blender.
Blender é unha ferramenta que traballa de xeito conxunto co Visual Studio
e está enfocada moito máis no lado do deseño das cousas,
para que realmente superficies ferramentas que son optimizados para a creación de estilos,
a creación de animacións, traballando con CSS, unha morea de cousas neste tipo de vea.
Aquí o que debe ser moi interesante e bastante obvio inmediatamente é que estamos mirando para o app.
Esperemos que aínda estamos.
No canto de ver código, que aínda non ve na parte inferior,
estamos a ver a representación real da aplicación.
Ademais, non é só unha representación da aplicación, é en realidade a aplicación en execución.
E iso é o que é realmente bo sobre Blender.
O equipo fixo unha chea de traballo para traer HTML e JavaScript e CSS para esta ferramenta.
Agora podes en realidade, se está curioso, "O que isto quere dicir? O que podo facer?"
Podo realmente proxectar a esta aplicación, aínda que cousas como esta non existen na miña cita.
Lembre que o control de clasificación? Era só unha etiqueta div.
Este material, que estrela, só existe en tempo de execución. Como sei diso?
Hai un pouco de maxia por aquí.
Vexa estes raios?
Cada vez que ver un raio, o que significa que foi creado por algo en tempo de execución.
Algúns JavaScript correu e virou algo a este ou creou esta con algunha lóxica.
Estas estrelas que aparecen alí foron creados por JavaScript por WinJS.
O bo é que, non importa para min, eu aínda pode proxecto-lo,
Eu aínda pode entrar e cambiar isto, podo descubrir o que está a suceder aquí,
Podo ollar para o CSS, podo ir adiante e descubrir por que a cor é do xeito que está,
Podo comezar a xogar coas cousas e facer cousas horribles,
todo o que quero facer.
En realidade, eu vou deixar as cousas só.
Pero pode ver aquí é todo o CSS e está amosando aquí.
Se eu fose ata alí, que vai amosar todo o que eles chaman de Vencer,
así as regras de CSS que son os máis específicos e máis seleccionado para o elemento,
que probablemente xa ir máis nas súas clases,
onde pode dicir que non hai unha fonte xeral de que estamos aplicando a todo,
senón porque se trata dun h1 e eu ter unha cor definida para h1s,
que será desta cor, e iso é porque é máis específico que o body1.
Algo aquí mostra todo iso,
e é realmente unha cousa poderosa como obtén máis complexa,
está a se pregunta por que esas cousas son do xeito que son.
Realmente vai dicir-lle, e pode escoller calquera destes elementos aquí.
Esta cor non é tan malo, en realidade.
Pode seleccionalos. Espero que podes ver iso.
Por todo o que ten no seu aplicativo, ve unha fervenza enteira
de todo o CSS que podería aplicarse a este e que está gañando,
que, en realidade, tiña precedencia.
Estes son o tipo de aburrido. Non hai moita cousa a suceder nalgúns deles.
Se eu for, e cambiar a cor, entón vai comezar a ver algúns en cascada alí.
Tamén pode usar HTML aquí tamén.
Podo pasar e modificar as propiedades HTML todas esas cousas como eu desexo.
Hai só toneladas de cousas aquí.
>> Eu non quero tomar o seu tempo, pasando por todo aquí. Só sei que está aquí.
Hai unha serie de funcións orientadas ao proxecto que está só dispoñible para ti
así que pode estar visual, traballar co programa, e non ter que facer unha chea de adiviñación
que ten que facer normalmente e ciclismo de volta dun navegador de volta no seu deseño,
ao seu navegador.
Isto é realmente cousas legais para iso, e como desenvolver unha aplicación de Windows Store,
que vai facer moito máis produtivo.
>> Tamén vai ver que está acompañando o marcado aquí e seu CSS
como se está a traballar a través de cousas distintas.
É probabelmente moi difícil para vostede ver que, sobre todo en vídeo,
pero iso é o que está pasando aquí, e eu recomendo que familiarizado con iso.
Ela lle vai aforrar moito tempo. Isto é Blender.
Se fai os cambios aquí, van directamente a levar de volta ao longo do
para o Visual Studio.
Son os mesmos arquivos, é o mesmo de todo. Vou deixar só.
Eu teño un exemplo mellor que quero te amosar.
Pero se eu fixen un cambio alí e salva-lo e volvín para o Visual Studio, el diría:
"Ei, vostede só cambiou algo. Podo cargalo para ti?" Si
E está a usar o mesmo alí.
Isto é o fin de que a mostra particular.
>> Quero amosar-lle unha mostra de maior efecto só para darlle unha vista de outras funcións
podería pensar en ben.
Este é unha aplicación de mostra que se pode descargar.
Se ollar para algo chamado Campamento de Windows nunha caixa,
hai algúns exemplos que están nesa, e un deles é o Contoso Cookbook.
Só podo realizar por vostede.
Pantalla de inicio personalizada. Esta é a aplicación vista Grid.
Eles grazas algúns datos personalizados aquí. Podes navegar por este.
Pode ir e dar un ollo en varias cousas que nos farán fame nunha tarde de venres.
Eu non sei. O que me vai facer máis con fame?
Eu non sei. Eu só vou pegar un.
Vai para estas cousas. Ela vai amosar a receita.
Tamén pode, en lugar de facer clic nun elemento,
pode ir directo para esa categoría de contido, que parte do contido.
Neste caso, pode ler unha morea de teito Latina dicindo todo sobre estas receitas aquí
e despois ir directo para a receita específica.
Isto tamén permite cousas como a posta en común que eu mostre antes coas imaxes.
Tamén pode buscar para esta aplicación tamén.
É moi sinxelo de facer a investigación.
Basicamente, vostede está só comezando unha secuencia de texto desde Windows
e de decidir como quere manipular investigación con iso.
É algunhas liñas de código para conseguir isto, e entón o que fai con el despois que é completamente ata.
>> Aquí eles tamén teñen unha barra de aplicacións, a onde se están a usar algunha outra función.
Vou só dicir-lle o que é.
Un recordatorio vai utilizar o que se chama unha notificación regalo.
Isto é moi útil para que o usuario saber cando as cousas aconteceron,
como unha aplicación se instalou ou algo foi concluído.
Tamén é bo para xogos tamén.
Se tes un mundo persistente ou unha tarxeta de líder e un servizo que é de hospedaxe que
quizais nunha máquina separada, estas notificacións poden ser enviadas nunha máquina
e mesmo se o usuario non está a usar o seu xogo, xogar o seu xogo ou a execución do seu programa,
eles aínda poden recibir notificacións sobre eses tipos de eventos.
Entón, vostede podería dicir: "O seu castelo foi destruído ou está practicamente destruído."
"Volva aquí e defende-la", ou algo parecido.
Fai clic sobre a notificación, vai á dereita de volta para o xogo, e pode xoga-lo.
Entón, eses tipos de cousas poden axudar realmente atraer a xente de volta para a súa aplicación moi eficaz.
>> Hai tamén apoiar nesta aplicación para usar o micrófono, webcam,
facer vídeo e facer fotos.
Tamén pode fixar unha tella secundario.
É útil se quere só ter unha tella que vai directo para determinado contido.
Neste caso, vai directo para esta receita.
Todo o que eu estou mencionando Estou só amosando
por que é que as cousas que pode pensar sobre o uso tamén.
Para a maior parte, son moi sinxelos.
Quere só recomendo que traer esta mostra Explorer
e atopar un exemplo que pode amosar-lle como facelo.
É moi sinxelo de levar aqueles en súas aplicacións alí tamén.
>> Eu estaba indo para amosar-lle outra cousa que é moi legal aquí.
Vou aproveitar esta aplicación, e eu vou volver para o Visual Studio.
Esta aplicación está en execución. Funciona desde o Visual Studio.
Podo facer algunhas cousas moi ben con iso.
En realidade, teño unha opción para seleccionar un elemento,
e podo ir ata aquí para a aplicación en directo e podo dicir,
"Estou me pregunta por que é tempo de preparación gris un pouco máis lixeiro que o propio título?"
Podo facer clic sobre el.
Vai para sincronizar que ao seu Visual Studio,
e el me vai mostrar exactamente o contido xerado, que deu lugar a que parte da interface de usuario.
Polo tanto, neste caso, é punto subtítulos e construción double h4,
e que, probablemente, nos di o que necesitamos saber, xa que como un h4 dentro dese contexto,
só pode ir un certo tipo de letra.
Pero se eu non sei por que, eu podo facer clic en Estilos de seguimento.
Podo, entón, ampliar a fóra memoria e podo descubrir exactamente por iso que a cor non é a cor da carrocería
pero en realidade é outra cousa.
Esta é, esencialmente, as ferramentas dev do Internet Explorer
a un grao traído para Visual Studio.
Se xa traballou coas ferramentas Chrome Dev, Firebug, cousas dese tipo,
estes tipos de ferramentas que están no navegador,
este tipo de función foi levado directo para o Visual Studio
entón realmente non ten que lanzar un navegador e traballar con estas ferramentas por separado.
Agora eu teño unha aplicación Windows Store só correr,
e podo comezar a tirar-la e descubrir por que as cousas están a facer o que son.
>> Eu tamén podo facelo deste xeito tamén.
Podo ir e só incorporarse algo desde a reserva e descubrir o que é
no propio programa. Creo que xa pasei por todo.
Aquí estou paira sobre iso. Podo selecciona-lo.
Me vai mostrar na aplicación executándose real onde esa cousa é
que agora estou facendo clic na reserva.
Cousas ben legais.
Como está tentando descubrir o que está a ocorrer eo que está facendo HTML,
o CSS está facendo, manter isto presente.
Teña en conta que isto está aquí para vostede
e tamén que mestura pode traballar con unha aplicación executándose en directo.
>> A última cousa que eu quería te amosar con esta aplicación -
By the way, iso mostra que deltas como as cousas cambian moito,
así que pode ver a esto amarelos.
Estas son cousas que só cambiaron na aplicación.
Pero unha última cousa. Quero voltar Mestura só por un segundo aquí.
Imos abrir tanto, Open en Blender, aínda aplicación, mesmo todo.
Eu só quero amosar-lle a experiencia aquí non é só está preso na páxina de inicio
mirando para as cousas que vai ter por defecto cando executar a aplicación e deixar repousar alí.
Tamén pode activar este ben pequeno icono aquí.
É chamado de modo interactivo.
Fai clic en que. Traerá a súa aplicación.
Non está en modo deseño máis, para que non vai estar facendo clic en cousas
para cambiar a función, pero pode realmente traballar coa aplicación agora.
Pode facer clic, pode facer o que quere, chegar a unha receita que se preocupa
ou unha categoría. Imos para esta categoría.
Eu vou dicir: "Ok, aquí é onde quero debuxar."
Logo preme no botón, el lle vai traer de volta á superficie de deseño,
e agora pode facer todas estas cousas de que eu estaba falando antes.
Vou continuar premendo ata que eu recibín esta seleccionado, descubrir as súas dimensións,
descubrir o código HTML para iso, o CSS para el
para unha aplicación en execución, algunha parte posterior da aplicación.
Moi, moi útil. Vou amosar isto para vostede.
Por favor, manteña-o presente, se está mirando para escribir código con esta
porque vai salvarte unha morea de problemas, e é moi bo.
Isto é moi bonito todo o que eu quería te amosar en Blender e no Visual Studio para todo isto.
>> Calquera dúbida sobre calquera destas ferramentas?
Calquera cousa? >> [Guarin] Eu teño cousas para dar, por iso, boas preguntas, cousas boas.
>> [Bowen risas] Eu xa che mostre miñas demos aquí.
Vou poñelas na páxina de recursos e volverse para preguntas agora.
Esta primeira referencia é que a web Xeración App coa banda do xogo ea pista aplicación.
Rexístrese para aqueles.
Non ten que esperar os 30 días para obter o contido.
Pode comezar a ir e mirar para o contido de forma que desexe.
Eu entendo os seus prazos pode ser diferente - [risas]
Entón, cando é o hackathon? É un par de semanas, non?
Entón non ten os 30 días de espera.
Entón, si, pode rexistrar para iso e despois é só comezar a tirar o contido para fóra del.
Ademais, o Dev eo Centro de Deseño.
E eu non mencionei iso, pero hai tamén a tenda Docs.
Iso sería para despois da hackathon como está preparado para comezar a enviar as súas aplicacións para a tenda.
Existen algunhas orientacións útiles aquí, algunha orientación sobre como facer as cousas na tenda,
algúns problemas comúns que poden te enganar,
e que é o fin destes recursos.
>> Entón, o que está na súa mente? Calquera outra cousa que -
[Guarin] Quen está a pensar en facer unha aplicación de Windows para CS50? Legal.
[Bowen] Legal. Grande.
>> Calquera dúbida sobre o material que xa viu ata agora e como se relaciona con iso?
Por exemplo, con máis tempo eu podería levar un xogo que escribín
e que roda no navegador e só unha especie de pasar polo proceso de
de ter en Visual Studio e facelo unha aplicación de Windows Store.
Hai que máis tempo do que nós realmente tivemos que inclúen, hoxe,
pero a versión curta é que é o mesmo código que ten en execución no navegador,
e as cousas que cambia son as cousas que decide chamar ao Windows 8.
Entón, se queres usar encantos, se quere buscar ou compartir,
ten que crear unha barra de aplicacións para ocultar algunhas características para que,
eses son os tipos de cousas que cambiaría.
Pero o núcleo da súa aplicación web pode permanecer intacta.
Unha vez máis, mentres el traballa en IE10, que vai ser un porto moi fácil
para levar o material para o Visual Studio, en Blender, e facelo unha aplicación de Windows Store.
De novo, as únicas cousas que ten que aprender son as outras características
que pode usar para acender unha aplicación, como unha tella en directo e estes tipos de cousas.
>> É. >> [Alumno] A miña pregunta é sobre o traballo móbil.
Entón, se fai unha aplicación que funciona como unha aplicación no escritorio,
É realmente fácil de transferir-lo para o móbil, ou se hai unha -
A cuestión é, se eu fai unha aplicación de Windows Store que está realmente optimizado para ese ambiente
e quero trae-lo para un mundo móbil, que toma parte de facelo?
Iso, como moitas preguntas, é sempre unha resposta constante cambio.
A boa noticia é que se está honrado con HTML e JavaScript, CSS,
se está comezando a partir de unha aplicación de Windows Store,
que vai deixar que trae-lo para a web
e, a continuación, usar estes tipos de técnicas, como consultas de medios e as cousas,
para adaptarse a diferentes dispositivos de tamaño.
Dito isto, hai sempre os cadros e as cousas por aí
que o apoio que se estende diferentes tecnoloxías, plataformas diferentes.
Isto cambia o tempo.
Tamén estamos cambiando as cousas, así como miramos para o que temos agora
en realidade, con Windows Phone 8.
Temos algunhas infraestruturas fundamentais compartidos
ofrecido entre as aplicacións para os ambientes.
Entón, as cousas que está facendo para crear unha aplicación de Windows Store,
unha morea de que pode transitar nunha aplicación de Windows Phone 8 tamén.
Iso de novo é unha historia emerxente, polo que hai algún contido sobre iso en build.
O SDK acaba de saír un pouco atrás. El acaba de ser lanzado hai pouco tempo.
Pero en termos de outras plataformas tamén,
probablemente executado en moitas estruturas multiplataforma tamén.
A boa noticia é o material que está facendo aquí,
a principal función é superior cousas estándar web.
As únicas cousas que non se traducen facilmente son as cousas que Windows 8 fai,
pero iso non é sorpresa, porque é un recurso de Windows.
Non vai atopar reparto ou tipos semellantes de contratos en todas as outras plataformas.
Polo tanto, estas son as cousas que desexa desde unha perspectiva de deseño
comproba que ten formas de tipo de resumo que fóra así que pode dicir:
"Se eu estou correndo sobre iso, podo facer iso."
Se eu non estou, hai uns patróns de deseño que pode usar para ocultar o tipo de cousas fóra.
Pero manteña isto presente. É. Sentímolo. Dalle.
>> [Alumno] Se eu queira probar o meu aplicación de Windows encima [inaudível]
[Bowen] Yeah. Eu pulei unha cousa tamén. É.
Vou responder á súa pregunta en primeiro lugar, entón eu vou lle amosar unha característica que eu esquezo de mencionar.
Temos algunhas máquinas dispoñibles localmente. Sinto moito.
A pregunta era, como fago para probar as cousas en dispositivos
se non ocorrer de ter unha chea de cousas para escoller?
[Guarin] Nós prestou a vostedes, eu creo, 5 ou 6. Cantos precisa?
[Alumno] Temos 4 deles. >> Okay. Vostedes teñen catro Pizarras para xogar.
Entón, en definitiva que todos saiban, por favor. [Risas] >> [Bowen] impresionante.
Iso é unha resposta aínda mellor do que eu estaba indo a darlle.
Temos o horario de oficina para os desenvolvedores que facemos na nosa oficina
e agora en breve para Microsoft Store sobre a PRU,
pero Edwin xa tomou conta de ti.
Hai 4 Pizarras dispoñibles para prestar, para probas.
Alí imos nós. Hai un exemplo dun alí enriba.
Entón, si, absolutamente. Grande.
Absolutamente, de lonxe, o mellor xeito de proba-lo é estar nun dispositivo.
Se non ocorrer de ter un aínda ou non quere andar polo campus na neve
para incorporarse un ou sexa o que sexa, hai unha forma de facelo de volta o Visual Studio.
Se eu volver a onde eu estaba aquí, aquí en vez de usar ordenador local,
pode conectar a máquina remota, pero iso non é o que eu estou falando aquí.
Simulator é o que pode querer ollar.
Vou correr isto, e realmente o que é, é, esencialmente, unha xanela para o seu propio sistema.
Aquí é realmente o meu sistema en execución, execución Contoso,
pero dun xeito que me permite cambiar algúns dos parámetros de execución,
os parámetros ambientais.
Entón eu podo dicir aquí: "Vostede sabe o que?"
Oh Xa lo funcionando nun simulado monitor de 27 polgadas con resolución de 2560.
Podo facilmente caer que abaixo e ver o que a miña petición sería facer cunha pantalla pequena
ou modificación configuración de DPI ou calquera outra cousa.
Entón, nunha pantalla pequena, un 10,6, que é o que vai facer?
Isto aínda parece moi bo, non?
Vai querer facelo, especialmente se está enviando para a tenda, porque nós facemos
como parte do proceso de proba.
E se hai problemas como este,
logo pode realizar nun problema obter a certificación para a tenda.
Pero iso forma parte do simulador. Moi legal. Moi fácil de facer iso.
Tamén pode usar recursos como xiralo tan ben.
Podo facer clic no botón aquí, telo xirar, ver o que alguén tería como unha experiencia
xirando súa lousa, o seu tablet, e usando a súa aplicación con iso.
Hai algunhas outras cousas tamén, como emulación de chamada e algunhas outras cousas,
definindo GPS.
Podo finxir que estou nun lugar diferente e ver o que a miña aplicación fai
cando finjo que estou de volta en Seattle ou algo así.
Pero é un recurso moi útil, e é construído no Visual Studio e no Blender.
Si A súa pregunta.
>> [Alumno] Se está escribindo un xogo, o Visual Studio ten ningún apoio para a animación?
É. A cuestión é en torno de soporte de animación, sobre todo con xogos.
Depende. [Risas]
Con JavaScript vou dicir que probablemente hai menos apoio do que hai ao lado do XAML,
que ten prazos, ten storyboards e as cousas que son construídos dentro
Para animacións en aplicacións JavaScript, eu non sei o que de unha resposta que quero darlle.
Teño recursos no meu blog que pasan por unha serie de opcións para ambos animacións de física,
opcións para xogos orientados JavaScript en Windows 8.
Eu ía encamiñar-lo para aqueles.
Basicamente, non hai tantas opcións.
A razón que eu estou dubidando é que hai tantas opcións para facer animacións con JavaScript.
Podería ser CSS, podería basearse Canvas, que podería ser só animacións básicas DOM,
que podería ser unha morea de cousas distintas, polo que realmente depende da súa elección.
Se vostede decide empregar algo como Create.js ou cal ou outros tipos de estruturas -
Ben, eu non estou seguro de que vai ser capaz de utilizar un cadro de maior efecto
quere Impacto ou construír.
Iso tende a xerar máis código do que pode considerarse a partir de cero.
Pero nestes casos, aínda pode usar un simulador, pode utilizar os ambientes,
e eu só tenden a usar este medio para a miña plataforma de proba nestes casos
como eu estou a desenvolver xogos.
Eu fun moi ben, sobre todo con animacións de lona,
que é probablemente o máis común.
O mellor que vai atopar é probablemente as ferramentas dev no navegador
e as ferramentas dev en Visual Studio.
Unha especie de resposta sinuoso alí, pero espero que eu teño a súa resposta. Si Vostede
>> [Alumno] Cales son as opcións de almacenamento de datos para aplicacións de Windows 8?
Cales son as opcións de almacenamento de datos para aplicacións de Windows 8, Windows tenda de aplicacións?
As súas opcións son realmente cada aplicación ten a súa propia piscina de almacenamento local
para a configuración e os datos, pero tamén é ridiculamente doado de usar almacenamento en itinerancia,
de usar o almacenamento baseado na nube. É de balde.
O que pasa é que, basicamente, escoller unha clase diferente e di:
"Configuración de itinerancia, Gardar, este conxunto específico de contido",
e conta de Microsoft, o que quere que teña asinado en como,
Vai ser a clave para que a información de itinerancia arredor.
Entón, se eu usar o seu xogo no meu portátil e entón eu faga login coa mesma conta
e eu xogar o partido nunha superficie ou un comprimido,
que pode transitar automaticamente esta configuración e datos entre as máquinas.
Iso é unha cousa por defecto. Isto é bo para certas cantidades de datos.
Non ía poñer unha base de datos enorme para aqueles.
Para iso ten que ir a outro tipo de solucións, como unha base de datos aloxados na nube,
cousas así.
Hai algunhas outras opcións da comunidade en torno a outros tipos de tecnoloxías de datos.
Vin algunhas opcións SQLite na comunidade por alí tamén.
Así, cada vez máis están xurdindo, pero estas son as principais cousas que ía mirar
a un xogo ou unha aplicación.
E tiña unha pregunta na parte de atrás tamén.
>> [Alumno] En termos de rede [inaudível] carga ou descarga de arquivos [inaudível]
[Bowen] É a súa pregunta como se pode ver que ou como pode depurar iso e proba-lo?
[Alumno] Como pode depurá lo [inaudível]
Sentímolo. Eu non podo escoitar todo isto.
[Alumno] Como obtelo erro probado e tamén [inaudível]
Grande. Grande.
Como se traballa coa rede? Como se pode ver o que está pasando?
Hai moitas respostas diferentes a esta,
pero deixe-me amosar-lle probablemente as cousas máis fáciles aquí.
Déixeme librarse do simulador por un segundo.
Opcións de depuración só un par para a rede.
Hai unha pila de rede completa cocido dereito tanto no nivel WinRT e de WinJS,
para que poida facilmente facer XHR, tipo AJAX chamadas do seu xogo ou aplicación para facelo.
Primeiramente, eu tenden a usar 2 cousas.
Eu uso as propias ferramentas dev reais, que teñen unha pila de rede cocido para eles.
Deixe-me amosar-lle a páxina de inicio de Windows.
Podo traer iso, e non hai realmente un proxy de rede cocido en estas ferramentas aquí.
Entón eu podo facer iso, podo actualizar a páxina, e el me vai amosar todas as interaccións,
incluíndo chamadas AJAX para esta sesión, para que a duración da solicitude.
Isto é útil. Vai ser moi útil para aplicacións baseadas en navegador.
Para outros tipos de aplicacións, incluíndo Windows tenda de aplicacións,
Eu uso unha ferramenta chamada Fiddler.
Vai comezar un xogo en resposta. [Risas]
Fiddler é un proxy simple. Eu creo que podo poñer isto para vostede.
É só GetFiddler.com, que, curiosamente, estou trazando miña pila de rede
indo GetFiddler.
Pero de calquera xeito, Fiddler foi escrito por un dos PMs do equipo do IE,
el sabe o que está facendo.
Esta é unha boa proxy que pode usar para o tráfico de rede de depuración.
Eu recomenda isto. Pregunta alí tamén.
>> [Alumno] Existe un xeito doado de integrar a entrada lingua estranxeira,
como xaponés ou chinés, en aplicacións de Windows?
Eu non podo dicir que fixen moito do que eu, pero é cocido dentro
Hai opcións para claro emitindo súa aplicación - Sinto moito, eu non dixen que a pregunta -
opcións en torno da globalización, localización de contidos,
incluíndo cousas como ser capaz de vender en distintos mercados
e destino que versión do seu programa para as linguas individuais
ou culturas ou cousas dese tipo. Absolutamente construído dentro
Tivemos apoio para que, para sempre,
e que leva adiante nas súas opcións para Windows Store.
Podes facelo na propia tenda, vender en diferentes mercados,
pode facelo na aplicación, así tamén co uso de recursos para definir,
"Se eu fose desenvolvido para esa cultura, a continuación, usar esas substitucións para o meu contido textual
"Ou utilizar o dereito de lector á esquerda."
Estas son todas parte dos WinJS estándar e APIs WinRT. Boa pregunta.
>> Como estamos indo? Outros?
E se alguén ten preguntas en vídeo, eu estou cbowen @ Microsoft,
polo que estou feliz de ter algunhas das súas preguntas do futuro.
Moi - De futuro, os futuros [imita eco].
Entón, aquí son eu. Deixe-me poñer de volta o meu contacto aquí.
Entón, só tes que enviar-me unha nota, cbowen @ Microsoft,
e eu vou volver a vostede o máis rápido que poida.
>> Calquera outra cousa que está querendo saber? Será que somos bos?
Grande. Todo ben. Grazas a todos moito. Eu aprecio iso. [Aplausos]
>> [CS50.TV]