HTML5: Storing variables between page transitions (session management)

Tags

, , , , , ,

Today I looked into how to maintain a variable during a visitor’s session to my web site.  I learned that with HTML5, there’s the ability to use the sessionStorage object.  A great addition to replace cookies.  Unfortunately, it doesn’t work in earlier browser versions.  Fortunately – there’s a solution! Enter code.Google.com:
http://code.google.com/p/sessionstorage/

Andrea provided this great javascript file that can be used to allow the session storage object to still function properly in older browsers.  I ❤ it!

http://code.google.com/p/sessionstorage/downloads/detail?name=sessionstorage.1.4.js

Advertisements

Video

3DS Max: Bathtime with Enya

Tags

, , , , , , , , , , , , , , , , , ,

Techniques/Effects Used:
Modifiers: Twist, Noise, TurboSmooth
Particle Systems: Spray
Space Warps: Ripple
Helpers: Atmospheric apparatus

Tub Water / Water Plane:
I added a plane and gave it the water texture.  Then, I added a space warp > geometric/deformable > ripple effect and used the bind to space warp tool to bind the ripple to the water plane mesh.  I adjusted the flexibility parameters and added a turbosmooth modifier.

The Ripple:
I also adjusted the ripple parameters to get a slight, soft ripple in the water.  Adjusting the number of circles and segments smoothed out the ripple circles.

I animated the ripples by setting key frames at the first and last frame and changing the phase from 0 (on the first frame) to -5.2 on the last frame.

Faucet Spray/Water Pour:
I added a Particle Systems > Spray effect below the faucet head.  I modified the drop size and speed and applied a water texture to the spray.

I adjusted the start to -50 so the spray would already be in motion when the animation began.  I also adjusted the render count, speed, drop size, variation and set the type to drops. Then I added a twist modifier to the spray.

For the constant pour, I added a cylinder object and adjusted the mesh so it was pinched in some places, narrowing and widening – curvy.  Then I animated the cylinder by setting a key frame on the first and last frames to rotate it.  This makes the water flow look like it’s varying in pressure a bit as it widens and narrows.

Candle Flames:
I created the flames using a helpers > atmospheric apparatus > sphere gizmo.
I added the fire effect to the sphere gizmo on the atmospheres and effects rollout.
I added a noise modifier to the flames/sphere gizmo, too, to animate them a little bit as though they were flickering.

My 5 Favorite Apps

Tags

, , , , , ,

I love my apps.  If there’s an app that can help me to be more productive or make life even just a tiny bit easier, I probably have it installed on my iPad or phone.

While there are a lot of great apps out there, here are my 5 most favorite:

5. Nest Mobile
https://play.google.com/store/apps/details?id=com.nestlabs.android&hl=en
This handy app lets you control your Nest thermostat.  That means it requires that you purchase the hardware first, but it’s an easy install and a great way to monitor and control your home thermostat when you’re away.  You can also set schedules for raising/lowering the house temperature and modify the settings remotely.

4. Air Mouse
http://goonbee.com/apps/airmouse-details
This is a two-part app that turns your ipad/iphone into a remote wireless mouse and keyboard for your PC or Macintosh.  It requires a quick software install on your PC and downloading the app to your mobile device. After that, it just takes launching the app and voila!  Excellent easy install and setup experience!  Save yourself the carpal tunnel of a mouse and mix it up by using your mobile device like a trackpad.

3. iWOL Pro
http://goonbee.com/apps/iwol-pro-details
Made by the developers of Air Mouse, iWOL Pro is a great app that allows you to shutdown and wake your computer remotely.  That means if you leave the house for a two-week vacation and forgot to shutdown your PC, you can do it from the airport.  Alternatively, if you shut it down and you need to access it while away, you can boot it back up remotely.  Great energy-saver, too!

2. Evernote
http://evernote.com/
This is a popular app, but I just can’t leave it off the list.  I use it far too often to ignore!  If you haven’t heard of it, Evernote allows you to create notebook folders and store notes in them.  You can upload photos or documents, tag them with searchable words, and attach voice recordings to any note.  If you upload a photo that has words on it (i.e. a photo of a document) Evernote will even read the text in the photo and return the photos in any relevant search results.  Every evernote comes with a personal e-mail account @evernote.com.  This lets you send emails to your account and store their contents as a note.  You can modify the subject line of your email to determine how evernote should categorize the note.  Use the @ symbol to specificy a notebook name @mytodos, and use the # tag to specify searchable tags #groceries, #shopping.  It makes adding a note to your evernote account very simple.  You can also share your notes privately or publicly with others.

1. Foscam Pro
https://itunes.apple.com/us/app/foscam-pro-two-way-audio-recording/id509546027?mt=8
This is another app that works with specific hardware: the Foscam Web Cams.  Well-worth the investment, these web cams can be placed in your house and have infrared capability so you can still see in the dark!  You can watch your house through the app on your mobile device when you’re away.  You can pan the room and save position settings to easily move the camera back to a specific position.  One of the best features is the ability to talk and listen through the web cams.  I use it to talk with our four cats when we’re away on vacation.  (Yes, I’m the crazy cat lady.)  You can also record video or take snapshots from the video feed.  There are other free apps out there, but this one allows the two-way audio.

These are just a few of the amazing apps that are out there, but they’re some of the most useful!

Toodles.

Using CSS & Javascript for Animation & Web Site Design Tricks

Tags

, , , , , , ,

If you thought Cascading Style Sheets (CSS) were just for formatting font colors and wireframes, you need to check these sites out:
http://css-tricks.com/fancy-scrolling-sites/

The link above is a great source for web design inspiration!  Most require the use of CSS and Javascript to accomplish the effect.
For example, you can use an event listener to detect when the visitor scrolls:

<script> $(window).scroll(function () { //You can see how many pixels from the top the visitor scrolled: $('p').text("You have scrolled " + $(window).scrollTop() + " pixels"); }); </script>

Toodaloo.

Toodlebug Project: Smiletiles!

Tags

, , , , , ,

It’s like Whammy meets bingo…! Version 1 of this project is nearly done! I just have some more work to do on storing the most recent scores. Right now, it’s storing everything and only displaying the original scores. I’m going to change it to only show the most recent top 10 scores. It’s playable though! Check your hand-eye coordination and reflexes! 🙂

http://www.sherryumlah.com/smiletiles/

Be creative every day

Tags

, , ,

One of the things I aspire to be is creative… every… single… day. That’s the message shared by this cute, interactive cartoon: http://www.drawastickman.com/

I absolutely ❤ it! It's one of those things that I wish I had thought up myself. Is there a game or cartoon online that you wish you had created? I want to hear about it! Share it here!