Let it run then if your browser supports it, check the sweet CSS effects.  Nice eh?  BTW, I tried in IE and it did not work, so I recommend using FireFox or Chrome or Safari.

Here is the direct link.

http://www.youtube.com/results?search_query=do+the+harlem+shake&oq=do+the+harlem+shake&gs_l=youtube.3..0i3l3j0l2j0i5.887.4690.0.8081.19.17.0.2.2.0.153.1432.12j5.17.0…0.0…1ac.1.5K79XOKPVww

Enjoy!

Over the past few years I have been engaging a lot more with various entities in Denmark. One such group that has recently caught my attention is the Danish library system. Now I remember coming across this report years back about the city of Aarhus Main Library’s Transformation Lab.

Recently Dave Arendash and I were invited to present at SimLibrary, an event highlighting mixed reality technologies for libraries, held in Odense, Denmark.

From the SimLibrary Website (translated from Danish): SimLibrary is a cooperation between Odense Central Library, Aalborg, and Herning libraries with Euman A / S, and Educational Media Centers in the project cities. The SimLibrary project aims to develop libraries to a prominent place in the digital experience community with young people as drivers in a user-driven innovation process. To create virtual and physical environments that encourage young people to form relationships.

The goal is to develop new delivery of physical and virtual library spaces by incorporating the Playingmondo 3D platform and create user-driven innovation processes in SimLibrary, with young people ideas as the basis for new library services. The project is based on user-driven innovation by young people actively involved in building the 3D world, SimLibrary and helps to create the library space, in a combination of physical presence and online communications.

3D Mixed Reality Gaming

Work on the Playingmondo platform can be used for virtual playgrounds and play spaces where mobile technology, GPS and broadband used to support physical play and games as well as use and highlight local area spaces. 3D technology makes it possible to mix reality and the virtual world. The technology opens up entirely new possibilities for e-learning and provides unique opportunities to motivate movement in nature, urban or indoor.

3D gaming technology makes it possible to test concepts before they are created, making it a great interactive tool for user involvement in construction or upgrading of existing structures and facilities. 3D technology for mobile can make the virtual experience in a natural setting more realistic and lifelike. Mixed reality gaming is tool and teaching materials that support the need for delivery of “text” to the context and coherence in the movement around the many ude-/inderum (spaces / contexts).

Mixed reality gaming is also learning for children who use the children’s reality – computer games and social media – as a tool and medium for learning. When mixed reality gaming based on game or competition in a good way and in the children’s universe, the students are constantly measured and weighed as a natural part of learning.

Development of a 3D model of a library can provide a basis for such the following applications:

 Ability to learn library better to know in advance. Users of the library can use the 3D model on a web page to orient themselves and navigate the library before a visit. Users can play the library’s existing Playingmondo games and themed walks by in 3D on the Web to move around with the keyboard and mouse and activate the items and effects. Play multiplayer games on mobile and web users will be able to play multiplayer Playingmondo game.

In 3D on the Web, some players move around with the keyboard and mouse and activate the items and effects, while opponents or team-mate moving physically around the library with mobile phone and activate game elements.
Interact with the library in new ways can imagine that library users can interact with library staff, visitors, and facilities at thelibrary in new ways. Examples may be that virtual home can visit the library via web-based 3D version, go to a shelf, take a book out and look at it and possibly, the book. It can also contribute to social interactions between library users who are physically present (with cell phone) and those who sit at home or at school in front of the computer.

In our presentation, we outlined a variety of new technologies that are making their way to the mainstream, and our ideas of how they can be used to create a new type of library experience. Dave also showed an augmented reality example he created where a video about Deepak Chopra’s new book played on the cover of the book once the camera saw it. Our presentation was a big hit, and I am very thankful I got the opportunity to participate.

The video I made on slide 11:

More information on the SimLibrary workshop can be found here. I recommend visiting the site with Google’s Chrome web browser as it will translate the site from Danish to your preferred language.

Keep in mind this is a complete rewrite of libraries so that means you will have to rewrite your html5 page from the ground up.  But if you need performance, it might be worth it. Right now its focused on 3D, but I think this can be useful for any non document display.

Check out the video below.  This is going to be a coding effort we will want to watch in 2013.

//www.youtube.com/watch?v=fzBC20B5dsk

Also check out this snippet from the Sept newsletter.

I did look through the code and see a few lines like the following to make me think some of this was created with a conversion tool, perhaps from a vector graphic, but not sure.  Anyone?

filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=’#FFFEFEFE’, endColorstr=’#FFFFFFFF’);
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(17%, #dbd9da), color-stop(50%, #0b0d0c), color-stop(51%, #0b0e0c), color-stop(59%, #b0b1b5), color-stop(71%, #aeadbd), color-stop(84%, #cfcfcd), color-stop(100%, #ffffff));

Here is the link to codepin.io, you can grab the code there.

Enjoy!

http://www.flickr.com/photos/mr_o/sets/72157630681836960/

“CASCADE SF’s first “Innovators of the Web Conference”

Yes, this fine Sat I’m at the Adobe building in SF watching presentations on the intersection of design and programming.  The focus of the talks today are line by line examples of how to break through the limits of design for the web with new cutting edge techniques in CSS and graphic asset creations in photoShop and illustrator.  Talks dive as deep as designs and creating icons that can scale but up and down without breaking.

So the most important part of this post, links to the presentations.

FYI, finding the slides is not all that easy, the link is in pretty small font.  You can see in the screenshot provided.

From the CASCADE site:

On July 21, 2012, CASCADE SF is throwing the Innovators of the Web Conference in San Francisco, and the lineup is stellar. Top talent in the industry will cover best practices of HTML5, CSS3, UX/UI and Mobile Design, focusing on product design for an optimal user experience. Attendees will leave with sparks, fresh perspectives and cutting-edge skills from highly engaging presentations.Breakfast and lunch catered by local restaurants to help grow and promote small businesses.

Breakfast, lunch, beer-tasting catered by local restaurants to help grow and promote small businesses. Local jewelry company, Padis Jewelry donated luxurious gift bags filled with jewelry cleaner and other branded products.

Including Travelin’ Joe Espresso, Nico’s Tacos, Healthy Spirits catering lunch and providing an international beer-tasting from light to dark – largest selection in the Bay Area.

We aim to take care of our speakers and volunteers, VIP room with massage therapists. Exquisite wine tasting donated by Padis Vineyards at 3pm for VIP guests only.

Opera released version 12 of its web browser today with a number of new features, improved performance, and enhanced support for modern web standards.

Feature Adds:

– Support for better personalization and wallpaper-like themes. A variety of browser wallpapers can be selected from the Opera public gallery.

– Support for CSS3 animations and transitions.

– Preliminary support for WebRTC, an emerging standard that is being drafted by the W3C Web Real-Time Communications Working Group. WebRTC will eventually enable standards-based audio and video chat in Web applications. There is also support for the WebRTC media capture APIs, which allow Web content to capture live media streams from the user’s microphone and webcam. Due to the potential privacy and security implications, the user is automatically prompted by the browser before the feature is allowed to be activated.

– Support for the Do Not Track header. When the user enables the Do Not Track feature, the browser will append a flag to every HTTP request to inform servers that the user wants to opt out of behavioral tracking. Opera users can enable the header by clicking the “Ask websites not to track me” checkbox in the Security section of the browser’s preference dialog. The feature is a welcome addition for privacy-conscious users.

– Process isolation for plugins that will considerably boost the browser’s stability. According to Opera, plugins like Flash account for approximately one-third of the browser’s crashes. Moving the plugins into a separate process will help address that issue.

– Hardware acceleration rendering to the entire browser, including the user interface and preliminary support for WebGL. Both features must be enabled in the opera:config panel in order to work.

Features Axed:

– Opera Unite and support for HTML desktop widgets that float over the user’s desktop.

See the videos when available at the WebGL Camp Youtube Channel .

//www.youtube.com/watch?v=n7NmtWFCP18

SVG Girl

I was recently exposed to SVG Girl (thanks Avi) and as a fan of anime and web technology, what a treat! At first glance, SVG Girl looks like a video of an anime, in reality it is an interactive video using all Scalable Vector Graphics (SVG)! SVG is a family of specifications of an XML-based file format for describing 2D vector graphics, both static and dynamic (i.e. interactive or animated).

SVG Girl uses Kayac’s jsdo.it platform, which allows you to write and share JavaScript, HTML5, and CSS in your browser. Viewers can make real-time changes to the animation to customize the video, and watch the results ‘live’.

SVG Girl made its debut at  Microsoft’s Mix2011 conference. Totally worth the visit to the website and use Internet Explorer 9, where it takes advantage of hardware acceleration to give the experience more smoothness.

SVG Girl offers different types of interaction for different levels of know-how. The average user can modify colors and background images, but those that want to change the SVG source code can modify the animation to be how they want it to look.  Check out the video below..

//www.youtube.com/watch?v=6kKjNipe67I

Super cool huh? I might use IE9 more often now.

Beyond the cool factor of being able to race a Tron light cycle, the game utilizes some new web3D technologies. Developer Shy Shalom built the game using HTML5 canvas elements, WebGL, and Javascript.

Test here to identify if your browser is WebGL enabled and then visit this link to start playing. See you on the grid!