26 March 2013

Philosophy of "Home/Mobile" Question

To get here, I believe you might have had to pass through something which looked like this:

I know that there is a code which will inform the computer about the device trying to access the page.  And that the computer can then decide which version of the site to display.  There are tons of examples of code which can do that.  

There are also an insurmountable number of devices and platforms, operating systems and screen dimensions.  It's impossible to optimize for all of them.  But they're designed to carry the same information.  And some are more popular than others but no matter what device you're using, it's pointed to the screen you see here. 

The philosophy of this question is basically this:  are you at home, or on a mobile device?  It's the same thing in computer language as asking "how are you doing?"  If you're looking at the site on a mobile device, it's probably because you are going somewhere.  Maybe you're looking for some basic information that I can try to present to you.  If you're at "home" then perhaps you are looking for a more in-depth experience.  I can bring that to you.

The Index page of a website should be a "Welcome" screen.  Houses without doormats have dirty floors.  Really nice houses have very decorative welcome mats.  So the index screen becomes an opportunity to do a couple things.  One, invite people with a flashy animation or a vivid photograph and a basic question.

And yes, this idea came from Videogames.  Almost every game I ever played began with a basic question.  What would you like to do?  From the beginning, the game anticipated your wishes. 

So with the Miyas Site, I went with a different form of question than the one that I typically use on my site.  I also built some custom graphics for it.  Those graphics were exported as 2 different files:




These two images are accessed with the help of a feature called "On Mouse Over."  That function has been around since Javascript, so it would have been possible in 1998 or even earlier, and it goes a little something like this:

<img src = "Buttons/Site.png>

The image is from a folder called "Buttons" and it's called Site.png (PNG is a graphics file).
The file for the image will now appear as it does above, in green.  That's the file called "Site.png"

I'm going to give this image object a specific name.  To tie it in, I'm going to name it "Site"
<img src = "Buttons/Site.png name = "Site">

When you click on it, it's going to hyper-refer (href) to a new page called "Home.htm"
<a href = "Home.htm">  <img src = "Buttons/Site.png name = "Site">  </a>

<a href = "Home.htm" OnmouseOver = "document.Site.src = 'Buttons/Site_Over.png'">

Now, when the mouse is over the image "Site" it will replace the document source to a different image. That image is called Site_Over.png (the image to the right) and it is the same words in different color.

Note the syntax.  This part is really important, because it might become confusing at times but it's important to remember a few simple rules in order to make computers work correctly.

Let's say you are talking about someone who is telling you something.  In English, it would look like this.

I was talking to Michael the other day.  He told me "Bun makes the most delicious sushi.  Everyone that I know says 'I love that place.'."

Syntax is important.  If you open a quotation, there are two marks, like this:  "
Whereas if you open a quote inside a quote, there is another mark:  '

Correct syntax is "First quote, 'Second quote.'."

And at the end you have .'." which is not morse code.  It's a period at the end of the second quotation to end the sentence, followed by a closed quotation.  Followed by a period to end the first sentence, and a closing quotation mark to end the quote.

Therefore if you can understand the complexities of English, then you can understand computer programming because it's really quite similar at times.  It's also like mathematics in the way that you solve for parentheses first, and you can use parentheses in math in a very similar way.

<a href = "Home.htm" OnmouseOver = "document.Site.src = 'Buttons/Site_Over.png'"
OnmouseOut = "document.Site.src = 'Buttons/Site.png'">

Don't forget to establish the OnMouseOut behavior, or it will not change back to the original color when the mouse moves away from it.

No comments:

Post a Comment