Tucker Norred
Chris Lanier
Web Design
Website Log
Tuckernorred.wordpress.com which will be updated to
TuckerNorred.com.
The first step of our logs are when
we are on the search for a template for our website. The two platforms that I have narrowed my
search down to are Blogger and Wordpress.
Both are set up to be blog style format, which will cater to the design
I require.
Blogger was
my first option that I considered because I have used blogger in the past and
it is familiar to me. First, I went to
the Blogger website and looked through the templates that they had available
before going off the site to third-party developers. The options that I saw available to me seemed
like the templates would stint my ability to tweak them in the future. This is why I decided not to use a blogger
template. None of the ones that I looked
at were designed to be a “video” focused blog.
The dimensions of each of the posting areas would not provide enough
room to preview the video clearly without full screen enabled. This was a major determining factor for me,
but the ability to link it easily with my Google account and my social media
hubs was a major plus.
Word Press is what I decided to use for my website design
template. The functionality and ability
to truly customize the templates was the main detirming factor in this decision. Also, there are many more third-party
developers that design all sorts of plug-ins to maximize the efficiency and
effectiveness of the site.
What I
found out after diving deep into the project is that without hosting the site
through an ftp client to my GoDaddy account the functionality of the site is
very limited. But, the ability to host
my site on GoDaddy is what I plan to do over the summer. Without hosting the site on my own I am
forced to used the Dashboard on the Wordpress site where it limits most
abilities to insert code into the site and addition of new plug-ins, etc. The ease and functionality of the WordPress
Dashboard is very user friendly with many “drag and drop” techniques making it
very familiar to me. Also, all of the
third party developers create ways for you to integrate anything your heart
desires.
The third option that I explored
briefly was how to take the template that we created in Photoshop and be able
to turn that into a fully functioning website.
We made two different templates and I thought that if one didn’t work
due to sizing, or some other constraint, that the other might work. There are many different tutorials to do so
online so I looked at what the first step would be to take. I found this was useful before sending my
website to Dreamweaver, it helps to set up the Photoshop file. (
http://line25.com/tutorials/create-a-clean-modern-website-design-in-photoshop)
Once I was sure that my Photoshop
mock up was ready for Dreamweaver I then looked on YouTube for video
instructions on how to do so. I am more
of a visual learner and I thought that it would be easier because I could see
where all the buttons that I am unaware of in Dreamweaver. This was the first video that I watched:
http://www.youtube.com/watch?v=y0_Dfyfd-7M
The main difference between all of
them was the version o the adobe creative suite they were using. But, they all basically revolved around doing
the same set of steps to building a website.
That is one thing that I have notices about most all of the creative
suite programs, almost all projects can be completed in completely different
ways with the same end result. After
watching the videos I was able to conclude that I would more than likely spend
far too much time running into multiple different problems. I wanted to focus more time working on the
functionality of the site and not just building it. I made the decision to not use a Dreamweaver
template, or my own, for my website because of the sizing issues I would run
into with every shape I created.
These are the main key components
that I will require of my design to be able to preform: Blog style format, host videos, host photos,
contact me, link out to my social media sites.
This one was very useful for me while I was looking for ways
that I could possibly add an <iframe> to my Wordpress site.
Also, the support on the site is
very useful/user friendly. I used this while trying to upload my website via
FTP clients to my GoDaddy account.
http://en.support.wordpress.com/ftp-access/
this was something that ended up being the biggest problem of my website. Moral of the story: “We do not allow FTP
(File Transfer Protocol) access to any WordPress.com blogs. Please see the
information below on alternatives to using FTP.”
There were many different routes
that I could take to upload my website to my GoDaddy account through an ftp
client. Through one of the intructions
and the forums I read on the GoDaddy site I was told to use the FTP client MAMP
to upload my site and then use the new Dashboard within my GoDaddy
account. This would then give me the
ability to add my plug-ins and code to the directory files for my website.
The last step of the process was to
install Wordpress and connect it but I ran into problems on finding this
information about my server:
database name:
wordpress
database
host/server: localhost
database user:
root database password: root
After much
trial and error to find this information I decided to try another route by
using the most popular FTP client, FileZilla.
FileZilla operates much in the same ways but was actually more complex
than MAMP so I decided to continue using the WordPress Dashboard so as to
finish my website on time.
A lot of the functionality of the
site that I am creating is based off of what plug-ins is available for my site
and integrating them.
I wanted the website to run as smoothly as
possibly for people especially being able to keep high-resolution values of
photos and videos. The plug-in WP Super
Cache is what I found would help me the most amount first. It is a very fast
caching engine for Wordpress that produces static html files. This plugin generates static html files from
your dynamic WordPress blog. After an html file is generated your webserver
will serve that file instead of processing the comparatively heavier and more
expensive WordPress PHP scripts. The
static html files will be served to the vast majority of your users, but
because a user's details are displayed in the comment form after they leave a comment
those requests are handled by the legacy-caching engine. Static files are
served to:
1.
Users who are not logged in.
2.
Users who have not left a comment on your blog.
3.
Or users who have not viewed a password
protected post.
99% of your visitors will be served static html files. Those users who
don't see the static files will still benefit because they will see different
cached files that aren't quite as efficient but still better than un-cached.
This plugin will help your server cope with a front-page appearance on digg.com
or other social networking site.
http://wordpress.org/extend/plugins/wp-super-cache/
One thing that I find very
important of any blog (or any website for the matter) is the presence of social
media and SEO. I would like a Facebook,
Instagram, Twitter, and Vimeo to be connected to the site.
First with the SEO I wanted to optimize my site
to be able to reach out to the greatest amount of people. Wordpress
SEO by Yoast (http://yoast.com/wordpress/seo/) is the most popular one that users apply by
far and it will be the one I choose.
WordPress SEO is the most complete WordPress SEO plugin that exists
today for WordPress.org users. It incorporates everything from a snippet
preview and page analysis functionality that helps you optimize your pages
content, images titles, meta descriptions and more to XML sitemaps, and loads
of optimization options in between.
There's a full feature list for the base
plugin. Currently there's three of them in active development: News SEO, Video SEO and Local SEO, with News SEO being available for download.
The latter two will be paid add-on modules, developed by Yoast with the help of
subject matter experts. These are options that I look forward to in the future.
There are hundreds, if not thousands of
different social media plug-ins that are available to add to your Wordpress.
First, I knew that there was a twitter feed that I could attached from my
dashboard widgets, no problem there.
Many of them are just a buttons, which contains all of the social media
options in one contained toolbar. These are the ones that I looked at first as
a one time fix all, a Plugin Directory
that floats on the side with all of the buttons. Your all in one share buttons plugin. Add a
floating bar with share buttons to your blog. Just like Mashable! With Digg Digg by Buffer, you have an all in
one social sharing plugin for your blog. Display all social sharing buttons
nicely on your blog and make it look amazing, just like Mashable. http://wordpress.org/extend/plugins/digg-digg/installation/
Facebook
integration with my site is something that I thought would be very
important. Within the Wordpress
Dashboard there is only one widget that will assist me in Facebook
integration. It is a very small, unseen
button after each blog post with the ability to “like” it. All that would do is
create a post on their facebook wall and shows a brief description of the
post. I would like a link directly to my
Facebook page where it lands on a page that encourages the user to “Like” the page
so they will be continually linked and updated about my Facebook and site.
First I
looked into Facebook
AWD is an all in one Facebook capabilities for wordpress.
Add Socials plugins, OpenGraph, Comments and FB connect. Publish your content
to all your FB pages and on your personnal wall on Facebook Easy to install and
setup. Use Iframe or Xfbml or HTML5 Add Like button and comments to pages,
posts and custom posts types, at top, bottom or both. Widgets and Shortcodes
available for each Facebook socials plugins. Use post thumbnail for openGraph,
Fix like button with url linter, use pattern to defined custom openGraph meta,
etc... Works in Facebook Tabs and Facebook Canvas! Use both SDK's PHP v.3.1.1
AND JS v3
Next I looked at The Social
Media Widget is a simple sidebar widget that allows users to input their social
media website profile URLs and other subscription options to show an icon on
the sidebar to that social media site and more that open up in a separate
browser window.
I wanted to be able to see the statistics of who tried to
link from my site to my Facebook as well so I looked into Facebook Share
Statistics. Shows informations about your posts shared on Facebook, with
statistics and charts about the number of "like", comments and clicks
received.
Instagram is something that I
wanted to be able to integrate into my site.
The main goal of this is to be
able to update my blog with photos from my mobile phone.
Instagram is a free
photo sharing program launched in October 2010 that
allows users to take a photo, apply a digital
filter to it, and then share it on a
variety of
social networking services, including
Instagram's own.
(http://en.wikipedia.org/wiki/Instagram) Like before with all of the other
third party plug-ins that I wished to use, this one was not pre loaded into
Wordpress.
However, there are multiple Instagram Plug-ins that I found
worked if I was able to host my site onto my GoDaddy account.
Instagram Gallery Widget (IGW) lets
you display your beautiful Instagr.am pictures in a simple and elegant gallery
onto your WordPress website. You can drag multiple widget instances and
configure each one with different settings. You can also use custom PHP code to
insert the widget in any part of your theme or if you prefer, you can embed the
special shortcode.
Instagram for Wordpress
Simple sidebar widget that shows your
latest instagr.am pictures and picture embedder. Requires PHP curl extension.
To embed picture use [instagram] shortcode. Example: [instagram
url='http://instagr.am/p/BSJRn/' size='large' addlink='no']
This means that I would either have
to find a way to host my website through php just to use a silly plug-in or
two. I thought that there would be
answers on the Internet for other people that had the same issues.
I google’d very excessively about
ways people are able to embed their Instagram posts into a normal website that
they have built from scratch. There
still isn’t that many options available to people that want the option of
something written in code to appear on their site. There are a few third-party developers that
have built options where the user logs into their Instagram from their site,
and they build an <iframe> that you embed in you website. The <iframe> is the code that then
produces a scrolling slideshow of the pictures from my Instagram account.
This is the first one that I tried to use, and it is
extremely simple. It just asks you to
log into your account and then it automatically gives you your custom
<iframe>. This is an example of my
<iframe>
<iframe
src="http://embedagram.com/e/widget/31863571/?css=http://mysite.com/embedagram.css"
scrolling="no" frameborder="0" style="border:none;
width:404px; height:144px; overflow:hidden;"
allowTransparency="true"></iframe>
You can ....
View photos of the people you follow
Like and Comment on photos
Follow and Unfollow other users
See your followers and following
Browse popular photos / tags / users
Get your RSS feeds
AND MANY OTHER STUNNING FEATURES...!
The main problem that I ran into
with this was that Wordpress was not allowing me to embed iframe’s in the pages
on my website. It would have been most
favorable to be able to embed it into one of the pre set widgets in the sidebar
but that is not an option. The only
place that I am allowed to place the iframe in my template is in a post, which
would be moved anytime I create a newer post.
Any time I attempt to post the iframe in a page it just gives me the
href and links it out to its own page where it resides. At this point in time I didn’t think that the
iframe wasn’t allowed because it allows me to post iframes of vimeo videos I
have created. So I attempted to use
another named Webstagram and then SnapWidget with the same results.
So I decided to find another work around for
some of the other way of being able to have a rolling slideshow of pictures on
my site from my Instagram. There is a
flickr widget that is part of the preset widgets in the Wordpress
dashboard. So I thought that there may
be a way of having my Instagram linked to my flickr so once I post a photo on
Instagram, it instantly populates on my flickr as well. I Googled “how to
connect instagram to flickr”, as well as many others and had no luck finding a
platform that was able to connect the two.
What I just recently founf is there is a flickr app for my
android device, which is probably the only work around before hosting my site
on GoDaddy. It will be a shame because
it won’t link out to my Instagram, show my tags on photos, and I will have to
upload every photo twice. This is
something I also came across,
http://www.flickr.com/groups/instagram/discuss/72157627054680432/
And it has functionality, but still has multiple problems as
described earlier. I’m holding on to
this for a later date.
Another Work around for Instagram
is the ability to host my pictures in a Picasa Widget. Picasa Widget works as a widget, making very
easy for you to embed in sidebars (if supports widgets) the latest albums from
your Picasa account.
http://wordpress.org/extend/plugins/picasa-widget/
