Parallaxing is awesome. There's no way around that. If you're not familiar with it, look it up.
Anywho, this is an amazing jquery plugin to make a parallaxing effect on your web page it's called
Tuesday, December 11, 2012
dear universe,
there's something i want, but i'm not sure how to get it.
you see, universe, i'm working on a couple of projects right now that involve videos:
there's something wrong with both of those pages. what is it? thumbnails.
granted, the problem with the YAC is bigger than the problem with preservation because there is no way to display a thumbnail in the gallery for YAC, whereas I can upload 8 little images to the preservation gallery. but my desire is the same for both: i don't want to have to add any images. i only want to add the videos.
why do i feel that this is fair? well, in the Media API Objects Reference i am informed that each video comes with two very promising pieces of information:
videoStillURL- The URL to the video still image associated with this Video. Video stills are 480x360 pixels. Note: URLs are subject to change without notice. Do not hard-code them into your applications, but rather use the Media API to pull them dynamically.
thumbnailURL- The URL to the thumbnail image associated with this Video. Thumbnails are 120x90 pixels. Note: URLs are subject to change without notice. Do not hard-code them into your applications, but rather use the Media API to pull them dynamically.
now, universe, i recognize that there are certainly more complexities to the Brightcove + LDSEdit equation than i can imagine, but surely something must be possible to take greater advantage of the features in Brightcove.
the way it currently works is like this:
- you click to add a video collection
- you click to add a new video
- you enter the Brightcove IDs
- you find an image to use for a thumbnail
- you crop and resize that image to the exact right dimensions for your use case
- you find/create a directory to store your video thumbnail image files
- you upload your image
- you save your video
- you repeat steps 2-8 until you've added all the videos to your collection
- you save your video collection
the way i imagine it working is this:
- you click to add a video collection
- you click to add a new video
- you enter the Brightcove IDs
- you save your video
- you repeat steps 2-4 until you've added all the videos to your collection
- you save your video collection
yes, universe, i'm lazy. it's true. but think of all the time i save by eliminating steps 4-7. think of all the image files we no longer have to host on our servers. i reduce redundancy by not repeating work that was already done in Brightcove. and, by using the information in Brightcove, i ensure consistency across all uses of my video. i could always choose to upload a different thumbnail and override the default if that seemed appropriate for a particular context.
i'd bother the developers for chweb, but most of them are out sick. and i don't just want this to work for chweb. i want it to work for everywhere.
so how do i find out if this is possible?
UPDATE!!
katy carpenter is the universe
Joanna,
You are correct in that this can be done, but it’s currently not being done anywhere on lds.org because it requires some front end dev work. If the request do to this came from CHD or FHD, the ICS front end developers assigned to the project would just need to meet with JD Russell (the technical product manager on my team) to discuss how this is done.
Warm Regards,
Katy Carpenter
Monday, November 19, 2012
FYI, Awesome free fonts
If ever you're working on something, and you say to your self "gee, I could sure use an amazing free, font right now with absolutely no limitations", Be sure to check out The League of Moveable Type
Their fonts are opensource, so you can use them wherever, and they're good fonts too. There are definately other resources, but I like these fonts alot.
Friday, November 16, 2012
Sawdust meeting on Nov 26
Hopefully this meeting will be a brightspot in everyone's Monday, after returning from a splendid vacation.
I'm a little at a loss as to what to do for the meeting though. The original vision of this group was to be a place where we could learn from and teach each other. A format that I think would work well, and that I'd like to try this month, is to have a few people take the first 15 or 20 minutes talking about what we've been able to learn or study. Then the remainder of the time someone would give a brief presentation (or class like thing) to introduce a new technique, trick, or other web development related thing.
For instance, this month, I think I'll take the lead on that, and I will go step by step how to do something... What I'm not sure of is what that something should be, but I have a couple ideas. To help narrow it down, here's a poll
Monday, November 5, 2012
Family Search indexing Facebook page and jQuery UI
Over the last week or two I've been able to work with FamilySearch to get a Facebook page ready. They provided the design and I've been doing the CSS and front-end stuff to get it into Shortstack, and then onto facebook from there. For those unfamiliar with Shortstack here it is in a nutshell: Shortstack is a 3rd party website that creates Facebook applications. In this instance I used it to create a static HTML page that is viewable on Facebook.
The actual page is not on Facebook yet, but will be soon.
By far my biggest challenge with this project was they wanted thermometer style graphs. I had never done that before. After reasearching I found a few, but none of them were quite what I wanted, or they cost money. So I kept looking and rediscovered the jQuery UI. The jQuery UI has a built in progress bar in it, and I thought "Hey, I could just tip that on it's side and it would work". Like most everything else I try, it ended up taking a lot longer than I initially thought. However, with alot of trial, error, bugging friends who know more about jQuery than myself, and google, I was able to figure it out.
To make the progress bar vertical, there was a reference to "width" that I had to change to Height in the jQuery UI file. I also had to specify a width and height with CSS for the bar. I also bugged one of my good friends who is a jQuery master... I would reccomend finding people who are super good with any coding language that you're trying to learn and then bug themask them nicely for their help, and give them cookies.
Monday, October 29, 2012
an project
(click on the image to change it. double tapping on my macbook cycles backwards, that'd be right-clicking?)
what i did
- i created an .svg image file using google drawings.
- i used the sozi extension on inkscape (an svg editor) to create "frames" that can be cycled through to create a presentation.
- and
- embedded it in this post using an
objecttag.
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
detailstag 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...
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
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:
- Webmonkey.com has a good primer if you're kind of familiar with heneral HTML concepts, but aren't sure what HTML5 is exactly
- w3schools.com is a good all around general resource, they have classes for free on there, some of the examples are a little confusing, but overall it's a very good resource for both learning and reference.
- Htmldog.com is a very well written website, and and actually is a companion for the book. I hesitate to put it up because it only deals with XHTML, and we'll be dealing mainly with HTML5, but if you're an absolute beginner to HTML, I haven't found a better written resource than this While it is based on XHTML, many of the tags still work without any problems in HTML5, and it would serve as a good base.
- 1stwebdesigner.com is my new favorite web tutorial repository, there are tons, some are advanced, and others are more beginner oriented.
Subscribe to:
Comments (Atom)