Superbly Awesome Web Development Understanting and Study Time (SAWDUST)

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 them~~ask 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.
- i saved my .svg file in dropbox,
- created a public link,
and
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...