ciao a tutti grazie per essere venuti qui
oggi e farò del mio meglio per non farlo
sprecare il vostro tempo in modo da questo discorso è di circa
asp.net e mobile ho parlato un po ‘
su asp.net MVC e mostra qualche codice
campioni non è specifico per
asp.net Parlo di più di Mobile, quindi se
non sei in asp.net va bene
mi chiamo Scott Hanselman e lo farei
lavorare sulle squadre azzurre e asp.net
In realtà lavoro a Portland, in Oregon
che non è a Seattle Seattle è dove
Microsoft è vivo circa quattro ore
sud al sicuro al di fuori della realtà di Redmond
campo di distorsione effettivamente funzionare da
casa mia che è stata molto carina, quindi noi
tutti sono d’accordo sul fatto che il cellulare sia un grosso problema
enorme a volte le persone non si rendono conto
anche se è grande e quanto è veloce il mobile
ricevendo e parlerò un po ‘di
che ci sono in effetti un miliardo di dispositivi mobili
abbonamenti e questo è uno stupido grande
ammontare un miliardo significa efficacemente uno
per ogni sette persone sul pianeta
è interessante ma si potrebbe dire
beh, questo è solo uno su sette, ma
ciò che è davvero più interessante
questo è che ci sono un certo numero di
persone con cui stanno solo usando
il loro dispositivo mobile per arrivare sul web
questo è davvero interessante perché in
le economie emergenti sono persone
ha saltato le cose che il mondo occidentale
non ho dovuto saltare così sai che abbiamo avuto
alcune guerre e abbiamo costruito alcune ferrovie
e abbiamo avuto Wars e abbiamo costruito fogna e
acqua e cose del genere ma ci sono
alcuni paesi nel mondo dove le persone
non avere acqua corrente nella loro casa
non hanno elettricità ma hanno un
telefono cellulare
in realtà non hanno mai avuto il rame
cavi che corrono verso le loro case che ho
parenti nella mia famiglia che hanno
non ha mai avuto un telefono fisso perché un telefono fisso
sarebbe costoso hanno un cellulare
telefono non hanno un computer e
non hanno internet a casa loro
ma hanno un cellulare mobile
solo gli utenti web stanno diventando un grande affare
ci sono almeno un quarto della
persone negli Stati Uniti che non usano
computer e invece solo tu
usa il loro dispositivo mobile e da cellulare
dispositivo voglio dire, sai piccolo telefono grande
telefono tablet tablet grasso piccolo nulla
da quattro a dieci pollici lo sai
puoi stare in tasca se ne hai uno
tasca davvero grande ma in posti come
L’Egitto nei paesi emergenti e tu lo sai
un terzo mondo non mi piace quella parola ma
conosci posti che hanno scavalcato alcuni
sviluppo e sono saltati su come
India ed Egitto non hanno
computer hanno Pocket
supercomputer quindi devi chiedere
te stesso cosa succede quando un potenziale
persona con cui potrebbe essere in affari
visiti il tuo sito web con il loro
dispositivo mobile che aspetto ha
e tieni presente anche che un terzo di
La Cina è come tutta l’Europa e tutti
gli Stati Uniti e tutti insieme hanno fatto così
un sacco di gente e non c’è niente
peggio della sensazione di visitare
il sito web di qualcuno su un dispositivo mobile e
averlo essere schifoso, credo che lo abbiamo
tutti hanno avuto quell’esperienza dove abbiamo visitato
da qualche parte e ho visto che non tornerò mai più
ci sono fondamentalmente due cose che tu
può fare per farmi odiare hai un avere
no nessun sito mobile non è affatto mobile
esperienza o sto andando da qualche parte a un
link specifico e mi fermi e dici
scarica la nostra schifosa applicazione e io
di ‘no no grazie, davvero davvero
voglio andare dove stavo andando io
era nel mezzo di un HTTP GET se tu
non lo farei se non ti dispiacerebbe
IIIi non voglio essere reindirizzato al
App Store va bene non ti disturberò
ancora
controllare non disturbarmi di nuovo e dove lo fanno
Finisco per finire nella home page di
il loro pessimo sito mobile, anche se io
ha chiesto un collegamento profondo non è bello il
innovazione che abbiamo visto dopo
l’iPhone in dentro nel telefono cellulare
disegno Penso che sia fantastico che
la quantità di innovazione è
straordinario davvero okay quindi cosa possiamo fare
fare come persone che possiedono siti web che eseguono
siti Web che progettano bene i siti Web
fondamentalmente questo è ciò in cui credo
sono tre cose ufficiali che puoi fare
e questi sono totalmente validi per primi
niente questa è una decisione commerciale tu
potrebbe fare
Non farò niente e spero
i browser mobili migliorano perché
se forse hai un po ‘lento
processo di sviluppo forse ti piace
Dì a te stesso che sei mischia ma
sei davvero mischia o caduta che stiamo facendo
cascata ma se lo facciamo molto scrummy
e conosci il progetto per il cellulare
il sito sarà fatto in 18 mesi bene 18
tra qualche mese tutti vorremmo
otto processori Android da sette pollici
cellulari e quelli saranno probabilmente
navigatori veramente bravi, quindi non fare nulla
browser mobile andrà meglio che
potrebbe essere la risposta che potrei cambiare il
codice lato client che potrei effettivamente cambiare
l’ HTML e usa cose come adattive
design o design reattivo per cambiare il mio
sito senza dover riscrivere il mio sito
questo è uno dei cambiamenti che fai
il lato client per adattarsi
c’è molto spazio se vuoi
come tutto questo spazio extra qui dal
modo se si desidera avere un posto sul
piano sono più che felice di divertirmi ragazzi
chi sei in piedi sulle scale o tu
potresti scegliere come target il cellulare direttamente
in realtà cambiare il server rilevare il
dispositivo mobile e poi fare qualcosa
su di esso , quindi queste sono le cose
non puoi fare nulla cambia il cliente
cambia il server questo è quello che succede
se non fai niente, questo è Phil hack
come un mio amico che è uscito dai lavori
per github questo è il suo blog su un cellulare
simulatore quindi qual è la primissima cosa
che farai quando visiterai un
sito come quello diverso da soffiare in un
rabbia e inizia a urlare e stai per
vai così esattamente che devi toccare
sei tap tap andando e si sta andando
zoom in quel modo giusto e io non ho
un touchscreen anche se a volte lo faccio
sposta semplicemente la mia faccia in avanti che mi rende
sento di avere una superficie che
è bello, quindi tocca TAPpare bene
che cambia la vista non mi interessa
su questa merda voglio vedere questa parte
qui così potrei impostare loro ciò che è chiamato a
tag viewport
è un meta tag che hai detto nel tuo
HTML questa è la quantità minima possibile
di lavoro che potresti fare potresti andare
al tuo sito web attuale in questo momento
probabilmente un annuncio di voi vedrà che non l’ho fatto
lo faccio anche per il mio slide lì li tu
vai potresti semplicemente impostare il tag viewport
e poi hanno
il tap tap è implicito che non lo sei
in realtà cambiando il sito che non sei
cambiando il flusso del sito che sei
basta zoomare per loro inizialmente piccoli
cosa una riga di codice ma apprezzo
quella linea di codice e apprezzo
persone che lo fanno perché è così
sta dicendo che se loro almeno
riconoscere che i dispositivi mobili vengono visualizzati
ora ho acceso il mio sito verso un
design mobile-friendly quando il numero
di persone che stavano colpendo il mio sito
ha raggiunto il 10% e alcune persone dicono bene
questo è davvero un numero limitato solo il 10% di
la tua gente è mobile è come se
ciò significa che una persona su dieci lo è
avere un’esperienza scadente sul mio sito web
ne vuoi davvero uno su ogni dieci
i visitatori odiano essere sul tuo sito web
quindi quella era una soglia per cui mi sentivo
ero una quantità ragionevole di tempo e
la ragione per molte persone piuttosto che io
Rispetterei la loro decisione se questo
molti utenti dell’opera si sono presentati
probabilmente farò più del mio segno il mio sito
amichevole per gli utenti dell’opera ma i due ragazzi
che usano l’opera che visitano il mio sito
non ho avuto problemi con il mio sito e io
piace molto entrambi entrambi sono
gentiluomo molto gentile mi dispiace che tu non possa venire
in questa zona d’Europa e non scegliere
sull’opera, adoro l’opera, quindi è così
Il sito di Phil con il viewport è giusto
quindi ho ingrandito un pochino e
è bello quindi quello che puoi fare è però
fissarlo sul client è possibile ottimizzare
per il dispositivo attuale e richiede
meno duplicazioni di sforzi che voglio
mostrarti alcune tecniche con css3
puoi fare per farlo accadere
c’è un grosso problema, però dipende
Quanto è grande un problema quando lo fai
usa alcune delle tecniche che sto per fare
mostrarti che cosa cambierai
il flusso del sito in modo che lo farà
sembrano grandi su mobile ma non è così
in realtà riconosco ancora che sei su un
dispositivo mobile pensa allo schermo
la dimensione è la cosa principale che css3
e le query sui media ti consentono di farlo
dice che qui c’è il CSS che voglio che tu usi
per un tablet ed ecco il CSS che voglio
da usare per un telefono ma questo è meno
interessante dal fatto che io sia attivo
la rete di confine qui se voi ragazzi
ricorda che sto vivendo nel 1993 e io
avere un iPhone
o ma io sono nel 1993 e ho l’ ampiezza di banda
ho LTE e cose del genere, quindi se io
visita il mio blog. Avrò questo bello
sito mobile con questi PNG da 1 megabyte
screenshot che non sono completamente
rispettando il fatto che sono su un cellulare
piano dati all’estero così non solo è
uso inefficiente della larghezza di banda ma questo
non considera nemmeno che ci sia
differenze nel cellulare e nel
desktop questo è un esempio di davvero
disegno schifoso che ho visto quando ho dato
questo discorso in Russia questo è solo un
fondamentalmente un sito enorme che scorre
giù per sempre ma è supposta che tu sia
su un sistema 1280 non si assume nemmeno
1.024 quindi finisci per tipo di zoom
in giro come sei come sei come un
piccola lente d’ingrandimento mentre vaghi
in giro sul loro sito è semplicemente orribile ma
dato che si tratta di colonne di testo sarebbe
si presta davvero a una riprogettazione mobile
Ho assunto un designer per lavorare sul mio sito
che intendo dire sul serio amore
i tuoi stilisti danno loro un abbraccio perché se
sei un programmatore che pensa che tu possa
design probabilmente non puoi il e uno di
le cose divertenti sono che ho progettato il mio
primo sito web e ho pensato che fosse
grande e io stesso ero una pacca sulla
indietro e poi ho avuto un designer I
li pagò come soldi veri e questo è
un’altra cosa importante paga la tua
designer soldi veri
non dirlo mai oh, ne avrai un sacco
di esposizione e ci metto un link a voi
in fondo a loro non piace così io
sai che ho salvato e gli ho dato un
vero sacco di soldi ero un sacco di iuta
di denaro e ha negato e poi dopo di lui
progettato tutto questo è venuto fuori
e come il tuo sito è stato risucchiato prima
così per sei anni e tu
non ho mai detto niente di buono che non volevo
per dire qualcosa perché perché lo sapevo
che avevi fatto ciò che sapevi ma il
secondo ho avuto una persona reale che sapeva
quello che stavano facendo lo progettano sono
come oh uomo è molto meglio che vorrei
visita sempre il tuo sito web e lo farei
vomitare nella mia bocca è come davvero
grazie grazie ok quindi sto correndo a
mille 24 ok così per simulare a
schermo più grande ho ingrandito ok così
non ti preoccupare che il fatto che si
non posso vedere che non è rappresentativo
del mio sito ho zumato per fingere
siamo su un grande schermo
ora se noti qui in alto
ci sono alcuni menu okay e poi
c’è questo binario di destra questo è
dove vendere fuori e non ho come gli annunci e
roba ora se comincio a ridimensionare questo vedi
come stanno le cose, c’è un punto di interruzione a
mille e ventiquattro proprio lì e il mio
volto scompare in tutta la guida destra
scompare ora lo farò
di dimensioni normali ci sono dimensioni normali okay così
questo è il design delle dimensioni normali
come sono i menu arancioni?
schiacciato dove sono andati
beh si sono trasformati in un menu a discesa usando
un tag HTML che nessuno ha mai usato
chiamato opt gruppo uno dei più utili
Tag HTML ma nessuno ha mai lo usa come
trova una persona HTML al lavoro e prova
loro e vedere se sanno come usare opt
gruppo senza cercare ciò che ho fatto
è che ho preso quelli che UL non ha ordinato
elencare era voce di menu voce e menu
titolo e oggetto e poi ho appena preso
quelli che erano quel menu in alto e
trasformato in un gruppo di opzioni, quindi quelli
sono in realtà inanimati. Abal vede questi sono
cliccabile e quelli non lo sono e lo faccio
dinamicamente in questo modo non ho avuto a
riscrivere che tutto il tempo, se cambio la mia
menu fa automaticamente quello che è
bello questo è che se andate e
visita questo su un iPhone o su un Android
telefono o su un Windows Phone sto usando un
controllo nativo sembra un piccolo
cosa ma perché vorresti usare a
le persone di controllo nativo stanno facendo sempre
il proprietario disegna un CSS personalizzato per un menu a discesa
menu bene c’è un perfettamente buono
menu a discesa che funziona già perché
non usare quello che penso davvero quando
fai disegni mobili dovresti
considera il fatto che abbiano ottimizzato
cose del genere quindi vado a trovarmi
è davvero veloce su questo telefono
qui e vedremo questo probabilmente
mi è costato circa quarantacinque dollari da fare
questa demo in questo momento
grazie AT & T grazie e se clicco
il menu a discesa
Prendo il piccolo Apple a destra
lì e sembra che sia su Android
e sembra che non dovrebbe
per apparire come su un Windows Phone che mi piace
che sono un grande fan dei controlli nativi I
avrei potuto fare un pareggio del proprietario che darò
sei un esempio di ciò che un proprietario disegna
il sito sembra che abbiamo preso l’asp.net
sito web che è come il nostro portale per
sviluppatori di asp.net e questo è dove il nostro
forum e cose sono e abbiamo questo
menu in alto e quando lo faccio
davvero piccolo colpisce un breakpoint e
diventa sensibile questo è chiamato
design reattivo o adattivo che vedi
questo qui se clicco su quello noi
prendi questo drop down quando dico
il proprietario pesca divs e roba totalmente personalizzati
lo abbiamo fatto in quel modo e non ho avuto un
sacco di feedback, ma io personalmente non sono
un fan di quel controllo nativo dà
le persone sono molto più amichevoli
in Android le persone si sentono come se ti interessano
su di loro non più che non dovresti
Sto solo dicendo che la query sui media è
davvero molto facile e se conosci CSS
questo è un altro esempio in cui puoi andare
e tira fuori qualcosa di simile in a
giorno questo è davvero uno dei migliori
temi che andranno per tutto
tutti i miei discorsi e specialmente questo
è che queste tecniche sono così semplici
che si potrebbe dire non ci vostro capo che
ci vorrebbe una settimana e tu potresti semplicemente
dimmi che sai che ho davvero bisogno di lavorare
da casa e potresti andare a casa per piacere
una settimana e devi solo scrivere come
quel po ‘ di codice e poi puoi
tornare e tornare a casa ed è stato così difficile
così difficile qui stavo solo dicendo che sono così
avrò una richiesta di media qui per il
schermo e quando le cose sono al massimo
larghezza di mille 24 e puoi impostare
in qualsiasi modo tu voglia usare il CSS
è all’interno di quel blocco che è
fogli di stile a cascata e in questo caso
siamo a cascata in base alle dimensioni, quindi il
la cosa più semplice che tu possa fare
in questo momento si dice display call a none e
applicalo alla tua guida destra e
Basta fare scomparire non sto dicendo
quello è il design ideale e noi
dovrebbe farlo tutti, ma sto solo dicendo
mi piace solo per dimostrare il punto che potresti
mostra al tuo capo come se sparisse
fa e chiamano è bello andare
lo faremo ancora meglio c’è un
sito davvero fantastico per l’ispirazione
questo si chiama media query
è uno di questi dove hanno preso
così sopra il dominio di primo livello di qualcuno
questo caso era la Spagna quindi non è media
le domande calmano la sua media query es perché
questa è la cosa bella da fare come Flickr
nel codice corto per Flickr come FL I
vedi un punto K sono registrati in Corea
qualunque cosa io pensi è un po ‘ strano
media query è un sito Web e questo è
un sito web di ispirazione è letteralmente
solo una lista di siti interessanti che cambiano
in base alle loro dimensioni e questo è un po ‘
il modo standard per un designer di
esprimere a voi ciò che i tuoi media
interrogazione sarà simile hanno questi
punti di rottura desktop tablet stretto e
quindi telefono e alcuni di loro sono davvero
davvero interessante puoi vedere come in
questo esempio abbiamo una vasta categoria
menu cambiano completamente il layout
dei libri da sinistra a destra a
essendo superiore al menu categorie fondo ottenere
schiacciato i libri finiscono in fila e
allora qui le categorie si trasformano in a
discesa su un telefono e ci sono
dozzine e dozzine di davvero fantastici
quelli da qualche parte cambieranno il flusso
da qualche parte cambieranno alcuni menu
l’intero sito cambia interamente
sulle domande dei media qui è dove
in realtà non mostrare una foto di questo
ragazzo amichevole perché sta per esaurirsi
troppa larghezza di banda e si guarda
per un IDE che è davvero buono
supporto per CSS questo è parte del
supporto che abbiamo per CSS in visual
studio in cui un piccolo film non ha suonato
no ha suonato una volta e poi si ferma
è quello che succede e tu fai un
scivolo di fantasia con un film in cui gioca
lo sfondo e non lo fa nemmeno
fare tutto ciò che è semplicemente triste dimenticare
tu PowerPoint fai schifo
Mi farò effettivamente fare il lavoro
do-do-do-do-do così ora sto per dire
scheda dei media che era quello che era quel film
per esprimere a te quello che è fantastico
snippet niente di così potente
sì un PowerPoint ora ce ne sono molti
modelli esistenti davvero fantastici che tu
può applicare ora la volontà progettista hardcore
vai a fare queste cose da soli ma se
stai insistendo per fare qualcosa
te uno dei siti web che ho
raccomandare si chiama get skeleton e
loro hanno un boilerplate mobile che è
per i responsive design ciò che fanno è
hanno impostato questo layout di griglia è come un
960 griglia e prendi semplicemente le tue div e
applicali e poi lo faranno
gestire automaticamente il reattivo
design per il ridimensionamento automatico
le tue cose quindi per siti come i miei simili
il mio podcast in cui in realtà non ho ottenuto
un designer a guardarlo ma io uso solo
scheletro e si ridimensiona automaticamente così
questo è oh questo è un modo semplice per farlo
cose sul cliente che vuoi adattare
con quelli che cambiano le dimensioni dello schermo ora se
eri un business che aveva un prodotto
catalogo avrai problemi
con le tue immagini e le tue immagini
sarà grande e loro otterranno
scaricato ma non stanno ancora andando
a costano ancora la persona a
molta larghezza di banda quindi ad esempio questo
questo screenshot qui è un grande PNG e se
Ridimensiono ad un punto di interruzione ragione su
lì vedi come ho cambiato il
avvolgendo nel CSS così ho abbandonato tutto il
smetti di scrivere e poi man mano che divento più piccolo
guarda come questo squish così funziona
davvero bene ma ho davvero cambiato
la dimensione di quell’immagine è specifica
CSS per ridimensionare che ho anche specifico
CSS per fare il ridimensionamento di YouTube che è
una delle cose che le persone molto
raramente è una piccola attenzione a
trucco particolare che puoi effettivamente applicare CSS
e raggiungere nell’iframe e ridimensionare il
YouTube di persona e ho esempi
di come farlo sul mio blog
ma quale sarebbe stato l’ ideale?
cosa da fare questo è solo un blog nessuno
nessuno legge questo e se fosse un simile
il catalogo IKEA o qualcosa e persone
stavano colpendo questo come milioni e
milioni di volte al giorno e ho
questi grafici giganti che rappresentano a
prodotto che dovrei fare è che dovrei
annusare sul lato server quale sia la dimensione
dello schermo dovrei avere un
database che dice oh è un Nokia
qualunque cosa e ha uno schermo che è questo
grande e dovrei inviare loro specifiche di
una certa dimensione del grafico per le immagini grandi
sarebbe molto importante anche per te
voglio essere sicuro che tu pensi
cose come la retina mostra questa immagine
qui è stato fatto come un display Retina così
In realtà ne ho due versioni
logo e io uso i CSS non solo per guardare
la dimensione dello schermo ma anche il
la densità dei pixel è Bo Wiener che hai tutto
probabilmente fatto prima con un nuovo
iPhone visiti un sito e poi vedi
che la grafica sembra un po ‘Jaggi
perché stanno prendendo una grafica che è
cento su cento e loro sono
facendolo andare a 400 per 400 e sembra
Jaggi puoi effettivamente scoprirlo
CSS e quindi applicare ad alta risoluzione
grafica ad esso che è un’altra cosa
stai pensando a quei piccoli frammenti di
I polacchi diventeranno sempre di più
importante perché possiamo vedere con il
iPhone ha diverse dimensioni dello schermo
ci sono diverse densità di schermo
e ora avremo 7 pollici e
Schermo da 10 pollici e tutto questo
le dimensioni dello schermo di densità devono diventare
qualcosa a cui pensi ma a
qualche punto si raggiunge il limite di cosa
puoi farlo semplicemente riorganizzando i CSS
c’è solo così tanto che puoi fare
design intelligente forse stai facendo aa
applicazione di polling o una registrazione di dati
applicazione e lo vuoi davvero
sembra un app mobile ad un certo punto
il tuo sito web ora vuole diventare un web
applicazione che forse userete
qualcosa come PhoneGap e tu stai andando
provare a creare un’app e inserirla nel
store e vuoi che assomigli
qualcosa di ben si può risolvere il problema sul
server ed è possibile inviare nuovamente personalizzato
viste mobili e jQuery Mobile è un
esempio popolare è l’esempio che
Userò ma anche cose come l’interfaccia utente di Kendo
sono in Sencha, c’è molto di diverso
il punto è se non hai giocato
con fogli di stile mobile o mobile
le strutture non la rendono tale
sembra davvero così
per dire questo perché mi sento male che io
anche bisogno di dirlo, ma è sorprendente
quante persone che stanno facendo qualcosa di
come un catalogo di prodotti per IKEA ma
insistere per scrivere il proprio cellulare
quadro quando non è nemmeno quello
il loro business è che ci sono super-super
persone intelligenti che hanno risolto questi
problemi e sono costantemente alla ricerca di
risolvi questi problemi sì , sì, lo farei
seriamente vi incoraggio a non scrivere
il tuo framework mobile usa qualcuno
Altrimenti non mi interessa se è jQuery
Il cellulare sceglie qualcun altro in particolare
quando si tratta di cose come quelle
formati grafici Mi avevano dato la
esempio un momento fa a proposito di sniffare il
browser e quindi inviare un ridimensionato
grafica che userebbe meno larghezza di banda
presto ci sono molti discorsi
la specifica HTML e cambiandola
HTML o in css3 in modo che tu possa
in qualche modo rilevare e sapere qual è il
la larghezza di banda è e ha un tag di origine bassa
Non sono sicuro che qualcuno qui sia vecchio
abbastanza da ricordare che quello era uno di
i grandi i grandi tag dei primi
Anni ’90 dici fonte immagine qualunque sia e
quindi ricorda questo
è un peccato che in realtà abbiamo smesso di usare
quel tag e questo è ora quando finalmente
ho bisogno di quel tag che la bassa fonte ti darebbe
la versione low res perché è tornata
quando i doni arrivano in una riga a
tempo in modo da inviare come un nero e
bianco sai la versione punteggiata e quella
sarebbe venuto in bassa fonte e poi in seguito
su ti riporti il colore che è
ufficialmente nello spec e nessuno
lo supporta per qualsiasi motivo e ora siamo
cercando di capire come fare le cose
con loro con situazioni di bassa larghezza di banda
è un peccato quindi se lo aggiusti
il server si ottiene la quantità massima di
flessibilità è possibile inviare persone personalizzate
viste che sono specificamente organizzate
per i loro dispositivi purtroppo però
può essere un po ‘ripetitivo
perché se stai facendo le cose in entrambi
Rails o in MVC si potrebbe finire con
più set di visualizzazioni in modo da poter avere
viste del prodotto mobile e viste del prodotto
tablet e visualizzazioni del prodotto per il desktop
anche il rilevamento del dispositivo è difficile se
lo fai in senso generale se lo sei
cercando di colpirti conosci iPhone e
Android quindi puoi ottenere il 90% delle persone
ma se sei seriamente intenzionato a farlo
rilevamento della detenzione del dispositivo di cui hai bisogno
per ottenere una società e acquistare il loro database
una compagnia che mi piace dall’Inghilterra è
chiamato 51 gradi
e vendono un database di dispositivi e loro
avere tutti i dettagli su come e se
è davvero importante e vuoi colpire
a tutti piace questo dispositivo di supporto
mp3 o PNG trasparenti ed esattamente
quanto è ampio lo schermo
piccoli dettagli su quel dispositivo così
prendiamo un prendiamo un sito web
fa schifo e lo faccio succhiare meno non lo faccio nemmeno
sapere se è necessario mi sono dimenticato
va bene e commentalo
perchè sembra spaventoso, quindi è così
un piccolo e stupido sito Web della conferenza lo fa
fare per te ed è una versione desktop
del sito e ho come sai
sfoglia per data sfoglia l’altoparlante e io
puoi cliccare su un oratore e poi vedere a
tabella che mostra le cose che
oratore sta parlando e poi posso
clicca sul tag e poi guarda il
sessioni per tag quindi è una specie di cubo
di dati questo è molto comune in qualsiasi cosa
che si tratti di un catalogo di prodotti o di un
elenco degli altoparlanti posso andare di persona da
categoria per data per stanza e girare questo
cubo in giro ora se dovessi prendere
questo però e lo mise in un cellulare
dispositivo questa è una cosa chiamata il
Elettrico mobile elettrico a piombo
con questi ragazzi sono fantastici e
hanno un simulatore iPhone per PC
che utilizza una versione personalizzata di cromo
per simulare un iPhone e anche
supporta cose come la geolocalizzazione e
roba puoi vedere che questo sito fa schifo
piuttosto male e non c’è quantità di
pizzicando che mi salverà qui questo
fa schifo
Voglio dire, è utilizzabile ma è imbarazzante
giusto così se questa è una pessima esperienza
ma quali sono alcune cose che potremmo
potenzialmente fare con quello bene in questo
caso ho intenzione di utilizzare asp.net MVC e
Ho portato una cosa chiamata jQuery
Mobile
MVC è un pacchetto, usiamo una cosa
chiamato new get è come gemme per dotnet
e portiamo in jQuery Mobile e così via
cade in questo nuovo layout quindi questo layout
quello che ho qui si chiama layout
mobile è come una pagina principale qui
la mia pagina principale per il mio sito desktop e it
porta in jQuery
ecco la stessa identica cosa tranne che
layout dot mobile quindi l’ unica cosa
quello che è cambiato è il nome del file che c’è
nessun file di configurazione o altro e abbiamo
questo è un pacchetto CSS mobile
il fascio di tutti i diversi CSS e
tutti i diversi JavaScript che noi
bisogno di rendere questo aspetto piacevole e anche ottenuto
jQuery Mobile qui e quindi ecco il mio
jQuery e e dov’è il mio oops ora che ho
appena rotto oh quella era una cosa orribile
cosa ho fatto ho appena drogato
qualcosa da un posto all’altro
bene vedremo se funziona così no
disfa quando commetti un errore così grave
oh questo sarà divertente per tutti
per tutti noi oh dolce dolce misericordioso
Signore, cosa è successo, tu pensi che io
ho trascinato i pacchetti in modelli
davvero sì Wow
facciamo solo una pausa per un secondo e
panico, dovremmo stare bene, come farà Scott?
gestire questo fatto tada Wow
ciò implicherebbe che stavo usando la fonte
controllo
che avrebbe richiesto pensiero e
la premura da parte mia non è la mia fonte
il controllo consiste di questi file zip signore
ma io rispetto che tu tu pensi
che altamente di me che avrei avuto
controllo sorgente questo è dove il tutto
la cosa va orribilmente orribilmente male okay
quindi è qualcosa che va bene, papà
andando fuori di testa
si ok, mi muoverò un po ‘
più lento e probabilmente lo sarà
solo un naufragio del treno andare avanti e spingere
fermati sul video che stiamo registrando
ora perché non c’è modo che questo sia
andrà bene per chiunque e poi lui
caduto sopra oh potrei totalmente potrebbe legare
io come me sono diabetico oh no mi sento male I
potrei usare totalmente quello che posso ottenere
succo per favore penso che probabilmente lo farebbe
essere scortese a fare tutto bene
pensi che sia tutto ok, okay, così questo
qui è la stessa cosa tranne che con a
layout leggermente diverso andiamo avanti
e assicurati di provare ciò che esattamente è giusto
è successo qui, aggiungerò del testo
solo per dimostrare il punto
ok ora che non appare qui
va bene
quindi quello che abbiamo fatto è che abbiamo un
layout completamente diverso che sia
accadendo eccetto che il corpo è in essere
reso con le cose esistenti che
ha senso
così solo in virtù del fatto che lo è
mobile il layout è cambiato tranne il
parte centrale viene ancora dal
lo stesso posto in questo caso viene da
indice questo è un po ‘di aggiornamento del testo e
ricaricare
quindi ho un layout mobile ma ho il
stessa vista parziale che sta succedendo
dentro e potrebbe andar bene
essere accettabile ma potrebbe anche esserlo
un po ‘di formaggio se ne ho portato un po’
un po ‘di navigazione come questa oops
non la navigazione porta in qualche navigazione
perché non ho intenzione di spendere troppo
digitando il tempo perché penso che tu creda
io che posso scrivere bene con questo
performance che probabilmente non credi
che posso scrivere ma continuiamo a farlo
supponi per un secondo che io sia stato
coasting on charm per gli ultimi 20 anni
della mia carriera e bene ho tipo di ma
sì e lui può che riesce a malapena a digitare e
Sono così ho abbandonato quel menu e
tipo di esso sembra fondamentalmente schifoso
entrambi i dispositivi in modo da conoscere il successo ma
quello che potevo fare era applicare questi
piccoli dati – annotazioni e questo è un
cosa che è unica per jQuery Mobile I
un po ‘ come hanno alcuni sistemi di layout
Classi CSS che dovresti ricordare così
diresti che la classe div è uguale a qualcosa
mobile e si otterrebbe un cellulare
Esperienza che fanno questi ragazzi sono loro
dite bene che questo avrà il ruolo
di un ListView
quindi questa lista non ordinata ha il ruolo di
essere un ListView e solo in virtù di
questo fatto lo scopriranno e loro
mostrerà qualcosa di diverso ma io
non voglio davvero che sia per il mio
desktop, quindi cosa farò invece
ho intenzione di portarlo via, lo farò
vado qui e ho intenzione di portare in un
visualizzazione mobile personalizzata in questo modo che userò
jQuery Mobile in un posto e non in
l’altro quindi qui sono totalmente il
desktop ok
e poi ho l’indice mobile e quello
indice in alto Il mobile è in realtà un punto indice
qualche stringa magica di cui mostrerò di più
che in un secondo quindi qui ho io sono
totalmente il desktop e qui abbiamo
ha un aspetto davvero decente
uomo
e tu noti come l’ ha ereditato
stile solo in virtù del fatto che esso
aveva quei dati – in effetti posso cambiare
quel tema
sono chiamati temi entrando nel
layout e dice il tuo tema di dati a voi
può andare e scaricare diversi temi e
cambia l’aspetto e la sensazione di adesso
questo caso sembra ancora jQuery
Mobile, ma puoi tema comunque
vuoi che il tuo designer possa creare un
tema jQuery Mobile, se si va al
lancia il sito X su M Rolex com intero
il sito è in realtà jQuery Mobile ma è così
non sembra jQuery Mobile it
assomiglia totalmente al marchio Rolex
quindi sfortunatamente jQuery Mobile ha
diventare così popolare che la gente semplicemente
usa il tema predefinito e poi solo tu
vai sul sito, vai, si
jQuery Mobile
è come i pulsanti predefiniti di Java o simili
nel giorno in cui a Borland piaceva il
piccola casella di controllo verde lì va bene
pulsante e sai che l’hai scritto in
Borland, quindi dovresti metterlo un po ‘
lavorare nel vostro tema e cercare di renderlo
abbinare quindi usa le cose che sono buone
a riguardo ma poi cambia look e
si sentono in modo che corrisponda quello che si sta cercando di
compire così qui solo in virtù del
In effetti è chiamato dot mobile
raccogliendo quella roba ora posso entrare
quella home page e inizia a spostarmi
in giro ma voglio davvero tornare indietro
in visualizzazione desktop perché potrei volere
essere in grado di fare il debug su a
macchina desktop o vedere desktop sul cellulare
quindi ho questo switcher di visualizzazione che posso
clicca su quella vista switcher e ora ho
ho un desktop sul cellulare perché a volte
vuoi essere in grado di farlo, ma qui
Ora sono sul desktop e non ho
modo di tornare giusto così perché è così
bene questo switcher vista è a
visione parziale e questi sono reali comuni
su siti come questo voglio essere sicuro
quello che esiste nel layout principale come
bene così quando sono sul desktop
Ho un modo per tornare indietro così sono
andando a rilasciarlo sul desktop e
torna qui e ora io dico
visualizzazione desktop e potrei cambiare
avanti e indietro e quella vista mobile è
semplicemente super semplice tutto ciò che sta facendo qui è
sta dicendo
se è un dispositivo mobile puoi cambiare
avanti e indietro tra visualizzazione mobile e
imposta solo un piccolo biscotto ma questo è
una linea interessante qui se è un
dispositivo mobile quindi cosa vuol dire
la mia applicazione qui qui sono in desktop
modalità e posso vedere uno switcher vista ma
da qui sul browser desktop non posso
forse voglio fare il debug, quindi sono solo
commentarlo così non mi interessa
se si tratta di un dispositivo mobile o meno io
voglio farlo funzionare per qualsiasi cosa
ora posso fare il debug del mio cellulare
sito usando i miei strumenti Chrome o qualunque cosa
voglio e poi più tardi potrei cambiarlo
avanti e indietro quindi è un po ‘bello così
torniamo alla visualizzazione mobile e poi
andremo a guardare qualcosa come un
elenco degli oratori quindi eccoci di nuovo qui
con un layout mobile tranne che ereditato
quell’altoparlante del desktop visualizza l’elenco di
i diffusori sono piuttosto semplici , andiamo a dare un’occhiata
i relatori non fanno altro che dire
per ogni oratore non è nulla
particolarmente stravagante ma potrei prenderlo
tutti gli altoparlanti e rendi quel mobile come
bene e tutto quello che farò per farlo
infatti, il cellulare è solo aggiungere questa riga di dati
visualizzazione elenco in modo che sia effettivamente identica a
prima e colpisci f5 e ora ho un
sito dall’aspetto attraente quindi a questo punto
il tuo capo sta iniziando a diventare
sospettoso che tu stia spendendo
troppo tempo lavorando da casa e
stai facendo tutte le cose facili così lui è
ti darò qualcosa davvero
complicato e potrebbe dire che è così
ottimo lavoro con il sito mobile ma
Voglio davvero capacità di ricerca di tipo “avanti”
sai così posso iniziare a scrivere e avere
filtra il sito e tutto il resto
roba questo è dove dici wow oh sì
Devo probabilmente essere architetto
un po ‘di Java Jason Internet XML
devi solo costringerlo a farlo
confuso tutto bene e poi vai dentro
e tu vai così ma ma quando lo fai
che devi partire per come tre
giorni e non lasciarlo mai vedere il
codice sorgente e se il tuo capo è come il mio
capo e lui legge l’assegno in posta allora
sei fregato questo ciò che funziona solo
se è come un vestito lo sai o se lei
lei non codifica quindi è tutto e
questo è tutto il lato client che lo ottieni
ottieni questo filtro di dati gratuito
che è molto carino quindi a quel punto
quindi potrei cliccare su qualcosa
come questo ci sono le mie sessioni e io
potrebbe passare attraverso ognuno di questi e
aggiornali e in tutti questi casi lo sono
aggiungendo solo queste piccole viste di lista e
questa è una specie di esempio contrito ma
funziona davvero bene, ecco a
esempio un po ‘ più complicato dove
diamo un’occhiata a date quindi se ho di nuovo fuori
qui e torneremo a parlare
Ho dei buoni elenchi di tag che sono presi
query Mobile è davvero buono per poco
piccoli cubi di dati come questo e poi se
colpiamo la data giusta e quel tipo di sguardi
schifoso, potrei solo fare una lista di
date ma sarebbe più bello mettere un
un po ‘ più di pensiero e uso
alcune delle caratteristiche del
quadro e ogni struttura è
diverso ma una delle cose che io
come su jQuery Mobile è questa lista
divisore quindi tutto ciò che ho fatto qui è detto
è un elenco di dati di ListView per ogni data
e poi ogni volta che vedo cambiare il giorno
Inserirò un divisore di lista semplicemente inserendo un
divisore e in questo modo non sembra così
così sciatto così invece di come questo
sembra così e poi puoi farlo di nuovo
sperimentare con i tuoi temi andiamo
torna a un tema e vedi se ce n’è uno
che funziona per te e poi puoi
di nuovo puoi andare a scaricare temi
eccoti qua, è bello
tema
quindi ora posso spostarmi e vedere che ho
arrivato qui e questo è un esempio in cui a
tavolo aveva senso sul desktop non lo sono
a Non sono una persona di tipo CSS ma se lo è
un tavolo dovresti probabilmente permetterti
per utilizzare il tag table, perché a volte
questo i ragazzi del designer CSS sono come hey
l’uomo si sa come utilizzare un div parlano
così i ragazzi CSS non usano il
tavolo ogni volta che usi un tavolo tu
uccide un gattino e sono come me
dati tabulari sì amico sono i tavoli
le cattive tabelle sono utili
sul desktop, ma va bene, è bello
verremo con un’altra soluzione allora
quindi qui abbiamo un tavolo di sessioni
qui quello che possiamo fare è che possiamo avere
dati di stile tabulare utilizzando alcune informazioni di base
tag semantici e questo è ciò che è bello
su ottimi siti mobili mobili
le strutture piuttosto sono quell’avviso se
non c’è niente di speciale qui è solo Li
un’ancora h3p e roba forte senza fantasia
succedendo HTML in realtà si è secondario esso
fornisce solo la struttura di base che cosa è
bello questo è un paio di cose che siamo
usando i tag semantici come h3 strong
significa qualcosa ma anche notare questo
href sta avvolgendo l’ intera cosa così
che tutto sta per diventare un
ancora e se torniamo qui
troviamo un altro più interessante
slot con più cose in corso che è
il pranzo non è interessante , non lo è
interessante che ci sei andato così ho preso
quel tavolo e davvero cambiato è
non più un tavolo è una lista e
abbiamo la h3 è il titolo del
sessione e poi il forte è il
speaker e possiamo muoverci un po ‘
un po ‘più pulito e ogni volta che aggiungi un H an
href ottieni questo movimento familiare
avanti la metafora, così abbiamo fatto finora
la data in cui abbiamo un oratore e poi sembra
schifoso qui
andiamo avanti e passeremo
anche quella è la sessione principale
e nota come non sono nemmeno costretto a farlo
ricompilare per fare questo genere di cose
perché sto effettivamente usando lo stesso
controller di back-end che volevo fare
sicuro che le informazioni che sono state inviate
alla vista che viewmodel è stato condiviso
tra i desktop ora in alcuni casi
quando non crei siti per dispositivi mobili
tutto si adatterà a una pagina
così e potrebbe essere necessario avere un
controller back-end personalizzato che sta andando
in particolare per suddividere le cose
situazioni in cui hai come un mago
o sceglierai qualche data o riempirai
in grande formato ma per la maggior parte
per siti di base e per siti di inserimento dati
come questo o siti di visita del cubo di dati
puoi farlo con una logica di back-end
e quindi solo viste diverse in questo modo
caso non ho solo venire con una pagina
quello usa il modello esistente ma io ho
aggiunto collegamenti per spostarsi in modo da poter mantenere
andando avanti posso continuare a passare
tag e io posso continuare a passare
altoparlanti quindi ho messo insieme un cellulare
sito con una quantità minima di sforzo ma
questo non è in linea sebbene non potrei inserire
questo in PhoneGap o mettilo nel
negozio perché richiede di sapere a
connessione a Internet che potrei
non necessariamente voglio soprattutto un mio
FATA se sono a una conferenza come questa
dove non ho internet tutto il tempo
quindi vediamo che possiamo fare i buchi
il tutto di nuovo, tranne su un singolo
pagina quindi quello che faremo qui è
piuttosto che un sacco di punti di vista come
quello e molta navigazione stiamo andando
usare knockout knockout è questo tipo di
bella modello client vista ViewModel dimensionato
legare il raccoglitore del sito client in modo che l’indice
la pagina contiene effettivamente tutte le altre visualizzazioni
su una pagina quindi anziché navigare
dalla vista per visualizzare ogni vista esiste su
la stessa pagina nello stesso momento ho
preso lista per data e lista per speaker
e tutte queste cose e sto inserendo
loro ci e poi basta nasconderli così
sono sempre sulla pagina ma non puoi
vederli, la convenzione che sto usando è un
sottolineatura di fronte a cose che sono
parziali quindi c’è quello che abbiamo visto
prima di questo
sono tutti gli altoparlanti tranne anziché a
usando il codice lato server che sta usando
codice lato client con knockout quindi dati –
il bind è knockout e dati – il ruolo è
jQuery, quindi stiamo dicendo che lo faremo
legare a ciascun oratore e ricordarlo
abbiamo questo cubo di dati abbiamo una lista
di sessioni abbiamo altoparlanti e tag
e date e vogliamo essere in grado di gentile
di interrogarci su questo set di dati
come otteniamo quel set di dati sul
cliente e poi come lo spostiamo
bene il set di dati e il controller ha
cambiato così ora invece di fare tutto
quelle domande e tutto ciò che indossa questo
e indossalo sul server, siamo solo
prendendo tutto il set di dati e lo siamo
girandolo come Jason ho parlato un po ‘
un po ‘su questo nella nota chiave se la tua
set di dati non così grandi è solo un
un paio di migliaia di dischi inviano tutto
mandalo dappertutto perché diamine non è così
che sta per essere inviato tutta la strada sopra
lì e poi posso fare cose come per
ciascun diffusore dove vincolante dei dati è
che si verificano in JavaScript sul client
lato usando knockout ok ma il migliore
parte questo è ciò che applichiamo solo quelli
vincoli accadono tutti in una volta
fai il get on line 14 quando andiamo a dire
ottenere tutti quei dati, ma cosa succede se sei
offline cosa succede se sei offline com’è
funzionerà
bene html5 ti consente di avere una cache
manifest il manifest della cache è diverso
dalla cache HTTP che sei
avere familiarità con questo è letteralmente un manifest
una polizza di carico una lista di tutti i
cose che ti piacerebbe davvero
il browser mantenuto locale quindi ecco una lista
di tutte quelle cose che vogliamo locali
incluso sulla linea 23 la loro casa / tutto
data lo stesso JSON quindi se siamo offline
userà la cache di Jason, okay
manifest viene scaricato in cui funziona
Chrome e funziona credo che funzioni
nell’iPhone quindi la navigazione
viene collegato come eventi click e tutto
quello che fa è cambiare la vista sul
modello e vedrai gli hash
si verificano nel browser quindi ecco l’esatto
stessa cosa e useremo
e guarda questo URL qui vedi come siamo
spostandoci non abbiamo mai lasciato
quella homepage abbiamo scaricato solo quella
pagina abbiamo scaricato il set di dati e
possiamo muoverci intorno a quel cubo e poi
Potrei tirare il cavo e continuare a muovermi
in giro perché sto usando la cache html5
manifest, quindi è davvero fantastico
tecnica che si potrebbe usare per mettere
insieme un’applicazione di dati che è
mobile e anche offline anche tu puoi ottenere
query è possibile ottenere temi come ho parlato
su in jQuery Mobile che non sembrano niente
affatto come jQuery Mobile questo è un
davvero strano questo in realtà è un
Tema Windows Phone 7 per jQuery Mobile
quindi quello che potresti potenzialmente fare è se
hai un’applicazione o forse
applicazioni e loro sul mercato
che sono per più dispositivi che hai
un’app Android hai un Windows Phone
app hai un’app per iPhone ma parte di
quella domanda è online il circa
pagina della pagina di feedback piuttosto che
quella sensazione di aver lasciato il telefono
e andato da qualche altra parte che potrebbe sembrare
come il telefono che sono su così te
potrebbe scrivere una pagina jQuery Mobile
farebbe il genere di cose che volevi
che si tratti di sondaggi o di inserimento di dati o
qualunque cosa e poi se hanno un Windows
Telefonate nel tema ed è tutto
CSS e sembra il telefono che
sono così piuttosto che simili
jQuery Mobile sembra un iPhone o
un telefono Android o Windows Phone e
rende la tua applicazione più asciutta
non ti stai ripetendo perché
stai solo scambiando temi basati su
il tipo di telefono che hai che è
piuttosto dolce quindi ovviamente l’approccio
che si sceglie è tutto dipende dalla
tipo di app che stai costruendo e che sono
lì qualsiasi web forma le persone nella stanza
non va bene , non voglio dimostrarlo
demo c’è un ragazzo che mi chiami più tardi
amico, quindi molte persone stanno dicendo bene
Non voglio essere in grado di farlo voglio
costruisci tutte le stesse cose tranne me
bisogno di essere in grado di farlo sul modulo web
in modo che tu possa fare forme mobili e web –
questo si chiama URL amichevoli di asp.net e
è su NuGet adesso
Ti mostrerò molto molto brevemente
com’è che sia così qui la tua gente
sono abituati a vedere dot aspx nell’URL
e se preferirebbero non vederlo così
diremo semplicemente slash foo e così via
lo preleva automaticamente se lo hai
un cibo fuori aspx diventa solo foo se
hai un foo o in un bar diventa
foo bar qualunque cosa in questo caso, qui posso
vai da qualche parte come questa barra di cibo
taglia 34 e questo è in realtà il cibo è
pagina px e quindi posso semplicemente tirare il
URL amichevole segmenta così i moduli web
gli sviluppatori possono fare questo genere di cose e
quindi posso aggiungere un commutatore di vista mobile così
non solo ottengo URL amichevoli ma da
in virtù di ciò posso passare a
mobile l’URL è lo stesso ma ora lo sono
usando una vista mobile e la usa tutta
stessa convenzione foo e food op mobile
ora ho usato questo dot mobile come un
esempio un certo numero di volte ma è
davvero importante sottolineare questo
mobile non significa niente è solo
qualche segno posso andare qui dentro e
cambiare la modalità di visualizzazione qui potrei dire
Voglio una nuova modalità di visualizzazione wp7 e voglio
usato ogni volta che lo user agent ha
Windows Phone quindi se volessi un iPhone
cosa specifica vorrei dire oops I
sarebbe solo dire fare iPhone iPhone e poi
Vorrei andare e ho indicizzato telefono e
layout punto iPhone quindi cosa ti prende
pensando all’idea di questi display
modalità che nemmeno devono essere
specifico per mobile
potresti avere oro argento e platino
potresti avere un tablet che non deve
essere mobile potrebbe essere basato sull’utente
perché la condizione di contesto in questo
caso, sto solo dicendo che user agent potrei
guarda i biscotti potrei guardare la lingua
Potrei cambiare in qualsiasi modo voglia
se facessi roba in arabo, potrei
avere il punto indice da destra a sinistra punto CS HTML
e utilizzare la modalità di visualizzazione per passare in
anche io potrei avere due consuetudini
cose per ciechi se rilevo un
screen reader non è specifico per dispositivi mobili
ma è tutto sul lato server
quindi questi sono alcuni dei pensieri che
abbiamo ora in giro per cellulari e se
vai al mio blog e fai clic sui post
per categoria ho un intero cellulare
sezione in cui parlo di questa roba
esempi di come prendere i siti esistenti
spostali e grazie mille
per il tuo tempo sulla tua attenzione
tu
oggi e farò del mio meglio per non farlo
sprecare il vostro tempo in modo da questo discorso è di circa
asp.net e mobile ho parlato un po ‘
su asp.net MVC e mostra qualche codice
campioni non è specifico per
asp.net Parlo di più di Mobile, quindi se
non sei in asp.net va bene
mi chiamo Scott Hanselman e lo farei
lavorare sulle squadre azzurre e asp.net
In realtà lavoro a Portland, in Oregon
che non è a Seattle Seattle è dove
Microsoft è vivo circa quattro ore
sud al sicuro al di fuori della realtà di Redmond
campo di distorsione effettivamente funzionare da
casa mia che è stata molto carina, quindi noi
tutti sono d’accordo sul fatto che il cellulare sia un grosso problema
enorme a volte le persone non si rendono conto
anche se è grande e quanto è veloce il mobile
ricevendo e parlerò un po ‘di
che ci sono in effetti un miliardo di dispositivi mobili
abbonamenti e questo è uno stupido grande
ammontare un miliardo significa efficacemente uno
per ogni sette persone sul pianeta
è interessante ma si potrebbe dire
beh, questo è solo uno su sette, ma
ciò che è davvero più interessante
questo è che ci sono un certo numero di
persone con cui stanno solo usando
il loro dispositivo mobile per arrivare sul web
questo è davvero interessante perché in
le economie emergenti sono persone
ha saltato le cose che il mondo occidentale
non ho dovuto saltare così sai che abbiamo avuto
alcune guerre e abbiamo costruito alcune ferrovie
e abbiamo avuto Wars e abbiamo costruito fogna e
acqua e cose del genere ma ci sono
alcuni paesi nel mondo dove le persone
non avere acqua corrente nella loro casa
non hanno elettricità ma hanno un
telefono cellulare
in realtà non hanno mai avuto il rame
cavi che corrono verso le loro case che ho
parenti nella mia famiglia che hanno
non ha mai avuto un telefono fisso perché un telefono fisso
sarebbe costoso hanno un cellulare
telefono non hanno un computer e
non hanno internet a casa loro
ma hanno un cellulare mobile
solo gli utenti web stanno diventando un grande affare
ci sono almeno un quarto della
persone negli Stati Uniti che non usano
computer e invece solo tu
usa il loro dispositivo mobile e da cellulare
dispositivo voglio dire, sai piccolo telefono grande
telefono tablet tablet grasso piccolo nulla
da quattro a dieci pollici lo sai
puoi stare in tasca se ne hai uno
tasca davvero grande ma in posti come
L’Egitto nei paesi emergenti e tu lo sai
un terzo mondo non mi piace quella parola ma
conosci posti che hanno scavalcato alcuni
sviluppo e sono saltati su come
India ed Egitto non hanno
computer hanno Pocket
supercomputer quindi devi chiedere
te stesso cosa succede quando un potenziale
persona con cui potrebbe essere in affari
visiti il tuo sito web con il loro
dispositivo mobile che aspetto ha
e tieni presente anche che un terzo di
La Cina è come tutta l’Europa e tutti
gli Stati Uniti e tutti insieme hanno fatto così
un sacco di gente e non c’è niente
peggio della sensazione di visitare
il sito web di qualcuno su un dispositivo mobile e
averlo essere schifoso, credo che lo abbiamo
tutti hanno avuto quell’esperienza dove abbiamo visitato
da qualche parte e ho visto che non tornerò mai più
ci sono fondamentalmente due cose che tu
può fare per farmi odiare hai un avere
no nessun sito mobile non è affatto mobile
esperienza o sto andando da qualche parte a un
link specifico e mi fermi e dici
scarica la nostra schifosa applicazione e io
di ‘no no grazie, davvero davvero
voglio andare dove stavo andando io
era nel mezzo di un HTTP GET se tu
non lo farei se non ti dispiacerebbe
IIIi non voglio essere reindirizzato al
App Store va bene non ti disturberò
ancora
controllare non disturbarmi di nuovo e dove lo fanno
Finisco per finire nella home page di
il loro pessimo sito mobile, anche se io
ha chiesto un collegamento profondo non è bello il
innovazione che abbiamo visto dopo
l’iPhone in dentro nel telefono cellulare
disegno Penso che sia fantastico che
la quantità di innovazione è
straordinario davvero okay quindi cosa possiamo fare
fare come persone che possiedono siti web che eseguono
siti Web che progettano bene i siti Web
fondamentalmente questo è ciò in cui credo
sono tre cose ufficiali che puoi fare
e questi sono totalmente validi per primi
niente questa è una decisione commerciale tu
potrebbe fare
Non farò niente e spero
i browser mobili migliorano perché
se forse hai un po ‘lento
processo di sviluppo forse ti piace
Dì a te stesso che sei mischia ma
sei davvero mischia o caduta che stiamo facendo
cascata ma se lo facciamo molto scrummy
e conosci il progetto per il cellulare
il sito sarà fatto in 18 mesi bene 18
tra qualche mese tutti vorremmo
otto processori Android da sette pollici
cellulari e quelli saranno probabilmente
navigatori veramente bravi, quindi non fare nulla
browser mobile andrà meglio che
potrebbe essere la risposta che potrei cambiare il
codice lato client che potrei effettivamente cambiare
l’ HTML e usa cose come adattive
design o design reattivo per cambiare il mio
sito senza dover riscrivere il mio sito
questo è uno dei cambiamenti che fai
il lato client per adattarsi
c’è molto spazio se vuoi
come tutto questo spazio extra qui dal
modo se si desidera avere un posto sul
piano sono più che felice di divertirmi ragazzi
chi sei in piedi sulle scale o tu
potresti scegliere come target il cellulare direttamente
in realtà cambiare il server rilevare il
dispositivo mobile e poi fare qualcosa
su di esso , quindi queste sono le cose
non puoi fare nulla cambia il cliente
cambia il server questo è quello che succede
se non fai niente, questo è Phil hack
come un mio amico che è uscito dai lavori
per github questo è il suo blog su un cellulare
simulatore quindi qual è la primissima cosa
che farai quando visiterai un
sito come quello diverso da soffiare in un
rabbia e inizia a urlare e stai per
vai così esattamente che devi toccare
sei tap tap andando e si sta andando
zoom in quel modo giusto e io non ho
un touchscreen anche se a volte lo faccio
sposta semplicemente la mia faccia in avanti che mi rende
sento di avere una superficie che
è bello, quindi tocca TAPpare bene
che cambia la vista non mi interessa
su questa merda voglio vedere questa parte
qui così potrei impostare loro ciò che è chiamato a
tag viewport
è un meta tag che hai detto nel tuo
HTML questa è la quantità minima possibile
di lavoro che potresti fare potresti andare
al tuo sito web attuale in questo momento
probabilmente un annuncio di voi vedrà che non l’ho fatto
lo faccio anche per il mio slide lì li tu
vai potresti semplicemente impostare il tag viewport
e poi hanno
il tap tap è implicito che non lo sei
in realtà cambiando il sito che non sei
cambiando il flusso del sito che sei
basta zoomare per loro inizialmente piccoli
cosa una riga di codice ma apprezzo
quella linea di codice e apprezzo
persone che lo fanno perché è così
sta dicendo che se loro almeno
riconoscere che i dispositivi mobili vengono visualizzati
ora ho acceso il mio sito verso un
design mobile-friendly quando il numero
di persone che stavano colpendo il mio sito
ha raggiunto il 10% e alcune persone dicono bene
questo è davvero un numero limitato solo il 10% di
la tua gente è mobile è come se
ciò significa che una persona su dieci lo è
avere un’esperienza scadente sul mio sito web
ne vuoi davvero uno su ogni dieci
i visitatori odiano essere sul tuo sito web
quindi quella era una soglia per cui mi sentivo
ero una quantità ragionevole di tempo e
la ragione per molte persone piuttosto che io
Rispetterei la loro decisione se questo
molti utenti dell’opera si sono presentati
probabilmente farò più del mio segno il mio sito
amichevole per gli utenti dell’opera ma i due ragazzi
che usano l’opera che visitano il mio sito
non ho avuto problemi con il mio sito e io
piace molto entrambi entrambi sono
gentiluomo molto gentile mi dispiace che tu non possa venire
in questa zona d’Europa e non scegliere
sull’opera, adoro l’opera, quindi è così
Il sito di Phil con il viewport è giusto
quindi ho ingrandito un pochino e
è bello quindi quello che puoi fare è però
fissarlo sul client è possibile ottimizzare
per il dispositivo attuale e richiede
meno duplicazioni di sforzi che voglio
mostrarti alcune tecniche con css3
puoi fare per farlo accadere
c’è un grosso problema, però dipende
Quanto è grande un problema quando lo fai
usa alcune delle tecniche che sto per fare
mostrarti che cosa cambierai
il flusso del sito in modo che lo farà
sembrano grandi su mobile ma non è così
in realtà riconosco ancora che sei su un
dispositivo mobile pensa allo schermo
la dimensione è la cosa principale che css3
e le query sui media ti consentono di farlo
dice che qui c’è il CSS che voglio che tu usi
per un tablet ed ecco il CSS che voglio
da usare per un telefono ma questo è meno
interessante dal fatto che io sia attivo
la rete di confine qui se voi ragazzi
ricorda che sto vivendo nel 1993 e io
avere un iPhone
o ma io sono nel 1993 e ho l’ ampiezza di banda
ho LTE e cose del genere, quindi se io
visita il mio blog. Avrò questo bello
sito mobile con questi PNG da 1 megabyte
screenshot che non sono completamente
rispettando il fatto che sono su un cellulare
piano dati all’estero così non solo è
uso inefficiente della larghezza di banda ma questo
non considera nemmeno che ci sia
differenze nel cellulare e nel
desktop questo è un esempio di davvero
disegno schifoso che ho visto quando ho dato
questo discorso in Russia questo è solo un
fondamentalmente un sito enorme che scorre
giù per sempre ma è supposta che tu sia
su un sistema 1280 non si assume nemmeno
1.024 quindi finisci per tipo di zoom
in giro come sei come sei come un
piccola lente d’ingrandimento mentre vaghi
in giro sul loro sito è semplicemente orribile ma
dato che si tratta di colonne di testo sarebbe
si presta davvero a una riprogettazione mobile
Ho assunto un designer per lavorare sul mio sito
che intendo dire sul serio amore
i tuoi stilisti danno loro un abbraccio perché se
sei un programmatore che pensa che tu possa
design probabilmente non puoi il e uno di
le cose divertenti sono che ho progettato il mio
primo sito web e ho pensato che fosse
grande e io stesso ero una pacca sulla
indietro e poi ho avuto un designer I
li pagò come soldi veri e questo è
un’altra cosa importante paga la tua
designer soldi veri
non dirlo mai oh, ne avrai un sacco
di esposizione e ci metto un link a voi
in fondo a loro non piace così io
sai che ho salvato e gli ho dato un
vero sacco di soldi ero un sacco di iuta
di denaro e ha negato e poi dopo di lui
progettato tutto questo è venuto fuori
e come il tuo sito è stato risucchiato prima
così per sei anni e tu
non ho mai detto niente di buono che non volevo
per dire qualcosa perché perché lo sapevo
che avevi fatto ciò che sapevi ma il
secondo ho avuto una persona reale che sapeva
quello che stavano facendo lo progettano sono
come oh uomo è molto meglio che vorrei
visita sempre il tuo sito web e lo farei
vomitare nella mia bocca è come davvero
grazie grazie ok quindi sto correndo a
mille 24 ok così per simulare a
schermo più grande ho ingrandito ok così
non ti preoccupare che il fatto che si
non posso vedere che non è rappresentativo
del mio sito ho zumato per fingere
siamo su un grande schermo
ora se noti qui in alto
ci sono alcuni menu okay e poi
c’è questo binario di destra questo è
dove vendere fuori e non ho come gli annunci e
roba ora se comincio a ridimensionare questo vedi
come stanno le cose, c’è un punto di interruzione a
mille e ventiquattro proprio lì e il mio
volto scompare in tutta la guida destra
scompare ora lo farò
di dimensioni normali ci sono dimensioni normali okay così
questo è il design delle dimensioni normali
come sono i menu arancioni?
schiacciato dove sono andati
beh si sono trasformati in un menu a discesa usando
un tag HTML che nessuno ha mai usato
chiamato opt gruppo uno dei più utili
Tag HTML ma nessuno ha mai lo usa come
trova una persona HTML al lavoro e prova
loro e vedere se sanno come usare opt
gruppo senza cercare ciò che ho fatto
è che ho preso quelli che UL non ha ordinato
elencare era voce di menu voce e menu
titolo e oggetto e poi ho appena preso
quelli che erano quel menu in alto e
trasformato in un gruppo di opzioni, quindi quelli
sono in realtà inanimati. Abal vede questi sono
cliccabile e quelli non lo sono e lo faccio
dinamicamente in questo modo non ho avuto a
riscrivere che tutto il tempo, se cambio la mia
menu fa automaticamente quello che è
bello questo è che se andate e
visita questo su un iPhone o su un Android
telefono o su un Windows Phone sto usando un
controllo nativo sembra un piccolo
cosa ma perché vorresti usare a
le persone di controllo nativo stanno facendo sempre
il proprietario disegna un CSS personalizzato per un menu a discesa
menu bene c’è un perfettamente buono
menu a discesa che funziona già perché
non usare quello che penso davvero quando
fai disegni mobili dovresti
considera il fatto che abbiano ottimizzato
cose del genere quindi vado a trovarmi
è davvero veloce su questo telefono
qui e vedremo questo probabilmente
mi è costato circa quarantacinque dollari da fare
questa demo in questo momento
grazie AT & T grazie e se clicco
il menu a discesa
Prendo il piccolo Apple a destra
lì e sembra che sia su Android
e sembra che non dovrebbe
per apparire come su un Windows Phone che mi piace
che sono un grande fan dei controlli nativi I
avrei potuto fare un pareggio del proprietario che darò
sei un esempio di ciò che un proprietario disegna
il sito sembra che abbiamo preso l’asp.net
sito web che è come il nostro portale per
sviluppatori di asp.net e questo è dove il nostro
forum e cose sono e abbiamo questo
menu in alto e quando lo faccio
davvero piccolo colpisce un breakpoint e
diventa sensibile questo è chiamato
design reattivo o adattivo che vedi
questo qui se clicco su quello noi
prendi questo drop down quando dico
il proprietario pesca divs e roba totalmente personalizzati
lo abbiamo fatto in quel modo e non ho avuto un
sacco di feedback, ma io personalmente non sono
un fan di quel controllo nativo dà
le persone sono molto più amichevoli
in Android le persone si sentono come se ti interessano
su di loro non più che non dovresti
Sto solo dicendo che la query sui media è
davvero molto facile e se conosci CSS
questo è un altro esempio in cui puoi andare
e tira fuori qualcosa di simile in a
giorno questo è davvero uno dei migliori
temi che andranno per tutto
tutti i miei discorsi e specialmente questo
è che queste tecniche sono così semplici
che si potrebbe dire non ci vostro capo che
ci vorrebbe una settimana e tu potresti semplicemente
dimmi che sai che ho davvero bisogno di lavorare
da casa e potresti andare a casa per piacere
una settimana e devi solo scrivere come
quel po ‘ di codice e poi puoi
tornare e tornare a casa ed è stato così difficile
così difficile qui stavo solo dicendo che sono così
avrò una richiesta di media qui per il
schermo e quando le cose sono al massimo
larghezza di mille 24 e puoi impostare
in qualsiasi modo tu voglia usare il CSS
è all’interno di quel blocco che è
fogli di stile a cascata e in questo caso
siamo a cascata in base alle dimensioni, quindi il
la cosa più semplice che tu possa fare
in questo momento si dice display call a none e
applicalo alla tua guida destra e
Basta fare scomparire non sto dicendo
quello è il design ideale e noi
dovrebbe farlo tutti, ma sto solo dicendo
mi piace solo per dimostrare il punto che potresti
mostra al tuo capo come se sparisse
fa e chiamano è bello andare
lo faremo ancora meglio c’è un
sito davvero fantastico per l’ispirazione
questo si chiama media query
è uno di questi dove hanno preso
così sopra il dominio di primo livello di qualcuno
questo caso era la Spagna quindi non è media
le domande calmano la sua media query es perché
questa è la cosa bella da fare come Flickr
nel codice corto per Flickr come FL I
vedi un punto K sono registrati in Corea
qualunque cosa io pensi è un po ‘ strano
media query è un sito Web e questo è
un sito web di ispirazione è letteralmente
solo una lista di siti interessanti che cambiano
in base alle loro dimensioni e questo è un po ‘
il modo standard per un designer di
esprimere a voi ciò che i tuoi media
interrogazione sarà simile hanno questi
punti di rottura desktop tablet stretto e
quindi telefono e alcuni di loro sono davvero
davvero interessante puoi vedere come in
questo esempio abbiamo una vasta categoria
menu cambiano completamente il layout
dei libri da sinistra a destra a
essendo superiore al menu categorie fondo ottenere
schiacciato i libri finiscono in fila e
allora qui le categorie si trasformano in a
discesa su un telefono e ci sono
dozzine e dozzine di davvero fantastici
quelli da qualche parte cambieranno il flusso
da qualche parte cambieranno alcuni menu
l’intero sito cambia interamente
sulle domande dei media qui è dove
in realtà non mostrare una foto di questo
ragazzo amichevole perché sta per esaurirsi
troppa larghezza di banda e si guarda
per un IDE che è davvero buono
supporto per CSS questo è parte del
supporto che abbiamo per CSS in visual
studio in cui un piccolo film non ha suonato
no ha suonato una volta e poi si ferma
è quello che succede e tu fai un
scivolo di fantasia con un film in cui gioca
lo sfondo e non lo fa nemmeno
fare tutto ciò che è semplicemente triste dimenticare
tu PowerPoint fai schifo
Mi farò effettivamente fare il lavoro
do-do-do-do-do così ora sto per dire
scheda dei media che era quello che era quel film
per esprimere a te quello che è fantastico
snippet niente di così potente
sì un PowerPoint ora ce ne sono molti
modelli esistenti davvero fantastici che tu
può applicare ora la volontà progettista hardcore
vai a fare queste cose da soli ma se
stai insistendo per fare qualcosa
te uno dei siti web che ho
raccomandare si chiama get skeleton e
loro hanno un boilerplate mobile che è
per i responsive design ciò che fanno è
hanno impostato questo layout di griglia è come un
960 griglia e prendi semplicemente le tue div e
applicali e poi lo faranno
gestire automaticamente il reattivo
design per il ridimensionamento automatico
le tue cose quindi per siti come i miei simili
il mio podcast in cui in realtà non ho ottenuto
un designer a guardarlo ma io uso solo
scheletro e si ridimensiona automaticamente così
questo è oh questo è un modo semplice per farlo
cose sul cliente che vuoi adattare
con quelli che cambiano le dimensioni dello schermo ora se
eri un business che aveva un prodotto
catalogo avrai problemi
con le tue immagini e le tue immagini
sarà grande e loro otterranno
scaricato ma non stanno ancora andando
a costano ancora la persona a
molta larghezza di banda quindi ad esempio questo
questo screenshot qui è un grande PNG e se
Ridimensiono ad un punto di interruzione ragione su
lì vedi come ho cambiato il
avvolgendo nel CSS così ho abbandonato tutto il
smetti di scrivere e poi man mano che divento più piccolo
guarda come questo squish così funziona
davvero bene ma ho davvero cambiato
la dimensione di quell’immagine è specifica
CSS per ridimensionare che ho anche specifico
CSS per fare il ridimensionamento di YouTube che è
una delle cose che le persone molto
raramente è una piccola attenzione a
trucco particolare che puoi effettivamente applicare CSS
e raggiungere nell’iframe e ridimensionare il
YouTube di persona e ho esempi
di come farlo sul mio blog
ma quale sarebbe stato l’ ideale?
cosa da fare questo è solo un blog nessuno
nessuno legge questo e se fosse un simile
il catalogo IKEA o qualcosa e persone
stavano colpendo questo come milioni e
milioni di volte al giorno e ho
questi grafici giganti che rappresentano a
prodotto che dovrei fare è che dovrei
annusare sul lato server quale sia la dimensione
dello schermo dovrei avere un
database che dice oh è un Nokia
qualunque cosa e ha uno schermo che è questo
grande e dovrei inviare loro specifiche di
una certa dimensione del grafico per le immagini grandi
sarebbe molto importante anche per te
voglio essere sicuro che tu pensi
cose come la retina mostra questa immagine
qui è stato fatto come un display Retina così
In realtà ne ho due versioni
logo e io uso i CSS non solo per guardare
la dimensione dello schermo ma anche il
la densità dei pixel è Bo Wiener che hai tutto
probabilmente fatto prima con un nuovo
iPhone visiti un sito e poi vedi
che la grafica sembra un po ‘Jaggi
perché stanno prendendo una grafica che è
cento su cento e loro sono
facendolo andare a 400 per 400 e sembra
Jaggi puoi effettivamente scoprirlo
CSS e quindi applicare ad alta risoluzione
grafica ad esso che è un’altra cosa
stai pensando a quei piccoli frammenti di
I polacchi diventeranno sempre di più
importante perché possiamo vedere con il
iPhone ha diverse dimensioni dello schermo
ci sono diverse densità di schermo
e ora avremo 7 pollici e
Schermo da 10 pollici e tutto questo
le dimensioni dello schermo di densità devono diventare
qualcosa a cui pensi ma a
qualche punto si raggiunge il limite di cosa
puoi farlo semplicemente riorganizzando i CSS
c’è solo così tanto che puoi fare
design intelligente forse stai facendo aa
applicazione di polling o una registrazione di dati
applicazione e lo vuoi davvero
sembra un app mobile ad un certo punto
il tuo sito web ora vuole diventare un web
applicazione che forse userete
qualcosa come PhoneGap e tu stai andando
provare a creare un’app e inserirla nel
store e vuoi che assomigli
qualcosa di ben si può risolvere il problema sul
server ed è possibile inviare nuovamente personalizzato
viste mobili e jQuery Mobile è un
esempio popolare è l’esempio che
Userò ma anche cose come l’interfaccia utente di Kendo
sono in Sencha, c’è molto di diverso
il punto è se non hai giocato
con fogli di stile mobile o mobile
le strutture non la rendono tale
sembra davvero così
per dire questo perché mi sento male che io
anche bisogno di dirlo, ma è sorprendente
quante persone che stanno facendo qualcosa di
come un catalogo di prodotti per IKEA ma
insistere per scrivere il proprio cellulare
quadro quando non è nemmeno quello
il loro business è che ci sono super-super
persone intelligenti che hanno risolto questi
problemi e sono costantemente alla ricerca di
risolvi questi problemi sì , sì, lo farei
seriamente vi incoraggio a non scrivere
il tuo framework mobile usa qualcuno
Altrimenti non mi interessa se è jQuery
Il cellulare sceglie qualcun altro in particolare
quando si tratta di cose come quelle
formati grafici Mi avevano dato la
esempio un momento fa a proposito di sniffare il
browser e quindi inviare un ridimensionato
grafica che userebbe meno larghezza di banda
presto ci sono molti discorsi
la specifica HTML e cambiandola
HTML o in css3 in modo che tu possa
in qualche modo rilevare e sapere qual è il
la larghezza di banda è e ha un tag di origine bassa
Non sono sicuro che qualcuno qui sia vecchio
abbastanza da ricordare che quello era uno di
i grandi i grandi tag dei primi
Anni ’90 dici fonte immagine qualunque sia e
quindi ricorda questo
è un peccato che in realtà abbiamo smesso di usare
quel tag e questo è ora quando finalmente
ho bisogno di quel tag che la bassa fonte ti darebbe
la versione low res perché è tornata
quando i doni arrivano in una riga a
tempo in modo da inviare come un nero e
bianco sai la versione punteggiata e quella
sarebbe venuto in bassa fonte e poi in seguito
su ti riporti il colore che è
ufficialmente nello spec e nessuno
lo supporta per qualsiasi motivo e ora siamo
cercando di capire come fare le cose
con loro con situazioni di bassa larghezza di banda
è un peccato quindi se lo aggiusti
il server si ottiene la quantità massima di
flessibilità è possibile inviare persone personalizzate
viste che sono specificamente organizzate
per i loro dispositivi purtroppo però
può essere un po ‘ripetitivo
perché se stai facendo le cose in entrambi
Rails o in MVC si potrebbe finire con
più set di visualizzazioni in modo da poter avere
viste del prodotto mobile e viste del prodotto
tablet e visualizzazioni del prodotto per il desktop
anche il rilevamento del dispositivo è difficile se
lo fai in senso generale se lo sei
cercando di colpirti conosci iPhone e
Android quindi puoi ottenere il 90% delle persone
ma se sei seriamente intenzionato a farlo
rilevamento della detenzione del dispositivo di cui hai bisogno
per ottenere una società e acquistare il loro database
una compagnia che mi piace dall’Inghilterra è
chiamato 51 gradi
e vendono un database di dispositivi e loro
avere tutti i dettagli su come e se
è davvero importante e vuoi colpire
a tutti piace questo dispositivo di supporto
mp3 o PNG trasparenti ed esattamente
quanto è ampio lo schermo
piccoli dettagli su quel dispositivo così
prendiamo un prendiamo un sito web
fa schifo e lo faccio succhiare meno non lo faccio nemmeno
sapere se è necessario mi sono dimenticato
va bene e commentalo
perchè sembra spaventoso, quindi è così
un piccolo e stupido sito Web della conferenza lo fa
fare per te ed è una versione desktop
del sito e ho come sai
sfoglia per data sfoglia l’altoparlante e io
puoi cliccare su un oratore e poi vedere a
tabella che mostra le cose che
oratore sta parlando e poi posso
clicca sul tag e poi guarda il
sessioni per tag quindi è una specie di cubo
di dati questo è molto comune in qualsiasi cosa
che si tratti di un catalogo di prodotti o di un
elenco degli altoparlanti posso andare di persona da
categoria per data per stanza e girare questo
cubo in giro ora se dovessi prendere
questo però e lo mise in un cellulare
dispositivo questa è una cosa chiamata il
Elettrico mobile elettrico a piombo
con questi ragazzi sono fantastici e
hanno un simulatore iPhone per PC
che utilizza una versione personalizzata di cromo
per simulare un iPhone e anche
supporta cose come la geolocalizzazione e
roba puoi vedere che questo sito fa schifo
piuttosto male e non c’è quantità di
pizzicando che mi salverà qui questo
fa schifo
Voglio dire, è utilizzabile ma è imbarazzante
giusto così se questa è una pessima esperienza
ma quali sono alcune cose che potremmo
potenzialmente fare con quello bene in questo
caso ho intenzione di utilizzare asp.net MVC e
Ho portato una cosa chiamata jQuery
Mobile
MVC è un pacchetto, usiamo una cosa
chiamato new get è come gemme per dotnet
e portiamo in jQuery Mobile e così via
cade in questo nuovo layout quindi questo layout
quello che ho qui si chiama layout
mobile è come una pagina principale qui
la mia pagina principale per il mio sito desktop e it
porta in jQuery
ecco la stessa identica cosa tranne che
layout dot mobile quindi l’ unica cosa
quello che è cambiato è il nome del file che c’è
nessun file di configurazione o altro e abbiamo
questo è un pacchetto CSS mobile
il fascio di tutti i diversi CSS e
tutti i diversi JavaScript che noi
bisogno di rendere questo aspetto piacevole e anche ottenuto
jQuery Mobile qui e quindi ecco il mio
jQuery e e dov’è il mio oops ora che ho
appena rotto oh quella era una cosa orribile
cosa ho fatto ho appena drogato
qualcosa da un posto all’altro
bene vedremo se funziona così no
disfa quando commetti un errore così grave
oh questo sarà divertente per tutti
per tutti noi oh dolce dolce misericordioso
Signore, cosa è successo, tu pensi che io
ho trascinato i pacchetti in modelli
davvero sì Wow
facciamo solo una pausa per un secondo e
panico, dovremmo stare bene, come farà Scott?
gestire questo fatto tada Wow
ciò implicherebbe che stavo usando la fonte
controllo
che avrebbe richiesto pensiero e
la premura da parte mia non è la mia fonte
il controllo consiste di questi file zip signore
ma io rispetto che tu tu pensi
che altamente di me che avrei avuto
controllo sorgente questo è dove il tutto
la cosa va orribilmente orribilmente male okay
quindi è qualcosa che va bene, papà
andando fuori di testa
si ok, mi muoverò un po ‘
più lento e probabilmente lo sarà
solo un naufragio del treno andare avanti e spingere
fermati sul video che stiamo registrando
ora perché non c’è modo che questo sia
andrà bene per chiunque e poi lui
caduto sopra oh potrei totalmente potrebbe legare
io come me sono diabetico oh no mi sento male I
potrei usare totalmente quello che posso ottenere
succo per favore penso che probabilmente lo farebbe
essere scortese a fare tutto bene
pensi che sia tutto ok, okay, così questo
qui è la stessa cosa tranne che con a
layout leggermente diverso andiamo avanti
e assicurati di provare ciò che esattamente è giusto
è successo qui, aggiungerò del testo
solo per dimostrare il punto
ok ora che non appare qui
va bene
quindi quello che abbiamo fatto è che abbiamo un
layout completamente diverso che sia
accadendo eccetto che il corpo è in essere
reso con le cose esistenti che
ha senso
così solo in virtù del fatto che lo è
mobile il layout è cambiato tranne il
parte centrale viene ancora dal
lo stesso posto in questo caso viene da
indice questo è un po ‘di aggiornamento del testo e
ricaricare
quindi ho un layout mobile ma ho il
stessa vista parziale che sta succedendo
dentro e potrebbe andar bene
essere accettabile ma potrebbe anche esserlo
un po ‘di formaggio se ne ho portato un po’
un po ‘di navigazione come questa oops
non la navigazione porta in qualche navigazione
perché non ho intenzione di spendere troppo
digitando il tempo perché penso che tu creda
io che posso scrivere bene con questo
performance che probabilmente non credi
che posso scrivere ma continuiamo a farlo
supponi per un secondo che io sia stato
coasting on charm per gli ultimi 20 anni
della mia carriera e bene ho tipo di ma
sì e lui può che riesce a malapena a digitare e
Sono così ho abbandonato quel menu e
tipo di esso sembra fondamentalmente schifoso
entrambi i dispositivi in modo da conoscere il successo ma
quello che potevo fare era applicare questi
piccoli dati – annotazioni e questo è un
cosa che è unica per jQuery Mobile I
un po ‘ come hanno alcuni sistemi di layout
Classi CSS che dovresti ricordare così
diresti che la classe div è uguale a qualcosa
mobile e si otterrebbe un cellulare
Esperienza che fanno questi ragazzi sono loro
dite bene che questo avrà il ruolo
di un ListView
quindi questa lista non ordinata ha il ruolo di
essere un ListView e solo in virtù di
questo fatto lo scopriranno e loro
mostrerà qualcosa di diverso ma io
non voglio davvero che sia per il mio
desktop, quindi cosa farò invece
ho intenzione di portarlo via, lo farò
vado qui e ho intenzione di portare in un
visualizzazione mobile personalizzata in questo modo che userò
jQuery Mobile in un posto e non in
l’altro quindi qui sono totalmente il
desktop ok
e poi ho l’indice mobile e quello
indice in alto Il mobile è in realtà un punto indice
qualche stringa magica di cui mostrerò di più
che in un secondo quindi qui ho io sono
totalmente il desktop e qui abbiamo
ha un aspetto davvero decente
uomo
e tu noti come l’ ha ereditato
stile solo in virtù del fatto che esso
aveva quei dati – in effetti posso cambiare
quel tema
sono chiamati temi entrando nel
layout e dice il tuo tema di dati a voi
può andare e scaricare diversi temi e
cambia l’aspetto e la sensazione di adesso
questo caso sembra ancora jQuery
Mobile, ma puoi tema comunque
vuoi che il tuo designer possa creare un
tema jQuery Mobile, se si va al
lancia il sito X su M Rolex com intero
il sito è in realtà jQuery Mobile ma è così
non sembra jQuery Mobile it
assomiglia totalmente al marchio Rolex
quindi sfortunatamente jQuery Mobile ha
diventare così popolare che la gente semplicemente
usa il tema predefinito e poi solo tu
vai sul sito, vai, si
jQuery Mobile
è come i pulsanti predefiniti di Java o simili
nel giorno in cui a Borland piaceva il
piccola casella di controllo verde lì va bene
pulsante e sai che l’hai scritto in
Borland, quindi dovresti metterlo un po ‘
lavorare nel vostro tema e cercare di renderlo
abbinare quindi usa le cose che sono buone
a riguardo ma poi cambia look e
si sentono in modo che corrisponda quello che si sta cercando di
compire così qui solo in virtù del
In effetti è chiamato dot mobile
raccogliendo quella roba ora posso entrare
quella home page e inizia a spostarmi
in giro ma voglio davvero tornare indietro
in visualizzazione desktop perché potrei volere
essere in grado di fare il debug su a
macchina desktop o vedere desktop sul cellulare
quindi ho questo switcher di visualizzazione che posso
clicca su quella vista switcher e ora ho
ho un desktop sul cellulare perché a volte
vuoi essere in grado di farlo, ma qui
Ora sono sul desktop e non ho
modo di tornare giusto così perché è così
bene questo switcher vista è a
visione parziale e questi sono reali comuni
su siti come questo voglio essere sicuro
quello che esiste nel layout principale come
bene così quando sono sul desktop
Ho un modo per tornare indietro così sono
andando a rilasciarlo sul desktop e
torna qui e ora io dico
visualizzazione desktop e potrei cambiare
avanti e indietro e quella vista mobile è
semplicemente super semplice tutto ciò che sta facendo qui è
sta dicendo
se è un dispositivo mobile puoi cambiare
avanti e indietro tra visualizzazione mobile e
imposta solo un piccolo biscotto ma questo è
una linea interessante qui se è un
dispositivo mobile quindi cosa vuol dire
la mia applicazione qui qui sono in desktop
modalità e posso vedere uno switcher vista ma
da qui sul browser desktop non posso
forse voglio fare il debug, quindi sono solo
commentarlo così non mi interessa
se si tratta di un dispositivo mobile o meno io
voglio farlo funzionare per qualsiasi cosa
ora posso fare il debug del mio cellulare
sito usando i miei strumenti Chrome o qualunque cosa
voglio e poi più tardi potrei cambiarlo
avanti e indietro quindi è un po ‘bello così
torniamo alla visualizzazione mobile e poi
andremo a guardare qualcosa come un
elenco degli oratori quindi eccoci di nuovo qui
con un layout mobile tranne che ereditato
quell’altoparlante del desktop visualizza l’elenco di
i diffusori sono piuttosto semplici , andiamo a dare un’occhiata
i relatori non fanno altro che dire
per ogni oratore non è nulla
particolarmente stravagante ma potrei prenderlo
tutti gli altoparlanti e rendi quel mobile come
bene e tutto quello che farò per farlo
infatti, il cellulare è solo aggiungere questa riga di dati
visualizzazione elenco in modo che sia effettivamente identica a
prima e colpisci f5 e ora ho un
sito dall’aspetto attraente quindi a questo punto
il tuo capo sta iniziando a diventare
sospettoso che tu stia spendendo
troppo tempo lavorando da casa e
stai facendo tutte le cose facili così lui è
ti darò qualcosa davvero
complicato e potrebbe dire che è così
ottimo lavoro con il sito mobile ma
Voglio davvero capacità di ricerca di tipo “avanti”
sai così posso iniziare a scrivere e avere
filtra il sito e tutto il resto
roba questo è dove dici wow oh sì
Devo probabilmente essere architetto
un po ‘di Java Jason Internet XML
devi solo costringerlo a farlo
confuso tutto bene e poi vai dentro
e tu vai così ma ma quando lo fai
che devi partire per come tre
giorni e non lasciarlo mai vedere il
codice sorgente e se il tuo capo è come il mio
capo e lui legge l’assegno in posta allora
sei fregato questo ciò che funziona solo
se è come un vestito lo sai o se lei
lei non codifica quindi è tutto e
questo è tutto il lato client che lo ottieni
ottieni questo filtro di dati gratuito
che è molto carino quindi a quel punto
quindi potrei cliccare su qualcosa
come questo ci sono le mie sessioni e io
potrebbe passare attraverso ognuno di questi e
aggiornali e in tutti questi casi lo sono
aggiungendo solo queste piccole viste di lista e
questa è una specie di esempio contrito ma
funziona davvero bene, ecco a
esempio un po ‘ più complicato dove
diamo un’occhiata a date quindi se ho di nuovo fuori
qui e torneremo a parlare
Ho dei buoni elenchi di tag che sono presi
query Mobile è davvero buono per poco
piccoli cubi di dati come questo e poi se
colpiamo la data giusta e quel tipo di sguardi
schifoso, potrei solo fare una lista di
date ma sarebbe più bello mettere un
un po ‘ più di pensiero e uso
alcune delle caratteristiche del
quadro e ogni struttura è
diverso ma una delle cose che io
come su jQuery Mobile è questa lista
divisore quindi tutto ciò che ho fatto qui è detto
è un elenco di dati di ListView per ogni data
e poi ogni volta che vedo cambiare il giorno
Inserirò un divisore di lista semplicemente inserendo un
divisore e in questo modo non sembra così
così sciatto così invece di come questo
sembra così e poi puoi farlo di nuovo
sperimentare con i tuoi temi andiamo
torna a un tema e vedi se ce n’è uno
che funziona per te e poi puoi
di nuovo puoi andare a scaricare temi
eccoti qua, è bello
tema
quindi ora posso spostarmi e vedere che ho
arrivato qui e questo è un esempio in cui a
tavolo aveva senso sul desktop non lo sono
a Non sono una persona di tipo CSS ma se lo è
un tavolo dovresti probabilmente permetterti
per utilizzare il tag table, perché a volte
questo i ragazzi del designer CSS sono come hey
l’uomo si sa come utilizzare un div parlano
così i ragazzi CSS non usano il
tavolo ogni volta che usi un tavolo tu
uccide un gattino e sono come me
dati tabulari sì amico sono i tavoli
le cattive tabelle sono utili
sul desktop, ma va bene, è bello
verremo con un’altra soluzione allora
quindi qui abbiamo un tavolo di sessioni
qui quello che possiamo fare è che possiamo avere
dati di stile tabulare utilizzando alcune informazioni di base
tag semantici e questo è ciò che è bello
su ottimi siti mobili mobili
le strutture piuttosto sono quell’avviso se
non c’è niente di speciale qui è solo Li
un’ancora h3p e roba forte senza fantasia
succedendo HTML in realtà si è secondario esso
fornisce solo la struttura di base che cosa è
bello questo è un paio di cose che siamo
usando i tag semantici come h3 strong
significa qualcosa ma anche notare questo
href sta avvolgendo l’ intera cosa così
che tutto sta per diventare un
ancora e se torniamo qui
troviamo un altro più interessante
slot con più cose in corso che è
il pranzo non è interessante , non lo è
interessante che ci sei andato così ho preso
quel tavolo e davvero cambiato è
non più un tavolo è una lista e
abbiamo la h3 è il titolo del
sessione e poi il forte è il
speaker e possiamo muoverci un po ‘
un po ‘più pulito e ogni volta che aggiungi un H an
href ottieni questo movimento familiare
avanti la metafora, così abbiamo fatto finora
la data in cui abbiamo un oratore e poi sembra
schifoso qui
andiamo avanti e passeremo
anche quella è la sessione principale
e nota come non sono nemmeno costretto a farlo
ricompilare per fare questo genere di cose
perché sto effettivamente usando lo stesso
controller di back-end che volevo fare
sicuro che le informazioni che sono state inviate
alla vista che viewmodel è stato condiviso
tra i desktop ora in alcuni casi
quando non crei siti per dispositivi mobili
tutto si adatterà a una pagina
così e potrebbe essere necessario avere un
controller back-end personalizzato che sta andando
in particolare per suddividere le cose
situazioni in cui hai come un mago
o sceglierai qualche data o riempirai
in grande formato ma per la maggior parte
per siti di base e per siti di inserimento dati
come questo o siti di visita del cubo di dati
puoi farlo con una logica di back-end
e quindi solo viste diverse in questo modo
caso non ho solo venire con una pagina
quello usa il modello esistente ma io ho
aggiunto collegamenti per spostarsi in modo da poter mantenere
andando avanti posso continuare a passare
tag e io posso continuare a passare
altoparlanti quindi ho messo insieme un cellulare
sito con una quantità minima di sforzo ma
questo non è in linea sebbene non potrei inserire
questo in PhoneGap o mettilo nel
negozio perché richiede di sapere a
connessione a Internet che potrei
non necessariamente voglio soprattutto un mio
FATA se sono a una conferenza come questa
dove non ho internet tutto il tempo
quindi vediamo che possiamo fare i buchi
il tutto di nuovo, tranne su un singolo
pagina quindi quello che faremo qui è
piuttosto che un sacco di punti di vista come
quello e molta navigazione stiamo andando
usare knockout knockout è questo tipo di
bella modello client vista ViewModel dimensionato
legare il raccoglitore del sito client in modo che l’indice
la pagina contiene effettivamente tutte le altre visualizzazioni
su una pagina quindi anziché navigare
dalla vista per visualizzare ogni vista esiste su
la stessa pagina nello stesso momento ho
preso lista per data e lista per speaker
e tutte queste cose e sto inserendo
loro ci e poi basta nasconderli così
sono sempre sulla pagina ma non puoi
vederli, la convenzione che sto usando è un
sottolineatura di fronte a cose che sono
parziali quindi c’è quello che abbiamo visto
prima di questo
sono tutti gli altoparlanti tranne anziché a
usando il codice lato server che sta usando
codice lato client con knockout quindi dati –
il bind è knockout e dati – il ruolo è
jQuery, quindi stiamo dicendo che lo faremo
legare a ciascun oratore e ricordarlo
abbiamo questo cubo di dati abbiamo una lista
di sessioni abbiamo altoparlanti e tag
e date e vogliamo essere in grado di gentile
di interrogarci su questo set di dati
come otteniamo quel set di dati sul
cliente e poi come lo spostiamo
bene il set di dati e il controller ha
cambiato così ora invece di fare tutto
quelle domande e tutto ciò che indossa questo
e indossalo sul server, siamo solo
prendendo tutto il set di dati e lo siamo
girandolo come Jason ho parlato un po ‘
un po ‘su questo nella nota chiave se la tua
set di dati non così grandi è solo un
un paio di migliaia di dischi inviano tutto
mandalo dappertutto perché diamine non è così
che sta per essere inviato tutta la strada sopra
lì e poi posso fare cose come per
ciascun diffusore dove vincolante dei dati è
che si verificano in JavaScript sul client
lato usando knockout ok ma il migliore
parte questo è ciò che applichiamo solo quelli
vincoli accadono tutti in una volta
fai il get on line 14 quando andiamo a dire
ottenere tutti quei dati, ma cosa succede se sei
offline cosa succede se sei offline com’è
funzionerà
bene html5 ti consente di avere una cache
manifest il manifest della cache è diverso
dalla cache HTTP che sei
avere familiarità con questo è letteralmente un manifest
una polizza di carico una lista di tutti i
cose che ti piacerebbe davvero
il browser mantenuto locale quindi ecco una lista
di tutte quelle cose che vogliamo locali
incluso sulla linea 23 la loro casa / tutto
data lo stesso JSON quindi se siamo offline
userà la cache di Jason, okay
manifest viene scaricato in cui funziona
Chrome e funziona credo che funzioni
nell’iPhone quindi la navigazione
viene collegato come eventi click e tutto
quello che fa è cambiare la vista sul
modello e vedrai gli hash
si verificano nel browser quindi ecco l’esatto
stessa cosa e useremo
e guarda questo URL qui vedi come siamo
spostandoci non abbiamo mai lasciato
quella homepage abbiamo scaricato solo quella
pagina abbiamo scaricato il set di dati e
possiamo muoverci intorno a quel cubo e poi
Potrei tirare il cavo e continuare a muovermi
in giro perché sto usando la cache html5
manifest, quindi è davvero fantastico
tecnica che si potrebbe usare per mettere
insieme un’applicazione di dati che è
mobile e anche offline anche tu puoi ottenere
query è possibile ottenere temi come ho parlato
su in jQuery Mobile che non sembrano niente
affatto come jQuery Mobile questo è un
davvero strano questo in realtà è un
Tema Windows Phone 7 per jQuery Mobile
quindi quello che potresti potenzialmente fare è se
hai un’applicazione o forse
applicazioni e loro sul mercato
che sono per più dispositivi che hai
un’app Android hai un Windows Phone
app hai un’app per iPhone ma parte di
quella domanda è online il circa
pagina della pagina di feedback piuttosto che
quella sensazione di aver lasciato il telefono
e andato da qualche altra parte che potrebbe sembrare
come il telefono che sono su così te
potrebbe scrivere una pagina jQuery Mobile
farebbe il genere di cose che volevi
che si tratti di sondaggi o di inserimento di dati o
qualunque cosa e poi se hanno un Windows
Telefonate nel tema ed è tutto
CSS e sembra il telefono che
sono così piuttosto che simili
jQuery Mobile sembra un iPhone o
un telefono Android o Windows Phone e
rende la tua applicazione più asciutta
non ti stai ripetendo perché
stai solo scambiando temi basati su
il tipo di telefono che hai che è
piuttosto dolce quindi ovviamente l’approccio
che si sceglie è tutto dipende dalla
tipo di app che stai costruendo e che sono
lì qualsiasi web forma le persone nella stanza
non va bene , non voglio dimostrarlo
demo c’è un ragazzo che mi chiami più tardi
amico, quindi molte persone stanno dicendo bene
Non voglio essere in grado di farlo voglio
costruisci tutte le stesse cose tranne me
bisogno di essere in grado di farlo sul modulo web
in modo che tu possa fare forme mobili e web –
questo si chiama URL amichevoli di asp.net e
è su NuGet adesso
Ti mostrerò molto molto brevemente
com’è che sia così qui la tua gente
sono abituati a vedere dot aspx nell’URL
e se preferirebbero non vederlo così
diremo semplicemente slash foo e così via
lo preleva automaticamente se lo hai
un cibo fuori aspx diventa solo foo se
hai un foo o in un bar diventa
foo bar qualunque cosa in questo caso, qui posso
vai da qualche parte come questa barra di cibo
taglia 34 e questo è in realtà il cibo è
pagina px e quindi posso semplicemente tirare il
URL amichevole segmenta così i moduli web
gli sviluppatori possono fare questo genere di cose e
quindi posso aggiungere un commutatore di vista mobile così
non solo ottengo URL amichevoli ma da
in virtù di ciò posso passare a
mobile l’URL è lo stesso ma ora lo sono
usando una vista mobile e la usa tutta
stessa convenzione foo e food op mobile
ora ho usato questo dot mobile come un
esempio un certo numero di volte ma è
davvero importante sottolineare questo
mobile non significa niente è solo
qualche segno posso andare qui dentro e
cambiare la modalità di visualizzazione qui potrei dire
Voglio una nuova modalità di visualizzazione wp7 e voglio
usato ogni volta che lo user agent ha
Windows Phone quindi se volessi un iPhone
cosa specifica vorrei dire oops I
sarebbe solo dire fare iPhone iPhone e poi
Vorrei andare e ho indicizzato telefono e
layout punto iPhone quindi cosa ti prende
pensando all’idea di questi display
modalità che nemmeno devono essere
specifico per mobile
potresti avere oro argento e platino
potresti avere un tablet che non deve
essere mobile potrebbe essere basato sull’utente
perché la condizione di contesto in questo
caso, sto solo dicendo che user agent potrei
guarda i biscotti potrei guardare la lingua
Potrei cambiare in qualsiasi modo voglia
se facessi roba in arabo, potrei
avere il punto indice da destra a sinistra punto CS HTML
e utilizzare la modalità di visualizzazione per passare in
anche io potrei avere due consuetudini
cose per ciechi se rilevo un
screen reader non è specifico per dispositivi mobili
ma è tutto sul lato server
quindi questi sono alcuni dei pensieri che
abbiamo ora in giro per cellulari e se
vai al mio blog e fai clic sui post
per categoria ho un intero cellulare
sezione in cui parlo di questa roba
esempi di come prendere i siti esistenti
spostali e grazie mille
per il tuo tempo sulla tua attenzione
tu
Please follow and like us: