Problem Solving Log

     My website is a informational and promotional site for my creative communication studio, Mhmm. We hope to reach old and new viewers, old and new clients, and anyone else that is interesting in seeing our attempt at promotional communication through outlets of digital motion pictures, photography, and design. On our site we have a home page that plays our most recent creative work, as well as a works page that contains all of our complete works, about page and a contact page.  Opposite of the navigation bar are three social media widgets. One links to our Vimeo, one links to our Facebook and one links to our Twitter.

      While developing my website in Dreamweaver, I ran into a handful of issues.  First issue was sizing. I did not want the page to scroll so I had to figure out a gerneric frame size that would fit most computer screens used by our viewers.
The same frame was maintained on all pages containing the logo header, a frame of 700x394 and a footer containing our nav bar and social media widgets.
  
     The biggest issue I had with the footer was I could not get the nav bar and the social media widgets to     sit on the same plain with each staying to their respective sides. I would have the nav bar below and all the way to the left of the 700x394 frame and the widgest below and all the way to the right of the frame. But everytime the widgets would just appear on a line below the nav bar.

To fix this I had to take each separate <div> (the nav bar <div> and the social media <div>) Place them within one container <div> that measured the width of the over all frame. I then had to take the nav bar <div> and size the width to 50% of the overall container size. I think had to set a float left. Opposite of the nav bar <div>, I took the social media <div>, set the width of the overall container size and applied a float right. It still was a little uneven, but I Sized down my social media widgets until it layed on the same line as the nav bar.

    The other big issue I had was once I took my final code and tried to host it on our domain site, two of the three social widgets failed to show up on all for pages (home, works, about, contact)
The solution was I had to change the permissions on two of the the three widgets from 600 to 744.

Another problem I ran into was trying to host all of our works from vimeo, on our works page, without changing the consistent frame

To solve this issue, I actually just went to vimeo.com and then clicked on 'Tools' in the navbar. Within tools, there are options for embedded widgets that play vimeo hosted videos on your site.
There is a hubnut option (which i used with slideshow capabilities) and a badge option, which displays a montage of all of your recent vimeo hosted videos.  http://vimeo.com/widget

www.mhmmproductions.com

Brett Varga

Problems Log  www.bringyalunch.com  

5/4/2012

My website is a personal portfolio for me in a nutshell. I want people, mainly around the ages of (17- 40) to visit my website. I want to display my art in simple easy to navigate pages. I also want to establish, Bringyalunch.com, as an artist hub. Any artist that wants to put up work and contact info can do it on my site with my permission. I also want to make it possible for people to purchase certain works or clothes from my website.

Problems:

1. I want to be able to drag over the headers and have them change to images when the mouse is over then. When the images are clicked I want them to animate. I have some experience doing this in flash, but I want to try it out in html.

(Got the images to change with the swap image behavior)

2. I want to create a pay pal account, so visitors to my site have the opportunity to purchase my art and any other artist’s art via credit card. (Haven’t implemented yet because still do not have any shirts to sell)

3. I want to have the main image on the homepage change every time you go back to the home page.

(Change the image for the homepage to a wider image, help get the container align more to the left of the website image à “Last Lunch”…no longer want the image to change

4. I have no idea how to create a slideshow that shows one image at a time. When you click on each images it should go to the next image or click left or right to navigate though each slideshow. ((((Got the images for "fine art" and "digital" to show slideshow, which is archived at Flickr.com))

àscript: galleria-1.2.7.min.js, galleria-flickr-call.js

link to guide for script: http://galleria.io/docs/getting_started/beginners_guide/

5. I'm having a hard time figuring out the layout for my email page, I'm not sure how I want the information showcased on the page......((I want to change the email page into "about me/ contact"... on the page it will show the artistic statement also will be a link to my email and bringyalunch@facebook)))

à (I change the “email” footer to show “about me/ contact”)

à (Placed a picture of me working & under the picture a description “What is Bring Yaw Lunch?”

6. Need to get the artists' desired art and description/bio to be showcased on "friends" page

à (Now I have artists with images and links to respective emails and/or websites.  I also have a description for each artist and a slideshow, video, and/or music of their respective work)

7.Need to finish bubble designs for " Friends" and "About Me/ Contact" to showcase indiv. Bios

(I change my mind about the bubble wording idea, It is shown as normal text format because it is easier to to change and update the website)

8. I need to figure out how to embed youtube videos

à Use script: galleria-1.2.7.min.js same as the flickr script make sure its in its own folder mine is titled “youtube” inside that folder have another called “themes” inside that have “classic” and have the scripts

 galleria.classic.css & galleria.classic.min.js. Should be available at http://galleria.io/

9. Figured out how to share bringyalunch.com on facebook and twitter

- http://sharethis.com/

Embed code – place under

</head>

<script type="text/javascript">var switchTo5x=true;</script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

à Place code at button right before </html>

<script> var options={ "publisher": "eb2066fd-f958-4eb1-be8b-4d45b67a25df", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter"]}}; var st_hover_widget = new sharethis.widgets.hoverbuttons(options); </script>

10. Figured out how to embed videos from Vimeo. If you watch a video click the “share” button and copy the embed code:

             <iframe src="http://player.vimeo.com/video/36592243" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Tucker's Problem Log

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

Then this one (which has a second part) :http://www.youtube.com/watch?v=W7XpOzJHRU4

Then this one: http://www.youtube.com/watch?v=k2YPgl6BNzA

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.

There are lots of forums on the Wordpress website such as this one http://wordpress.org/tags/iframe

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. 

This forum/instructions were useful in informing me to use MAMP http://codex.wordpress.org/Installing_WordPress_Locally_on_Your_Mac_With_MAMP

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.

This part of the Wordpress website is where I started my search on how to integrate plug-ins http://codex.wordpress.org/Managing_Plugins. 

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

http://wordpress.org/extend/plugins/facebook-awd/

            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.

http://wordpress.org/extend/plugins/social-media-widget/

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.

http://wordpress.org/extend/plugins/instagram-gallery-widget/

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.

http://wordpress.org/extend/plugins/instagram-for-wordpress/

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.

Embedagram  http://embedagram.com/custom.php

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>

Webstagram  http://web.stagram.com/  Same as Embedagram with more sizing options/

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...!

SnapWidget http://snapwidget.com/#getstarted  Much like the other two and another option I attempted.  It even had a video with set up instructions

http://www.youtube.com/watch?v=bV_1MDpR0xQ&feature=youtu.be

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/

Spencers Problem Log

Spencer Reeves  Log

1)      Getting Started.  Looking into Dreamweaver and how to export images out of Photoshop

Splicing images and exporting using Photoshop:

 http://www.youtube.com/watch?v=DVfxe4pqvo8

Basic Dreamweaver Tutorial:

http://www.youtube.com/watch?v=3ALBhq7bsBk

2)      I wanted to overlap images on my home page without importing a Jpg where it was already done. Matt wrote the code below. Not only does it allow images to be over lapped it also allows images to be brought forward when the cursor hovers over them. The z-index tag is what positions images on top of each other.

.joker {

                                position: absolute;

                                top:450px;

                                left:460px;

                                z-index: 6;

}

.joker: hover{

                z-index: 13

}

3)      On the left side of my home page there is a black box with text inside it. I was unable to move my text off the edge of the box. I wanted to put a margin on all sides.

Solution: instead of trying to adjust the margin, positioning, etc of the text area I set a margin on the Sidebox div. doing this I was able to move the text off the edge.

4)      I had a lot of problems with code not working the way it should or at all.

Solution: Check your code make sure every . , { ( is in the right place.

5)      How to insert picture into my website in a smooth seamless way. I wanted to be able to disply work without having to insert 20 pictures in a grid.

Solution: created a Flicker.com account. With the account you can upload photos, move them into sets and embed the sets directly into your webpage.

Beware of the Houdini div. !!!

Sreevesdesign.com

Granelli- Completed page and problem log.

http://www.wix.com/bodlax/alexgranelli#!home|mainPage

My design is a mockup self promotional website that is a test for future ideas. The WIX website builder is a useful tool in creating a modern looking webpage that did not come with many problems. The main problem that I have encountered thus far is having separate background images on each page of your website. I'd like to use separate images in order to show a multitude of examples that promote the concept or idea. I ended up just using a dark background and stretching pictures to fill the background, I would have liked more flexibility within this area but the WIX features are somewhat limited.


Problem Log

1. Problem: Having separate background images through WIX

Solutions: You can create a website based entirely of "Master" pages. Create a new website in Wix for every page of your website. Instead of using the menu bar, you can use "Text Buttons" arranged in a menu style to link between pages easily.
http://www.wix.com/support/main/flash/wix-editor/site-settings/site-background

2. Problem: Multiple master pages lead to increased load time between pages.
Here is an example, http://www.wix.com/bodlax/alexgranellihome
The link "Gallery" runs much smoother between pages
3. Webpage sizing- The builder view shrinks actual webpage size. Published webpage appears larger and requires scrolling to view.
The website looks decent in the builder view but the size of everything seems to increase when viewing the actual webpage.
Solution- Trial and Error. Try to make everything smaller and allow for a even border around the page layout. WIX doesn’t have a good way of showing rulers or any sizing information in the builder. The gridlines available are for a much more generic page layout with a column on the left for link, a body area, and a header.
Lastly- It seems necessary to be very careful in the choice/size/and layout of the texts I use. Some pages are visually non uniform and this takes away from the aesthetic side of the website.
4. Centering images and text on webpage. Wix doesn’t provide a way to center anything on the webpage. It’s entirely based off your own judgement and therefore leaves room for error. I simply tried to line up the pages equally but there is no way to know for sure if anything is centered.

Creating a favicon

http://www.macworld.com/article/1143385/favicon.html

Date for Class Final

Our final is on Friday, May 4th, from 3-6, but will not meet for the full three hours. You'll present your final websites. That is also the due date for your finished "problem solving log" (which, as a reminder, is worth 15% of your grade.