Nifty QR Code

Posted by on Jul 21, 2015 in Design Tips, Web Tips | 1 comment

Ever see those ugly black and white things that were all the rage a few years back called QR codes? Well they had the potential of being something great but they were pretty ugly and the technology just wasn’t on everybody’s phone to make it that useful.

I discovered ounchtag.com today and made my own QR code that is melded with an image. I think it looks pretty cool! Give it a try and let me know what you think.

onchtag

If you don’t know what a QR are code is you can read more about it here.

UPDATE:

No sooner did I post about this that I found a place to use one! One of my clients is a writer and here is a bookmark advertising her books page. The site is not yet live but she will be able to use this bookmark at conferences to take her to her website and to links to buy her book.

bookmark

 

Read More

How to share a youtube video fullscreen

Posted by on Jun 24, 2015 in tutorial, Tutorials, Web Tips | 1 comment

It’s easy enough to click the full screen mode on a video but what if you would like to share a video already viewable in the large size? Perhaps you want to embed a link on your web site that doesn’t show all the other youtube clutter? You just want the video to take over the view. Not sure why youtube has hidden this but for now the solution below seems to work.

The URL for a video you find on youtube for example looks like this:

https://www.youtube.com/watch?v=r0eHPrT_Wjo

This is just going to show you something that looks like this:

Screen Shot 2015-06-24 at 11.34.57 AM

The trick to get full screen is to delete “watch?v=” and replace that with “v/

Below is the changed web link. Copy and paste the link below in the browser to test!

https://www.youtube.com/v/r0eHPrT_Wjo

 

Read More

Photographing college graduation

Posted by on May 22, 2015 in All, Design Tips, photo, Photography, Web Tips | 4 comments

2015grads

example gallery from weebly

example gallery from weebly

I was asked to photograph the Los Medanos College 2015 graduation ceremony a couple of days ago. It happened to be the largest one they had yet and that meant over 400 graduates! Needless to say I have over 2,000 images I needed to whittle down through and make sure I tried to show most everyone while still capturing the fun of the event. We use these photos not only to document the night but they are great marketing pieces to remind potential students what they are working towards.

The trick to getting maximum exposure is to get through these photos fast before the momentum of the event wears off and that is where some handy software can help. I used Adobe lightroom to quickly star the photos I was going to keep based on the thumbnails. Then I batched adjusted the exposure on some that were a little light struck. Then I did a little cropping and then exported them as decent sized jpegs.

Here is where the cool part comes in. To make a web gallery or a slideshow can take hours but not so when you use the free templates that weebly offers you. They offer free blogs and web hosting and what’s even cooler is you can download the pages and keep a copy for hosting elsewhere.

Another free little tool I just found out about is Pro Show Web that allows you to quickly make a slideshow with 15 images or less and set it to music.

[/mp_span]

[/mp_row]

Read More

Web page count tip

Posted by on Apr 21, 2015 in All, Web Tips | 0 comments

Sometimes the seemingly simplest question is the hardest to answer!

There are times when you just want to know how many web pages are on a domain. It would be easy just to give a total of the number of files on the sever however that tells you the number total of all the images, web pages and other documents. If you just want to know how many web pages there are here is a little trick I learned.

  1. Go to google.com on a desktop machine. Didn’t seem to work on my iPad
  2. Type in site:www.yourdomain.com (change “yourdomain.com” to be yours of course!)
  3. Note the little gray numbers under the search. This is how many pages are on the site

NOTE: this is a great way to browse the content of a site that hasn’t linked to all their content or their content is buried deep in their site.

See below of an 8 page site I designed.

site1

 

Now look at how many pages the college site has that work for!

site2

Read More

Web store sneak peak

Posted by on Mar 7, 2015 in All, Design Tips, photo, Photography, Web Tips | 2 comments

I don’t usually show a website until it’s mostly finished but I am excited about my new pet photo stock store I am setting up. As of this post I have only formatted 6 photos for sale because I wanted to focus on getting all the details right before adding more. I am using gumroad for the store engine and I coded the page to be responsive so hopefully when you view this on any device you can see the thumbnails fairly large in either 3, 2 or one column. Be sure to sign up for my mailing list to be alerted when I add new photos at the bottom of the page!

store

Read More

Highlight link to current page with javascript

Posted by on Feb 4, 2015 in Design Tips, Web Tips | 0 comments

If you have a menu on your website and you would like to provide some visual feedback with that one of the links in the menu bar is the page you are on it’s pretty easy with some HTML and CSS.

All you have to do is add a class name to the HTML for that link and then style that class name with CSS.

For example just style the class of “current”:

<code><span class="tag">&amp;lt;li</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">"<span style="color: #ff0000;">current</span>"</span><span class="tag">&amp;gt;&amp;lt;a</span> <span class="atn">href</span><span class="pun">=</span><span class="atv">"http://www.somepage.com"</span><span class="tag">&amp;gt;</span><span class="pln">some page</span><span class="tag">&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;</span> </code>

Unfortunately if you are using a common navigation system where you have one file that has all the navigation elements linked to hundreds of pages it’s not possible to change the link style for every link. It defeats the purpose of a common shared file.

Thankfully I found an old blog post by Jonathan Snook that had a script that worked perfectly to strip the link from the current page button. See how “Drama Club” in this screen shot is now light gray and slightly out-dented? It is now an inactive link so if you hover your mouse over it the cursor will not change.

Screen Shot 2015-02-04 at 4.11.16 PM

All you need to make this work is a link to your JS file in your HTML document in the head section like this

<script type=”text/javascriptsrc=”clearlink.js“></script>

Then in the JS file this is the below content is all you need. After that the rest is styling with CSS!

/*
CLCP v2.1 Clear Links to Current Page
Jonathan Snook
This code is offered unto the public domain
http://www.snook.ca/jonathan/
*/

window.onload = clearCurrentLink;

function clearCurrentLink(){
    var a = document.getElementsByTagName("A");
    for(var i=0;i&lt;a.length;i++)
        if(a[i].href == window.location.href.split("#")[0])
            removeNode(a[i]);
}

function removeNode(n){
    if(n.hasChildNodes())
        for(var i=0;i&lt;n.childNodes.length;i++)
            n.parentNode.insertBefore(n.childNodes[i].cloneNode(true),n);
    n.parentNode.removeChild(n);
}
Read More