Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Prezi@DisruptiveCode

No description
by

Janos Hardi

on 23 January 2011

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Prezi@DisruptiveCode

Native language for web developers: JavaScript, HTML and CSS
Ridiculous deployment: Easy to distribute and update
Stroke free: no AppStore processes, quirks
Portable: all Mobile Markets available
The Same App Model: Desktop and Handheld Devices A long time user requested feature

Up to eleven: A good occasion to experiment with HTML5 Zooming Interface <Embedded> Native Gestures (if any) don't send dimension information and fire handlers late. Why not X instead of CSS3? JavaScript? Canvas? SVG? Pro:
JavaScript API to draw in 2D or 3D
Damn fast even on handhelds Con:
No font rendering on every browser Pro:
Has everything we need: text, animation, graphics
Consistent API in XML style Con:
No inline SVG on every browser
SVG animations are not accelerated
CSS3 transform of SVG elements not supported Pro:
Callbacks
Easing functions Con:
Adds more resource consumption Images With <canvas> (why?) Arrows, Frames, Freehand With <canvas> Experiences of migrating a Flash based Prezi Player to HTML5 What is Prezi? Prezi is an online editor built for small teams to collaborate in meetings and for presenters to impress their audiences in concert halls or class rooms - even remotely. (not a definition, just a hint) Simple tools to tell complex stories Frames for grouping ideas Freehand shapes to highlight
and play around Arrows to draw conclusions Videos to embed girls with tattoos Why HTML5 and not Native Apps? Use cases: desktop browsers, mobile devices, tablets Pro Con Performance: The browser environment is relatively limited
Compatibility: Platform and Browser Divergence http://bit.ly/anxtjs More on HTML5 apps by Peter-Paul Koch Let's do this HTML5 thing! <Content> Text With <p>
Custom fonts with @font-face and SVG fonts (why?) Video With <video>
Different <source> for different platforms/browsers 3rd Party Video Services (YouTube) The experimental HTML5 YouTube player is way too unstable
With <object> - on desktop browsers it degrades gracefully to flash embed There is more ... <Embedded> <Content> Canvas usually has less limitations in terms of memory limit. SVG fonts with @font-face embed is a widely supported format. Animations Gestures
+
Animations Gestures When touch screens and events available, implement Gestures in JavaScript. Creating a zooming, rotating interface Flash Canvas CSS Transforms obj.x
obj.y
obj.scaleX, obj.scaleY
obj.rotation DisplayObject attributes var ctx = canvas.getContext("2d")
ctx.save()
ctx.translate(x,y)
ctx.rotate(rad)
ctx.scale(scaleX, scaleY)
/* drawing object */
ctx.restore() obj.style.transform = 'translate(20px, 20px) rotate(10deg) scale(1.5)';
obj.style.transform = 'matrix(1.448, 0.388, -0.388, 1.448, 20, 20)'; Animation translate rotate scale The camera transition: property duration easing-function hw accelerated Rendering new transform value Rendering slight delay,
can be disabled
with translateZ Nested block elements, transition enabled Objects have
x, y, size, rotation, scale Rely on touch events. Thanks for your time! default
transform-origin: 50% 50%; Questions? Contact us Ádám Bódi - adam.bodi@prezi.com János Hardi - janos.hardi@prezi.com http://prezi.com/9syzntcug6fe/prezidisruptivecode/ Follow this presentation example transition: transform 1.2s ease-out change of transform starts animation,
value is interpolated using easing function many transitions can play at the same time can be stopped by setting the current value back Animating texture ontransitionend ontransitionstart during transitions we can retrieve the current transform
but only in matrix() format + (quirks: set px for ff, fixed point for webkit) Scale transitions:
some large object with
small scale container with
transform transition Texture is rendered at
container scale 1.0 After zoom-in texture not updated js events: ontransitionstart, ontransitionend zoom, pan, rotate
path = predefined camera positions
Full transcript