graphical web

Adobe & HTML

the graphical web

Vincent Hardy - Web Platform - Adobe

Sept 11th, 2012

The Quest for The Graphical Web

The Quest for
The Graphical Web


Click to Start

Our Story Begins

This is Div. He is neat, but I think we can all agree, things can get better.
Sorry. Just a little nostalgic. Where to from here?
You got it. Though I don’t see how it can get better than this.

Hey Good Lookin'

With the introduction of CSS we are able to style web content and easily make it more beautiful and engaging.
Woah. Hubba Hubba!
Hello there, Div. Welcome to 1996.
I’m Cascading Style Sheet. I can add more style to your bland little world. I’m prettier and more approachable than what you’re used to interfacing with.
CSS, you’ve really made me a better person. Don’t take this the wrong way, but … It’s time I look for more interesting shapes. It’s not you, it’s me.
Oh. You’re looking for SVG. Good luck with that.

Size Matters

With Scalable Vector Graphics we can create complex vector shapes that scale infinitely and animate.
Uh, OK – you count as an interesting shape.
I’m not only an interesting shape, I’m EVERY interesting shape. Check it!
Wow! You’re Vector Graphics!
SCALABLE Vector Graphics. Wanna see?
Woah! Awesome!
This has been great, SVG. I was thinking it’s time to look for something with, you know, a little more dimension.
THREE dimensions? Well, why didn’t you say so? Let me help you get a little perspective on things.

A New Perspective

With 3D Transforms we can make use of all 3 dimensions and add perspective for new and interesting effects.
Aw, man ... I’ve been mooned!
Welcome to the Z axis, Div. I’m 3D Transform, and things just got deep. Like, have you wondered if we’re all just a bunch of ones and zeroes, flicking switches on and off for eternity?
Wow. What does it all mean?
It means we can view things from every angle.
Hey, I can see my house from here!
I’m starting to dream big now, 3D. I want even more out of my graphics. I want to control them on a granular level…

A Blank Canvas

With 2D Canvas we have access to a drawing API that allows pixel level control over your drawing surface.
If you want granular, you want pixels.
Whoa, that’s freaky.
I’m 2D Canvas, and I can do more than create shapes and colors. I let you manipulate the particles in this universe.
How realistic can we get here? Are we talking mind-blowing effects? ‘Cause I’m thinking like Spielberg here…
For that, you need to go further into space.
I won’t lie; this is a little weird.

A Whole New Level

With WebGL we can create real-time 3D geometry and effects on the web. It provides a context to display the kind of graphics previously only available in native applications and console games.
WebGL I am. Experience real-time cinematic effects and 3D geometry you will.
Ready I am, master. I’d like to try to bring these effects to the real world.
Try? There is no try. Just back there get and give it a whirl you should.

A Horse Of A Different Color

With blend modes we can manipulate color like never before. This now allows content to interact in unique ways with the content underneath creating the potential for dynamic designs that could have only previously been done with static images.
Ahh! Am I dead?
Don’t be afraid, Div. I’m Blend Modes. I’m made up of unique color interactions and visuals. Simple opacity can't do this! Yeah, take that, simple opacity!
OK, this is progress. But what about distortion? What about all the cool effects I can picture in my head?
Oh, that princess is in another castle. Follow me, Div.

Set Your Imagination Free

With CSS Custom Filters we allow more complex transitions and effects that were never possible before. Vertex shaders allow you to distort elements for post-production quality transitions. Custom fragment shaders allow you to manipulate the colors of elements for effects like complex shading, reflections and more.
Welcome Div.
What is this place Princess Shader
This is where I bring it all together. I can do vertex distortion and per pixel color manipulation.
Combined with all our friends this is where we explore the limits of the Graphical Web
This is what I'm talking about
Let's get creative!
Missing Feature