November 26th, 2012 HTML5 Meetup's Create the Web Tour

On Monday, November 26, 2012, OLC attended the HTML5 Meetup's Create the Web Tour featuring Christophe Coenrats and Andrew Trice of Adobe and hosted by Kaltura. They gave an extensive talk on the new features of HTML 5 and its capabilities.

Adobe is working on new W3C specs to help designers create new content on the web and across devices. The W3C stands for World Wide Web Consortium and they enforce compatibility among adopting standards defined by the W3C. The group tries to have a standardized language for websites on the internet.

Andrew Trice gave the first presentation on the new features of HTML 5. "I'm here to talk about web standards and push the HTML experience forward," Trice said. He added that everything that's been covered is available on

"Everything around HTML 5 is changing," Trice said. Flash can now be done by HTML technology, whereas "five or ten years ago, we were focused on consuming content on desktop. Remember Netscape and Internet Explorer — it's a lot more complicated now," he said. "Now that we're targeting more devices like browsers and platforms and devices, it's brought more complications and a challenge."

Adobe works with W3C and W3G and with WebKit, which powers iOS, Android, Firefox and Chrome. This allows them to power technology forward by trying to evolve the technology on all fronts. Adobe has three areas of focus right now: 1) CSS Regions and CSS Exclusions, which provide magazine-style advanced layout. "Adobe is working with Apple and Microsoft to push standards forward to implement it in WebKit," Trice said. "We're doing a lot of work to get into as many browsers as possible." 2) CSS Custome Filters, which is mostly cinematic-type work. 3) CSS Blending and CSS Compositing, which are advanced graphical filters.

Trice gave demos on all three areas. He started with CSS Regions and CSS Exclusions. "To try to create multilayers," he said, "you need a lot of DIV tags, which are a headache." He highlighted text on a webpage and explained that using HTML 5, this wasn't necessary anymore. "Everything gets resized," he said. "It gets wrapped into other columns and flows — all applied by CSS. This brings a richer typographic layout." He also added that old browsers would just ignore the new HTML to accommodate the code to something it understands.

He demoed cinematic effects — CSS Filters and explained that it used only HTML content and applied filters. The CSS Filter Lab interacts with filters and manipulates cinematic effects to demo visuals. Again, only CSS is used. Trice added that this was all mobile friendly. He also showcased CSS Custom Filters — "CSS shaders use shader language that comes from video processing and you can write shaders and have it applied to HTML content with CSS," he said.

Trice revealed, "some basic shaders are available on iOS 6 today." It can even embed YouTube videos and have filters applied to get new visual experiences. He briefly went over the popular Adobe tools — PhotoShop, Illustrator, Fireworks and Dreamweaver, but he said, "Not everyone uses them for what they do. Web professionals need better tools." This led to Adobe creating the Adobe Edge Tools and Services, which are optimized for web and mobile optimized services. The service is focused on specific tasks and it is productive without hiding code.

He also explained Adobe Edge Animate, which runs entirely in HTML and CSS. There are eight programs within the service: Adobe Edge Inspect, PhoneGap, PhoneGap Build, Brackets, Edge Core, TypeKit, Web Fonts and Edge ReFlow. This is all available on Adobe Creative Cloud, which is a subscription that allows users to use all Adobe tools on all apps.

Trice further explained TypeKit as an alternative source of fonts for developers as "fonts on the web can lead to licensing issues. This is a service that allows users to access fonts without the worry of legal issues," he said. There are over 4000 licensed fonts, which are all 100% standards based, supports all modern browsers and devices, fully indexable (optimized for SEO) on TypeKit. Adobe Web Fonts are working with Google Fonts — there are over 500 fonts to work with on open source, open URLs for each family and it is all curated by Adobe. The Web Fonts are served by TypeKit.

Adobe Edge Animate is a timeline-based animation for HTML. "It is all purely in HTML,' Trice said. "It can all replicate JavaScript; all elements can also be inspected. Everything is DOM-based." It works seamlessly on all browsers and devices, creates accessible content, keyframe-based intuitive tooling, and helps bridge gap between creativity and code.

Christophe Coenrats presented, but due to time, he decided to briefly expand what Andrew Trice had talked about prior.

On Edge ReFlow, Coenrats demoed resizing browser windows and showcased the responsive stream and the readability of the content within the website. "The problem today," he said, "is that websites aren't responsive because it is hard to do. Adobe took this opportunity to help web developers create responsive websites."

He also demoed the cloud features available through Adobe Edge Animate. "It all follows you on every device," Coenrats said. "The devices can all render the browsers to fit screen size too."

On PhoneGap, he explained that it is essentially a wrapper — packages mobile app for platforms and gives consistent JavaScript apps. "We have something optimized for mobile apps," he said. "We are very close."