Website Development Project

OBJECTIVE: Create a personal website to link to my various social media.

My Plan (Learning Contract): — 10/10 points.  This contract is extremely agressive in its scope.  I plan to learn 5 languages AND build my own website in 10 weeks. Here are the languages I plan to learn.

  1. HTML5
  2. CSS
  3. XHTML
  4. JavaScript
  5. JQuery

The real challenge for me will not be figuring out how to adapt the code to my website, rather I will find it hard not to be constantly wanting to tweak small things to make it look better.  At least I have established week-by-week milestones to help me stay on task. 

Step 1 (Feb 1) — Discovered an attractive web layout.  Right now, I’ve learned about some basic HTML principles from Head First HTML, chapters 1-3:

  • HTML Code for Step 1 (Save Link As)
    • Modifications of HTML Tags, Attributes, & Values
      • body background
      • text size (heading)
      • text color
      • margins
      • paragraph
      • image size
        • pixels
        • percentages
      • image border
      • image padding
      • image reference (hyperlink/anchor)
      • line break
      • unordered list
    • Grade = 9/10 point. I modified 10+ pieces of code I learned this week.  I’m taking a point off for tardiness.

Step 2 (Feb 8) —This week is all about CSS.  I’ve removed all of the in-line styles from the HTML and made them look pretty in the head.  I’ve created a mockup of my website.  First on a whiteboard, then using balsamiq.  I’ve also learned some more basic HTML principles from Head First HTML, chapters 4-7:

  • HTML Code for step 2 (Right click; Save link as)
  • CSS Code (Right click; Save link as)
  • Modifications of HTML Tags, Attributes, & Values
    • <a title=””> attribute — allows the author to include tool tip pop ups for <a href>s.
    • <a id=””> as a destination anchor — Now I can create a table of contents if I want to.
    • <a target=”_blank”> attribute — tells the user’s browser to open a link up in a new window.
    • […]#[id name] — used at the end of an href to find a destination anchor.
    • <img> element — I added an image to my page.
    • <img alt=””> attribute — used just in case the image doesn’t load; the viewer will know what was suppose to be there.
    • <img width=””> — default is the original dimensions of the image. But it pre-loads if you define it in the HTML.
    • <img height=””> — if you don’t want objects fixed, use percentage instead.
    • CSS Stylesheets — I moved from inline CSS to placing it all in the header, to moving what I can to a style sheet.
  • Grade: 10/10.  Although I read about 300 pages, I didn’t do as many modifications as I did last week, but I still feel like the above modifications demonstrate “10 points” worth of progress.  Next week I plan on working out the questions I have in the developer notes and making a style sheet for my CSS.

Design BluePrint (10/10 points)

  • Purpose: The goal of this site is to create a single space for people to link to all my various social networks.  Right now, I have different sets of followers for each of my various profiles.  This way, I’ll be able to connect them all and visitors will have a more holistic view of who I am and what I do.  It is also an opportunity for me to practice my new (X)HTML, CSS, Javascript, and JQuery skills.
  • Approach: Identify what technology(ies) you will use to create this project. In addition, clearly define the paradigm of your learning tool (e.g., game-based, hyperstack, review, simulation).
  • Flow: The following blueprints, created using Balsamiq, show a site map and flow of how users will progress through my website.
  • Function: The blueprints should be self-explanatory.  Essentially, you click on either an icon or a site link to be sent to one of my social networking pages.  The navigation system is static at the bottom of the page.

Step 3 (Feb 15) — More Advanced CSS features.  I finished reading Head First HTML & CSS with XHTML.  All 706 pages of it.  Yes!

  • All pages are now built and linked together (Yay! It’s a legitimate website now!)
  • Figured out to create box-shadows for my social icons.
  • Learned how to modify gradients for background using CSS.
  • Grade 9/10  (Although they are not as many modifications this week, the changes that I did make really pushed me!)

Step 4 (Feb 22) — Although I didn’t finish studying everything I wanted to in CSS, I moved on to Javascript this week.  I did the first 2/14 lessons, when my contract stated that I should do 5.  I found that if I stuck to my contract, I didn’t have time to find and implement the code specific to my website.  As I progress, instead of doing every exercise chronologically, I’d like to do internet searches (W3schools.com, or stackoverflow.com) for the types of things I’d like to do, find the solutions, modify them, and finally go back to my original resources and learn them more thoroughly with any remaining time.

Accomplishments this week:

  • Site concept redesign!
    • I want to make it into a merit badge sash!  (All of my icons look like badges anyway.)
    • Why don’t I just create a sash in Adobe PS.
    • Then add a little of embroidery around the icons in PS also.
    • (Not this week) Then add some shadow to the patches using javascript (I think).  And it will look totally cool!
    • (Not this week) When you hover over the patch a description of the site will pop up with an iframe and additional info of the type of things the user will find on that medium.
  • I want to learn how to adjust an object’s border radius, allowing me to create circular images that animate.
  • I want to learn how to redefine the CSS cursor property to make my own cursor.
    • div {cursor:url(boyscout.gif),url(fleur-de-lis.cur),auto;}

Grading: 5/10.  I decided to meet an old friend for lunch in SLC instead of working on this to finish it before the deadline tonight (Friday).  I knew I was taking a girl to her school prom right now, so I don’t have anything really to show for my work, other than doing two Javascript exercises at Code Academy.  I will work on it tomorrow and resubmit after I finish work worth 10/10 points.

Step 5 (March 1) — More advanced JavaScript!  See code here: Index.html.  Now that I get that what your looking for is a demonstration of my learning from the week instead of progress on my project, it gave me a much better idea of what to show you in the “index” file. 10/10 for the week.

function openPandora() {

	var points = prompt("Please enter the number of points I will be awarded for this week.");

	if (points === 10) {
	  confirm("I thought so.");

	} else {

	  var really=confirm('I didn\'t quite hear you.  By clicking "OKAY", you will give Bryan 10/10 points for this assignment.');

	  if (really==true) {
	  	alert("Well that was easy.  I guess I didn't have to code all those ELSE commands...");

	  } else {
	  	var nameNaughty=prompt ("Were are clearly going to have a problem here. I'm going to report you——May I have your full name please?");
	  	var stay=confirm("Well, " +nameNaughty+ ", if you don't give me full credit, as website admin I've done all I can do to help you make your decision; I will be forced to Rick-Roll you. Last chance: Click 'ok' to award me 10 points, or 'cancel' to be Rick-Rolled!")
	  	if (!stay)
	  	window.location="http://www.youtube.com/watch?v=oHg5SJYRHA0&feature=youtu.be&t=1s"

	  }

	}
}

Step 6 (March 8) — It’s game time this week.  Not one, not two, but FOUR games for you to enjoy!  (Rock, Paper Scissors is being buggy, so I’ll see if I can optimize it in the next few hours.)  I learned a ton of Javascript this week.  Here’s a screen shot of my progress at Codeacademy.com:

Codeacademy Javascript

I covered the following concepts: advanced variables and functions.  I borrowed my code from some of the exercises and modified them for my website.  Here is my index.html file with all my code in it.

[PEER REVIEW of Michael Matthew’s work]

Step 7 (March 15) —  Oh my! Only three weeks left?!  I would be content just continuing through JavaScript tutorials for the rest of the years and doing small activities like the one’s I’ve done this week.  I feels like the longer I go down this path, the farther I find myself from my project’s end state.  If I want to get it done, I’ll have to abandon learning new things from these Code Academy exercises and focus entirely on pulling my website together.  I’ll have to jump off-contract to try to figure out how to manipulate my site into what I want.

Here’s an update on what I accomplished on CodeAcademy: 32+ exercises this week!  You’ll see in my index.html file that although I didn’t add any NEW games, I modified the current ones to reflect new understanding:

  • CHOOSE YOUR OWN ADVENTURE — I added the “var(!x)” command line to every decision so the user can end the function  when presented with a cancel button.
  • ROCK, PAPER, SCISSORS — I added a “pipe” statement (||) to the “var choice1) if condition.  This tells the computer to give a specialized response if the user enters anything other than the provided variables.  
  • GUESS MY NUMBER — I got  “math.random()” to work. Unfortunately, I spent 5 hours trying to figure out recursion on CodeAcademy so that I’d be able to re-run the within the function, but I never could figure it out.  (I’ll probably hit up StackOverflow this weekend and hope for a response by Monday.)
  • PANDORA’S BOX — Added some quit calls to the code here to to break the function instead of having to go through all the prompts.

POINTS AWARDED — Diez (or Dez for you Portuguese speakers).

JavaScript week 6

Step 8 (March 22) — This week has been very “focusing” for me.  I’ve moved away from trying to learn as many new things as possible in JavaScript and JQuery, and centered my attention on what I need to get done to give myself a passing grade on my website.  Here’s what I decided (which may change as time continues, for better or for worse depending on the time things take):

  • Just get all the elements on my my page using HTML.
  • Basic page manipulation:
    • Redefine my files structure to only include one additional webpage (“games”).
    • Use Photoshop to turn all my buttons into badges
    • Use CSS3 to tilt my sash
    • Create a button for my “Games” page.
    • Create a “fake scout” image.
    • Make the page dynamic, but not responsive (yet).
    • Make sure all the links work.
  • (I think that’s it.  That’s my B right there!)
  • Do at least 5 (mini) exercises/week in CodeAcademy.

This week was super tough.  I got sick and had tons of other projects that took priority over working on what I listed above.  Here’s what I did this week:

  • 4 exercises in  CodeAcademy
  • Nearly finalizing the games page (worked on in class)
  • Created this game plan
  • Checked all my links (still working—yes!)
  • Restructured my folder to reflect my new design.

My next steps will be:

  • Hit the HTML hard. I want to get all the finalized elements on the page next week.  Hopefully, I will remember enough CSS and JavaScript to be able to lay them out in a way that will require little tweaking.

My Score: 8/10

Step 9 (March 29) — This week was all about finishing my games.  I learned that “finish” is a relative term. If you look at my index.html file for this week, you’ll see additional features I still want to add to each of the games (commented out above the code for each).      So, the games work.  That’s going to have to suffice for “finished” for now.

I finished tinkering with the games after putting in a few more hours in addition to our class development time.  Now I’m all about fleshing out the site.  I found that I really struggled to remember CSS. I still can’t center those darn badges for the life of me.  I know it has to do with pulling in the class “center” or “centered” from the CSS page.  But it’s not working.  Also I need to figure out how to layer objects.  I created a sash texture and need to repeat it in a block.  (I’d like to do that in class on Monday.)

My grade for this week: 9/10

Step 10 (April 5) —

  • I continued studying JQuery and feel like I can identify what is happening in code, but still need practice to be able to do it on my own:

Screen Shot 2013-04-06 at 1.08.19 AM

  • I learned how to tile texture images (green patch).
  • I learned how to make images adjust to the div dynamically using both “float” and “inline block” code. (see patches)
  • I learned how to target a specific element (images) within CSS id tags:
</pre>
#iconContainer {
margin: 10 10 10 10;
background-image: url(../../Dev/Media_Bryan/graphics/Green-Patch.jpg);
border: 2px dotted #fff; /* whited dotted boder*/
padding:10px 10px 10px 10px;
width: 90%;
margin: 0 auto;
text-align: center;
}

/* Learn more from Grant about Media Queries to target mobile devices. */

#iconContainer img {
width: 200px;
height: 200px;
display: inline-block;
<pre>

I’ve attached bryan.css, game.html, and index.html for you to view their connection.  (Just put them in the same root folder.)

FINAL ENTRY:

Here is the temporary address to my website: http://byuipt.net/560/W13/bryan_tanner/

I’m very pleased with what I accomplished this semester.

The site is operational!

  • I have a  “splash page” or introduction — index.html serves as my splash page.
  • I have two  connected webpages (making it an official website), linking “index.html” to  “games.html“.
  • I have added an animation to the index.html page using a JQuery-operated button to toggle the appearance/disappearance of the social media sash.  Unfortunately, there is a bug.  I can’t figure out why it takes two clicks to open the sash.
  • This week, I learned the process hosting data on Dr. Rich’s BYUIPT FTP webserver — The lucky guy who owns the domain name “bryantanner.com” never responded to my emails and updated his account only hours before it expired.  My hopes were high and then crushed.  I suppose I’ll have to think of another domain name for now.
  • I succeeded in my fulfilling my to goals listed in this personal learning contract (PLE):
    • I created a single site that unifies all of my social media.
    • I learned to use functions and variables in the context of a number of computer languages— My games page is FULL of javascripted functions and variables.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s