Monday, October 29, 2012

an project

publishing process

(click on the image to change it. double tapping on my macbook cycles backwards, that'd be right-clicking?)

what i did

  1. i created an .svg image file using google drawings.
  2. i used the sozi extension on inkscape (an svg editor) to create "frames" that can be cycled through to create a presentation.
    • i saved my .svg file in dropbox,
    • created a public link,
    and
  3. embedded it in this post using an object tag.

inspÄ«∙ration

  • "illustrator brain"

    before i worked here, i worked here. as an intern on the design team for Church History. i was always so embarrassed by the fact that i could not for the life of me figure out how to do anything beyond cropping and resizing in photoshop. i was, however, fairly decent in illustrator.

    one of the designers gave a presentation comparing the two. he used illustrator almost exclusively and was trying to convert the team. he told me i was not to worry; the world was divided into two groups: people to whom photoshop makes sense, and people who prefer illustrator.

    i am among the latter.

  • vectors for zooming

    that's compelling to me.

  • google docs

    when i started working in my current capacity i got a new computer. the only relevant point is that i no longer had access to cs5 or illustrator. so i turned to google drawings. it's hyper simple, but it can do more than you might expect, including export as .svg

    and it works like illustrator!

  • prezi

    i'm trying to figure out the best way to train and share my knowledge of chweb with my team(s). the prezi zoom and glide across a canvas, rather than static, linear slides, is appealing, but it wasn't playing nice with the picture i drew. rather than start from scratch i started looking for other solutions.

  • easy.

    i didn't want to worry about fancy css or javascript. (i can't use those on a blog post very easily) and i wanted it to be universal: "All major modern web browsers—including Mozilla Firefox, Internet Explorer 9, Google Chrome, Opera, and Safari—have at least some degree of support for SVG and can render the markup directly." (wikipedia)

    it is more universally supported than the details tag that contains this text. it even (with minor dimensions tweaking) works on my phone.

practicality

i quickly found that i was not the only person interested in using .svg files in presentations. i found a few promising leads (including impress.js) but ultimately decided to try sozi because it embeds the frames and transitions into the svg file itself so i'm not dependent on external code. (though i am dependent on the tool.)

i haven't researched it thoroughly, but what i know about sozi is:

  • sozi is french! (but there's a full english site)
  • there's a relatively active community of sozi users
  • someone named damien wrote out very detailed and very useful instructions for how to use sozi on a mac

as part of my earlier searching, i had downloaded and installed inkscape as a free alternative to illustrator. (i hadn't used it yet, though.) i had already, through various previous experimentations installed xcode, which subsequently made my macports set up slightly easier, but damien was not wrong when he said it "was not that easy" to install sozi on a mac.

i spent several several days trying, after work (firewall issues made some of the terminal commands break), to get sozi working.

i did, finally, today, figure out how to follow the last of damien's instructions. and finally, today, sozi worked for me. and it worked like a charm!

concluding speeches

you can bet your bottom dollar that i'll be using sozi again. after all the work i went to to use it in the first place...

i'm not sure if it's easier to install on a pc, but for mac users, honestly, if anything i've mentioned/linked to here intimidates you at all, i can't recommend it. it was hard and frustrating to install, and even though it's not hard OR frustrating to use, you can't use it until it's installed and while True: print("Infinite Loop")

My project

Here's a look at my current project - more or less. It's the new website that I'm trying to launch soon for my mom's business - Bridal Image (selling wedding gowns, prom dresses, accessories, etc). Currently the site she has (bridalimage.com) is very static and hard to update easily. I'm moving the site over to WordPress to make it easier for her to update things herself and even update product pictures of new dresses, etc. Let me know your feedback, if any, on the current "beta" site. 

The thing I'm mainly looking for is an easy way to display the gowns - currently I'm not 100% happy with the way the "prom" section shows the gowns, but it's the easiest plugin I've found for WordPress. Any other WP ninjas who know of another good widget/plugin for this type of thing? 

http://bridalimage.com/beta

In truth, while I'm almost done, I'd like to say that I'm happy with this project, as it's helped me learn more little tips and tricks for HTML, CSS, and even some PHP - as I've had to do a lot of tweaks to the template I implemented to make it our own. 

Thanks in advance for any feedback you have...

Friday, October 26, 2012

An awesome book

I found a really cool book that someone designed (with a little help from the Google folks). It's an online/interactive book/app the guy wrote and put online - similar to what Tyler wants to do. If you are in chrome, you can add this as a web app, or I believe that you can go to the website as well, to look. Check it out and click on all the fun "easter eggs" that move and make noises. The author did all the sounds too!

http://www.veryawesomeworld.com/awesomebook/
or
https://chrome.google.com/webstore/detail/an-awesome-book/jcafjdhiidcpdgpdbpnllmpheogojkfl

Happy Friday everyone! Peace out.
-Cameron

Awesome resource, free ebooks for JavaScript and HTML5

I just barely found this. I'll definately be using some of these as a resource

It looks like a pretty good list of all different types of JavaScript ebooks, as well as HTML5. I've seen a couple of them before Dive into HTML5 is a good resource for sure. The others look good as well.

My project

So I talked yesterday a bit, when we met about what I was going to do for a project. I want to make an interactive story book. I have a few on my tablet, and my kids absolutely love them. But I think that everything that's done in them could easily be done using web technolgies. I've created animations with javascript, I've created presentations, so in my mind, it shouldn't be too hard...

But it probably will be hard.

The book that I'm going to make interactive is called Goodnight Forest Moon it's a Star Wars spoof on the popular children's book Goodnight Moon by Margaret Wise Brown.

(I thought about doing one with Spiders are Wonderful by Toby Vok, but I decided that scaring children wasn't the goal here... although maybe a future project.)

To make it a bit easier (in theory) on myself I've been looking for a good framework to build off of. I would reccomend if you are doing a project, look for a framework to build on top of - a good generic one is the HTML5 Boilerplate There's no sense in inventing the wheel twice. The one I'll most likely be using is called Booklet. Maybe. It's not mobile optimized... yet. But we'll see.

P.S. <span> a good way to practice HTML is to write your blogposts using HTML, rather than with the WYSIWYG editor </span>.

Thursday, October 18, 2012

Incredibly Awesome Web Development Resources For your Enjoyment

Ok... So maybe not everything should be an acronymn or have "Awesome" in it's title because the title of this post just sounds a little weird, and it would only be weirder as an acronymn (IAWDRFYE – That doesn't even make sense!)

Regardless of the akward name that this post has, these really are some good resources: