Thursday, April 26, 2012
Problem Solving Log
StrangeBrew is a video blog that I created for me and my group of friends. We use it to upload everything that we do including pictures/videos of camping, hiking, snowboarding, skating, etc., pretty much everything that we find interesting and like to do. We aren't selling anything from the site, we just use it to gain exposure and have a "home base" for all of the things we do together as a group. I chose to host the site using a google blogger template, and that worked our really well because my main focus was to use it to upload videos, and on blogger it was very simple to do.
Problem-While using the blogger dynamic template design I was having trouble getting the thumbnail picture for each video to show up.
Solution: had to find a code to put in that would show just an image that would link to the video. However, I changed the template from the dynamic view to a regular layout so this is no longer a problem for me when uploading videos
Problem- For the Crew page on my website I wanted to post each persons picture with their name to the left of it, but when trying to upload, the names and pictures went down the page instead of next to each other, 3 wide like I wanted.
Solution- I first started by trying to mess with the code inside of the blogger but that didn’t help so Chris helped me try to figure it out and make a table in dreamweaver. However, posting the pictures in the table and then posting the html from dreamweaver didn’t work because it wouldn’t recognize the source. I ended up solving this by finding a code for a table for blogger templates and just inserting the pictures into that.
Problem-I couldn't find a facebook badge located in the available badges from blogger to link to the facebook group page that we have.
Solution-I found a website that offers all different designs for badges to website such as facebook, twitter, linkdin etc., (which is at http://www.iconfinder.com/). I then used the custom html gadget to import the facebook badge as an image and linked it to the URL of the facebook.
http://strangebrw.blogspot.com/
Problem-While using the blogger dynamic template design I was having trouble getting the thumbnail picture for each video to show up.
Solution: had to find a code to put in that would show just an image that would link to the video. However, I changed the template from the dynamic view to a regular layout so this is no longer a problem for me when uploading videos
Problem- For the Crew page on my website I wanted to post each persons picture with their name to the left of it, but when trying to upload, the names and pictures went down the page instead of next to each other, 3 wide like I wanted.
Solution- I first started by trying to mess with the code inside of the blogger but that didn’t help so Chris helped me try to figure it out and make a table in dreamweaver. However, posting the pictures in the table and then posting the html from dreamweaver didn’t work because it wouldn’t recognize the source. I ended up solving this by finding a code for a table for blogger templates and just inserting the pictures into that.
Problem-I couldn't find a facebook badge located in the available badges from blogger to link to the facebook group page that we have.
Solution-I found a website that offers all different designs for badges to website such as facebook, twitter, linkdin etc., (which is at http://www.iconfinder.com/). I then used the custom html gadget to import the facebook badge as an image and linked it to the URL of the facebook.
http://strangebrw.blogspot.com/
First I had to figure out how to host my word press theme off of my godaddy account.
This was found to be a difficult process at first. There are two seperate options that I am given at the beginning instalation, and that is to decide whether to use wordpress to host my site or another domain server. Since I am already paying for my site to be used on godaddy then I thought it would make the most sense to host it there. Also, from a edit-ability standpoint, it seemed as if templates become more customizable from this format.
After finding it to be difficult to make my wordpress compatible with my GoDaddy account I decided to host it on the Wordpress site and use the Wordpress Dashboard. Within the Wordpress Dashboard there are numerous options to edit anything from name to colors of the blog template that I chose. fcp 7 save
Problem solving log
-Getting my logo image to fit correctly so that it is not cut-off anywhere.
-I am worried about whether I am using the correct host for what I want the website to offer.
-It is in a blog host…but it is not a personal blog, is that okay? I want people to be able to share photos and videos on my website with forum ability.
-I have to provide all the content to start, as I am aware, and quite possibly will continue to provide unless girls really start kicking things off and getting edits in.
-image wise: I want the website to be very simple and I’m afraid Word press is going to just slam with weird fees whenever I want
will be working on the thumbnail image for nabbell today in photoshop.
-I can’t figure out how to download the Alba font from my hard drive and I just did it 2 weeks ago. Ugh. I ended up wanting to play around with the color or the logo and can’t make any headway.
Wednesday, April 25, 2012
Ankhet Mobile Problem Solving
Problem: I want to cache images, but not HTML
Solution: Modify headers sent from server for image data to clarify cacheability
Implementation: Not Done
Problem: Zoom works properly on iPhone but not on Kindle Fire
Solution: iPhone auto-creates a viewport from the beginning of the first visual component to the end of the last visual component. Kindle renders more or less like a desktop. Create a viewport for Kindle Fire.
Implementation: Viewport with minSize ~= 2.0 and maxSize ~= 3.0 with User-Scaleable = 1
Problem: mysql_real_escape_string requires a live connection to a mySQL database, so it can grab the character encoding. I don't have a mySQL database.
Solution: Use mysql_escape_string (deprecated, possible it'll be removed) or a dummy mySQL database with the same charset at the MSSQL database.
Implementation: Switched to MySQL 5.5 database backed by Sonic.net
Problem: Unable to use any mysql_, mssql_ or sqlsrv_ PHP functions with the default GoDaddy configuration (despite having databases for both mysql and MSSQL).
Solution: Switch somewhere that lets me finish my site.
Implementation: Call sonic.net. Get satisfaction in under 10 minutes.
Problem: Sonic.net doesn't support sqlsrv_ functions (linux based hosting) and mssql_ functions are deprecated.
Solution: Switch to a MySQL database, use the already extant mysql_ functions to interface with the database.
Implementation: see above.
Problem: default.php doesn't display at http://ankhet-mobile.net, instead a directiory of contents comes up.
Solution: Rename default.php to index.php.
Implementation: done (future: redirect index.php to default.php transparently, not done)
Problem: PHP pages are cluttered and contain large portions of if(bool) echo '[HTML CODE]';
Solution: Migrate HTML out of PHP
Implementation: Use include() to bring in HTML as needed, reducing page size, processing time and increasing readability.
Problem: HTML/PHP pages to be included are visible without being inside their including page.
Solution: Enforce inclusion over direct viewing.
Implementation: <?php if($_SERVER['PHP_SELF'] !== "[PAGENAME]") { header("HTTP/1.1 404 Not Found"); echo '<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML><HEAD>
<TITLE>404 Not Found</TITLE>
</HEAD><BODY>
<H1>Not Found</H1>
The requested URL '.$_SERVER['PHP_SELF'].' was not found on this server.<P>
<P>Additionally, a 404 Not Found
error was encountered while trying to use an ErrorDocument to handle the request.
<HR>
<ADDRESS>Apache/1.3.41 Server at [SERVER] Port 80</ADDRESS>
</BODY></HTML>'; exit; } ?>
Problem: Sessions dying on every page, requiring new login.
Solution: session_start() must be on every page.
Implementation: Put session_start() just after <?php in most cases, or use ob_start()
Problem: Sessions persist forever.
Solution: Add logout button
Implementation: <?php
ob_start();
session_start();
session_destroy();
header("Location: [FRONTPAGE]");
ob_end_clean();
?>
Problem: Registration and some other abilities need to be restricted to testing only.
Solution: A debug variable, put somewhere it'll always be available.
Implementation: Wrap the abilities in question in if (AnkhDEBUG) {} and define() AnkhDEBUG in ankhetdb.php as it's included on every page.
Problem: Registration dumps you back on the main page with no indication your registration worked
Solution: Auto-login if successful.
Implementation: Change $returnVal to an array() with [0] being success and [1] being message. If [0] start_session, header location: index.php else continue on register.php, displaying [1] as appropriate.
Problem(s): Lots of problems with getting data into the table.
Solution/Implementation: Print the query being sent, debug debug debug, make sure of use ` instead of ' when referring to MySQL tables/databases (MySQL idosyncracy)
Problem: game.php needs to require login
Solution: Check if user is logged in, otherwise redirect
Implementation: Check if a particular session variable exists, if not use the above header location: technique to redirect to index.php for session start.
Solution: Modify headers sent from server for image data to clarify cacheability
Implementation: Not Done
Problem: Zoom works properly on iPhone but not on Kindle Fire
Solution: iPhone auto-creates a viewport from the beginning of the first visual component to the end of the last visual component. Kindle renders more or less like a desktop. Create a viewport for Kindle Fire.
Implementation: Viewport with minSize ~= 2.0 and maxSize ~= 3.0 with User-Scaleable = 1
Problem: mysql_real_escape_string requires a live connection to a mySQL database, so it can grab the character encoding. I don't have a mySQL database.
Solution: Use mysql_escape_string (deprecated, possible it'll be removed) or a dummy mySQL database with the same charset at the MSSQL database.
Implementation: Switched to MySQL 5.5 database backed by Sonic.net
Problem: Unable to use any mysql_, mssql_ or sqlsrv_ PHP functions with the default GoDaddy configuration (despite having databases for both mysql and MSSQL).
Solution: Switch somewhere that lets me finish my site.
Implementation: Call sonic.net. Get satisfaction in under 10 minutes.
Problem: Sonic.net doesn't support sqlsrv_ functions (linux based hosting) and mssql_ functions are deprecated.
Solution: Switch to a MySQL database, use the already extant mysql_ functions to interface with the database.
Implementation: see above.
Problem: default.php doesn't display at http://ankhet-mobile.net, instead a directiory of contents comes up.
Solution: Rename default.php to index.php.
Implementation: done (future: redirect index.php to default.php transparently, not done)
Problem: PHP pages are cluttered and contain large portions of if(bool) echo '[HTML CODE]';
Solution: Migrate HTML out of PHP
Implementation: Use include() to bring in HTML as needed, reducing page size, processing time and increasing readability.
Problem: HTML/PHP pages to be included are visible without being inside their including page.
Solution: Enforce inclusion over direct viewing.
Implementation: <?php if($_SERVER['PHP_SELF'] !== "[PAGENAME]") { header("HTTP/1.1 404 Not Found"); echo '<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML><HEAD>
<TITLE>404 Not Found</TITLE>
</HEAD><BODY>
<H1>Not Found</H1>
The requested URL '.$_SERVER['PHP_SELF'].' was not found on this server.<P>
<P>Additionally, a 404 Not Found
error was encountered while trying to use an ErrorDocument to handle the request.
<HR>
<ADDRESS>Apache/1.3.41 Server at [SERVER] Port 80</ADDRESS>
</BODY></HTML>'; exit; } ?>
Problem: Sessions dying on every page, requiring new login.
Solution: session_start() must be on every page.
Implementation: Put session_start() just after <?php in most cases, or use ob_start()
Problem: Sessions persist forever.
Solution: Add logout button
Implementation: <?php
ob_start();
session_start();
session_destroy();
header("Location: [FRONTPAGE]");
ob_end_clean();
?>
Problem: Registration and some other abilities need to be restricted to testing only.
Solution: A debug variable, put somewhere it'll always be available.
Implementation: Wrap the abilities in question in if (AnkhDEBUG) {} and define() AnkhDEBUG in ankhetdb.php as it's included on every page.
Problem: Registration dumps you back on the main page with no indication your registration worked
Solution: Auto-login if successful.
Implementation: Change $returnVal to an array() with [0] being success and [1] being message. If [0] start_session, header location: index.php else continue on register.php, displaying [1] as appropriate.
Problem(s): Lots of problems with getting data into the table.
Solution/Implementation: Print the query being sent, debug debug debug, make sure of use ` instead of ' when referring to MySQL tables/databases (MySQL idosyncracy)
Problem: game.php needs to require login
Solution: Check if user is logged in, otherwise redirect
Implementation: Check if a particular session variable exists, if not use the above header location: technique to redirect to index.php for session start.
Thursday, April 19, 2012
Tuesday, April 17, 2012
Creating a customized map that you can embed in your website
Cool video tutorial for customizing Google maps -- which can then be embedded in your site:
Tuesday, April 10, 2012
Kirby - Problem solving log
Problem: Background image is distorted
Solution: Took a better picture with a higher resolution and cropped it in photoshop.
Problem: I'd like to make a page just for photos maybe using flickr.
Solution: I created an account and embeded it in the site. http://www.flickr.com/photos/77619906@N06/sets/72157629893824355/
Problem: Make the map of the route a google map.
Solution: Used the My maps application on google and created an interactive map of the route. http://www.youtube.com/watch?v=TftFnot5uXw
Then I adjusted the width so it matched the width of the picture that displays below it. <iframe width="508".
Problem: My boarder in the Right Div tag needed to blend better with the background but we could not change the opacity with out changing the opacity of the entire div.
Solution: Using the eyedropper tool on photoshop we were able to make a background for the boarder and set the transparency to 85%. It worked well and did not effect the transparency od the text and images in the div.
Problem: Easy to fix but, I wanted the water horizon in the picture on the home page to match with the background image.
Solution: I just adjusted the margin-top to 63px in the left and right Div tag. It seemed to be as close of a match as possible.
Solution: Took a better picture with a higher resolution and cropped it in photoshop.
Problem: I'd like to make a page just for photos maybe using flickr.
Solution: I created an account and embeded it in the site. http://www.flickr.com/photos/77619906@N06/sets/72157629893824355/
Problem: Make the map of the route a google map.
Solution: Used the My maps application on google and created an interactive map of the route. http://www.youtube.com/watch?v=TftFnot5uXw
Then I adjusted the width so it matched the width of the picture that displays below it. <iframe width="508".
Problem: My boarder in the Right Div tag needed to blend better with the background but we could not change the opacity with out changing the opacity of the entire div.
Solution: Using the eyedropper tool on photoshop we were able to make a background for the boarder and set the transparency to 85%. It worked well and did not effect the transparency od the text and images in the div.
Problem: Easy to fix but, I wanted the water horizon in the picture on the home page to match with the background image.
Solution: I just adjusted the margin-top to 63px in the left and right Div tag. It seemed to be as close of a match as possible.
A Granelli completed home page
AG Photo-Design
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.
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.
Thursday, April 5, 2012
Video 2012-04-04
Here's a link to a live stream of PENGUINS! Watch as much or as little as you want: http://dsc.discovery.com/tv/frozen-planet/penguin-cam/
Tuesday, April 3, 2012
Class-Assignment: Due dates for the This Month
A week from today - on Tuesday, 4/10 – you have to be prepared to present your website-in-progress. We'll put it up on screen, and give you some feedback. Your homepage, at least, must be completed, with a functioning nav bar, and all images and text finalized.
A week from then, on Tuesday 4/17, you must have all the written content for your static pages finalized, and all your images assembled. You will turn the writing in as a printed word document.
The following week, on Thursday 4/26, a draft of your website with all the static pages in place, with text and images, is due. I'll take a look at the sites during that class.
This is how your final grade will break down
25%: Class and blog assignments (assignments to date)
75%: Your final website
That latter 75% will be composed of the following:
15% your "problem solving" log, due at the final
15% your Tuesday 4/10 presentation
15% your Tuesday 4/17 delivery of website content
15% your Thursday 4/26 draft of your site
15% your completed and polished website, due at the final
A week from then, on Tuesday 4/17, you must have all the written content for your static pages finalized, and all your images assembled. You will turn the writing in as a printed word document.
The following week, on Thursday 4/26, a draft of your website with all the static pages in place, with text and images, is due. I'll take a look at the sites during that class.
This is how your final grade will break down
25%: Class and blog assignments (assignments to date)
75%: Your final website
That latter 75% will be composed of the following:
15% your "problem solving" log, due at the final
15% your Tuesday 4/10 presentation
15% your Tuesday 4/17 delivery of website content
15% your Thursday 4/26 draft of your site
15% your completed and polished website, due at the final
Subscribe to:
Posts (Atom)