O poder do seu navegador

Palestra ministrada na Semana da Computação da UNESP de Rio Claro. Nesta palestra visei mostrar como as novas APIs podem ajudar a enriquecer a experiência do usuário.

Transcript

1. O P O D E R D O S E U N A V E G A D O R
2. A n d r é S o b r a l @ a n d r e q s o b r a l g i t h u b . c o m/ a n d r e s o b r a l a n d r e q s o b r a l @ g ma i l . c o m
3. 1 9 8 9We b 1 9 9 4C S S 1 9 9 5J S
4. D e s e n v o l v i me n t o
5. F u t u r o
8. R e s p o n s i v e We b D e s i g n C a n v a s We b G L S V G E t c
9. U m n a v e g a d o r mo d e r n o é c a p a z d e c o i s a s q u e t a l v e z v o c ê n ã o s a i b a
10. P a d r õ e s
11. D E MO S
12. w i n d o w . n a v i g a t o r
13. n a v i g a t o r . g e o l o c a t i o n . g e t C u r r e n t P o s i t i o n ( f u n c t i o n ( p o s i t i o n ) { / / p o s i t i o n . c o o r d s . l a t i t u d e / / p o s i t i o n . c o o r d s . l o n g i t u d e } ) ; G e o c o l a t i o n A P I
15. i f ( n a v i g a t o r . o n L i n e ) { / / T e m c o n e x ã o } e l s e { / / N ã o h á c o n e x ã o } O n l i n e A P I
17. h i s t o r y . p u s h S t a t e ( O b j , T i t l e , U R L ) ; H i s t o r y A P I
19. N o t i f i c a t i o n . r e q u e s t P e r m i s s i o n ( f u n c t i o n ( p e r m i s s i o n ) { i f ( p e r m i s s i o n = = = ' g r a n t e d ' ) { v a r n o t i f i c a t i o n = n e w N o t i f i c a t i o n ( ' S t r i n g ' ) ; } } ) ; } ) ; N o t i f i c a t i o n A P I
21. d o c u m e n t . a d d E v e n t L i s t e n e r ( ' v i s i b i l i t y c h a n g e ' , f u n c t i o n ( ) { i f ( d o c u m e n t [ ' h i d d e n ' ] ) { v i d e o . p a u s e ( ) ; } e l s e { v i d e o . p l a y ( ) ; } } ) ; } ) ; P a g e V i s i b i l i t y A P I
23. e l e m e n t . r e q u e s t F u l l s c r e e n ( ) ; F u l l S c r e e n A P I
25. n a v i g a t o r . g e t U s e r M e d i a ( { v i d e o : t r u e , a u d i o : t r u e } , s u c c e s s , e r r o r e r r o r ) ; G e t U s e r Me d i a A P I
27. v a r r e c o g n i t i o n = n e w S p e e c h R e c o g n i t i o n ( ) ; r e c o g n i t i o n . o n r e s u l t = f u n c t i o n ( ) { / / P r o c e s s a r o á u d i o g r a v a d o } ; r e c o g n i t i o n . s t a r t ( ) ; We b S p e e c h A P I
29. We b c o mp o n e n t s
30. H T ML I mp o r t s + C u s t o m E l e me n t s + T e mp l a t e s + S h a d o w D O M S h a d o w D O M
32. D I V S o u p
33. S a b e r ma i s we b c o mp o n e n t s . o r g c u s t o me l e me n t s . i o p o l y me r - p r o j e c t . o r g x - t a g s . o r g
34. O u t r a s A P I We b A u d i o A P I G a me p a d A P I We b R T C We b S o c k e t
35. Mo b i l e B a t t e r y S t a t u s We b N o t i f i c a t i o n s A P I P r o x i mi t y A P I V i b r a t i o n A P I D e v i c e O r i e n t a t i o n A P I
36. i f ( ! ( ” N o t i f i c a t i o n ” i n w i n d o w ) ) { c o n s o l e . l o g ( ” E s t e n a v e g a d o r n ã o s u p o r t a e s t a f e a t u r e ” ) ; } D e t e c ç ã o d e F e a t u r e
38. n a v i g a t o r . g e t M e d i a = ( n a v i g a t o r . g e t U s e r M e d i a | | n a v i g a t o r . w e b k i t G e t U s e r M e d i a | | n a v i g a t o r . m o z G e t U s e r M e d i a | | n a v i g a t o r . m s G e t U s e r M e d i a ) ; E v i t a n d o P r e f i x o s
39. O n d e a c h a r ma t e r i a l p a r a e s t u d o
40. S p e c s W3 C
41. We b P l a t f o r m we b p l a t f o r m. o r g
42. S u p o r t e a o n a v e g a d o r e s c a n i u s e . c o m
43. I n t e r n e t E x p l o r e r s t a t u s . mo d e r n . i e
44. D o c u me n t a ç ã o d e v e l o p e r . mo z i l l a . o r g
48. N o v i d a d e s h t ml 5 we e k l y . c o m j a v a s c r i p t we e k l y . c o m h t ml 5 r o c k s . c o m
50. F e r r a me n t a s
51. O b r i g a d o ! s p e a k e r d e c k . c o m/ a n d r e s o b r a l g i t h u b . c o m/ a n d r e s o b r a l / o p o d e r d o s e u b r o ws e r