Friday, May 31, 2013

Everyday Code in Every Day!

"Today is yesterday's tomorrow" filled with code.

Welcome back my friends... This post today is dealing with the fourth challenge on the P2PU network. I have to say that I really enjoyed this challenge, and found it to be a "breath of fresh air" in dealing with a task.

The first part of this task was a bit monotonous, but that's primarily my own fault. The first part of the task requires that we look-up a series of tags, and figure out their individual definitions. I took it a step further... I wrote out every tag, and their respective definitions, below you will find a complete list of the tags we had to look-up. If you're AWESOME, you'll look them up too if you don't already know them! ;-)

The challenge of Tag-Look-up:

  • <div>
  • <blockquote>
  • <p>
  • <ol>
  • <ul>
  • <li>
  • <nav>
  • <menu>
  • <span>
  • <time>
  • <q>
  • <img>

Check-out this super-awesome time eating Journal entry for the above tags

Now... On to the part of this challenge that I found to be "creative", and entertaining. The second part of this challenge was to find something that could be a representation of each tag above, and then take a picture of it. Below are the pictures, and my reasoning as to why each picture could be a "real-world" representation of how to use the above tags.

"The true sign of intelligence is not knowledge but imagination." - Einstein

  1. <div>
  2. I took a picture of my coffee mug because I could see the diamond boarder being a representation of how the tag <div> could be used.

  3. <blockquote>
  4. You'll have to forgive this photo... I think it still represents a block-quote, but it's not the most "original" of pictures in this list. Here is a snippet from one of my "PCWorld" magazine.

  5. <p>
  6. I picked this next picture because of the individualized instructions on the back of my coffee-press. I can see how this could be a representation of <p>.

  7. <ol>
  8. I felt that these pictures showed an excellent representation of the different ways a <ol> tag could be used. I chose these because of the Ordered list of 1 - Whatever, both represented by numerical and Roman numeral.

  9. <ul>
  10. This cast-iron tea cup on top of my fridge worked out perfectly (In my not-so-humble opinion -- lol) for the representation of <ul>. Notice the "bullet" like texture?

  11. <li>
  12. I found that this little grate located on the wall made an excellent concept for a list-interval.

  13. <nav>
  14. Here is a bit of an abstract take on the <nav> tag... I think this is an accurate representation because it shows one part of the guitar being connected to another part of the guitar by the strings. The <nav> tag represents two points being connected whether it be at a different location or on the same page.

  15. <menu>
  16. The map of "America" is another abstract take on something, the <menu> tag. This representation depicts an unordered list of cities inside of states. The idea of a menu is something that portrays value within something else. I feel this is an accurate representation for that very reason. There is something of value in each one of these listed locations.

  17. <span>
  18. I chose to represent this tag in a number of ways... First, I'm sure by now you've noticed the alternation of red and white... I've used that to represent a form of <span>, and <div>. Second, the picture below shows two forms of <span>, my dog's (Dutch) fantastic coat, and the multicolored mat underneath him -- Pretty cool huh?.

  19. <time>
  20. Father time has an interesting way of showing his ugly head... For me it's usually in the form of another "Ohh Crap" moment... You know, when you stay up a little too late, and you've got to be to work in two hours.. Yikes! I chose to represent the <time> tag by displaying a picture of my microwave time at 3:26am. Luckily I don't have to work today! Whew..

  21. <q>
  22. I thought this was a perfectly clever representation of the quotation tag.. If you notice, the background pictures in this graphic are cited by the bright red lettering of "London".

  23. <img>
  24. Every since I was little I've always been fascinated with planes. That's why I chose this picture from my hallway as my <img> tag representation... I think this is pretty explanatory, but if not... an <img> tag represents a picture, and here is a picture!

I know, my mind works a little weird, but I hope that I've explained things in a way that makes sense, and you can see how I would come to the conclusions that I did. Let me know what ya'll think!

*Note-All images are original works, and were not copied from anywhere. I took the time to take every picture, and edit the picture... You should too!

Vive

-- Red Squall

Wednesday, May 29, 2013

If you code, they will show.

The showing of thy tiny webpage!

Hah, by now I'm sure you're absolutely enthralled by my witty tittle's, and catchy headings. Not to worry, I still have a lot of "corny-ness" to share with everyone! ;-)

So tonight has been an eventfully productive night. I have completed the 3rd challenge in a long series of challenges. This most recent challenge involved text editors, and choosing one that works best for you (me). Then typing out the hand-written code from the previous challenge, and seeing if it works once saved.

I have previous experience in Notepad++ so that was the one I originally decided to use. This editor has a lot of functionality and you can also change the appearance and feel of the editor. After typing up the code in Notepad++ I developed a curiosity. I'm currently using Windows 8, so I have the Windows 8 marketplace accessible through my computer. I did a quick search through the marketplace and stumbled upon an app call "Code Writer". This app had great reviews and could handle what I would be using it for (HTML / CSS) so I decided to go ahead and give it a go. I downloaded the app, selected the document type that I wanted (HTML), and it pulled up an editor for me. The cool thing about this editor is that it already had the basic framework already entered for you.. All you really needed to do was enter the additional code that you wanted.

After typing the hand-written code out in both editors I saved both files, and then opened them both in the browser to see how they were displayed and if there was any variance between the two.. There wasn't, they both displayed the exact same thing the exact same way. I think I kind of like the "Code Writer" more than Notepad++, but I think the later actually has more functionality. Only time will tell I think!

The finished product.

Hasta la próxima mis amigos - Manténgase Innovador!

--Red Squall

Tuesday, May 28, 2013

Coding from the glorious hand.

Pen in hand.... and GO

After my brief stint in Destin, FL, this past four day weekend I have finished another challenge… What was I doing in Florida you ask? Well… I was exploring the exotic and foreign land of “The Beach”, tasting the local cuisine, camping, and even managed to get in two diving sessions at the Destin beach “Jetties” (Thanks for the rental equipment, and fun atmosphere Emerald Coast Scuba).

Don’t fret; I wasn’t completely lazy and unproductive. I managed to take a screen shot of the assignment (No Internet), and I completed the writing challenge while lounging on the beautiful white sands of “The Emerald Coast”.

I didn’t find this “challenge” too challenging… In fact, I had the framework memorized after the first time writing it out. I went ahead and completed the challenge, and wrote for the full 15 minutes. I did get more out of this challenge than I thought I would though.. One of my buddies that went with me on the trip saw me writing, and asked what all of my “scribbles” meant. I had the pleasure of explaining what each element was, and walking him through the process of what I was trying to accomplish.

Till next time my friends - Stay Innovative!

-- Red Squall

Saturday, May 25, 2013

The Beginning

Welcome to my adventure in learning.

Hey, thanks for stopping by and taking a "gander" at my blog... This is the first post in a series of many that will detail my journey through learning HTML, CSS, and everything else that has to do with "Webmaking" or becoming a "Webmaster". Also, just to throw it out there... All of these posts will be done in HTML (to better my understanding of the "art").

A little bit about me... Well, I'm 29 years old until January--2014, from the Dallas area, and currently living in Alabama (Long story)... I've been working in the "IT" realm (Tech Support) for the past few years now (3 years), and I've decided it's time that I learned to code.. So I'm going to start from the bottom and work my way up to the more advanced stuff.

I am utilizing a number of free web-based learning centers... The first is CodeAcademy, and the second is P2PU a project from Mozilla. One of the first tasks in the P2PU is that I setup this blog to document my "road to triumph"... Either way, I'm here, and I think it's a great idea. If you have any ideas or suggestions / recommendations for me I would love to hear them.

Till next time...

--Red Squall