Embed The Fact That I Finished

     I have made it back for another week! Not that I went far. I did venture out into meatspace a few times. Don't worry, I have virus protection (read Kleenex) and no one got hurt. The cool news is that I finished the XHTML/CSS section of the class! Now it's onto .js! I've been using Sublime Text 2 on the XFCE partition on my Chromebook and it's been so nice to use it, but Brackets has proven itself great when it comes te HTML/CSS so I think I'll use Sublime Text 2 mainly, but if I have something that is just HTML/CSS then it'll totally be Brackets. On Wednesday, expect some .js. Today I don't have Grooveshark going(such shock!!) Instead I'm listening to a live-stream of one of my favorite radio stations. Listener-supported FTW! I already had my coffee(French-press of awesome!) and the music is going so it's time to plug in and plug away!

HTML/CSS

      Today the first thing we're going to start off with some easy stuff; templates, and CMS's. CMS stands for Content Management System. That's a fancy way of saying pre-made website. CMS's are sometimes a good thing to use if you just want to create something really quickly, or it's a simple website for just a few things, and you don't think that you're going to be changing a lot, for example, a blog. There are a lot of free ones out there, but they aren't always the best, because; they are usually limiting, they're pretty much a template that lets you cheat. www.freecsstemplates.org is a good place to go to check some of them out. Something I forgot to cover in the forms section, is the <label> it is used to identify elements inside a form, but really you can use it any time you want, but it seems it's handy in that type of thing.

     Now we get to the embedding section. Embedding is pretty much just like linking, it just creates its own little space that shows whatever you're trying to link to. Here is an example of YouTube:

<iframe width="560" height="315" src="http://www.youtube.com/embed/P3Of6vsIIA8" frameborder="0" allowfullscreen></iframe>

 The way you get the embed code, you just go to the 'share' section of the video, and either use the code right there, or select a size or do a custom size (the size can always be changed in the editor) and put the code where you wont it. One thing you have to know about this is that YouTube changed its code requirements, but of course their embed code didn't change. So, you have to add an http: in front of the //www. in the src. Even though it's a video and not text,  use text-align to  align it how you want.

     Google maps looks a little different now that they've taken the new Maps out of Beta(it looks so good on my Pixel's screen), you just click on the settings gear and you'll have the option to embed and all the things you need.
 With Twitter, you have to click on the three dots and it gives you embed. Twitter has a lot of way to embed. Go here for all the info about how to do widgets and all the things you can do with Twitter.

A little pro-tip for when you're working on creating your website:
Keep your different file types in their own folders/sections makes it easier to manage things and remember to save periodically. That way it's just easier to manage.

We have discussed the different types of things you can do to a link before, but there's an order to them so that they don't cancel each other out or cause some hinkery that gets annoying fast. When you do the active, visited, hover, link tags on a link  make sure to have them in this order: link, visited, hover, active. That way you can have different colors for different activities, and they won't overwrite themselves. You don't have to use any/all of them if you don't want to.

Last, but not least, we have the favicon. The favicon is the little picture that shows up in the tab. Sometimes it's just a piece of paper with a folded corner. That usually means that they didn't set up a favicon. The best place to get one is to go here. You can upload any image, and it will give you a favicon in .ico and .gif form. The .gif just scrolls constantly. If you use that, I will judge you.
The way to implement it is like this:
<link href="images/fav.ico" rel="shortcut icon"></link>

You just put it by your meta tags and your CSS tag at the top in the head.

And that's it for today! Today(3/24/2014) at 7:06pm I finished the XHTML/CSS section. Only took ten days! Whoo!! I powered right through it! Which just means I'll slam right into .js tomorrow. I'm sure that makes some of you happy. See y'all on Wednesday!

--Martin

All-In-One Flip!

     There's new things! Olé! Well, new(ish). The other day I sort of had a break through. I'm still figuring out if it was good or bad, but that's not too big a deal. I was perusing the internet, as is my wont, and found many amazing places that do .js bootcamps, tests, free books. Many amazing things! And what they all told me is that I have seen a lot of lessons, but haven't really retained as much as I should. Which is sad. So, to combat this, I'm going to start creating stupid little program that use all the things I should know. The main problem is, I know what they are, I know what they do, but I haven't used them in anything besides following instructions. So, I'm going to create some small script things, and figure things out! So, what you'll see on here is stuff I came up with, if it's overtly simplistic, that's because (as the title says) I'm a total newb. I don't have any problems with that, but I don't want to be a total newb for too long. That would mean I'm not learning anything. Which would be sad. For today, I'm going to do the .js, HTML and the CSS all on one thing. I know! Crazy, right? I found a couple lines of code that make text flip around. If Blogger was able to use CSS as well as HTML I would show you and it would be awesome! But, instead, we shall look over the code in this all in one special! It's a Friday, so I'm at the coffee shop, I've had my coffee, Grooveshark is going, time to plug in and plug away!

 JavaScript&&HTML/CSS 

      The first thing we need to do is look at the code, obviously. So, here's the HTML: 
<html>
  <head>
    <title>Hey, wassup.</title>
    <script type = "text/javascript" src = "script.js"><!--script for the .js -->

    </script>
    <link rel = "stylesheet" type = "text/css" href = "thing.css"/>
     
  </head>
  <body>
      <!-- put whatever you want to here. -->
<p>Hey, this is a line of text with a border!</p>

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <!-- front content --><span>Hey,</span>
        </div>
        <span class="back">
            <!-- back content --><span>do you even <a href = "http://www.google.com"><g>G</g><o>o</o><t>o</t><h>g</h><l>l</l><e>e</e></a>, bro?</span>
    </span>
  </body>
</html>










Not exactly the cleanest layout, but it does some pretty nifty stuff! The thing with the bunch of tags in a row spells out Google and the CSS makes it turn into the Google colors. A little touch of fun, you know?
Speaking of CSS, here's the CSS:


p{
    clear: both;
    text-align: center;
    border-radius: 50%;
    border: 10px solid black;

}

a{
    text-decoration:none;
}

g{
    color: blue;
}
o{
    color: red;
}
t{
    color: yellow;
}
h{
    color: blue;
}
l{
    color: green;
}
e{
    color:red;
}


/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

The code s commented quite nicely so that you may understand it easily. The basic idea is that it's activated by the mouse and once you go below the div, it flips over. 

Now, if you noticed, which I'm sure you did, there was this:  

<script type = "text/javascript" src = "script.js"><!--script for the .js -->

Which my comment tells you about. Yesterday I found something I probably should have known about a looonnngg time ago!
document.write()

It writes to the, you guessed it, the document! Whoo!
So, today, I just did a simple line of text, and a FizzBuzz, because those are fun:

document.write("&nbsp;Hey this is a thing, now! You can write with .js! <br />\
 and have it print out to the webpage.<br /> I knew that was a thing. <br />\
 I just couldn't find it till now!<br />");

 for(var i =1; i<=71; i++){
      if(i%15===0){
        document.write("FizzBuzz <br />");
      }else if(i%3===0){
        document.write("Fizz <br />");
      }else if(i%5===0){
        document.write("Buzz <br />");
      }else{
        document.write(i + "<br />");
      }
    } 

Also, notice the fact that both &nbsp; and <br /> are used in the .js text. Yup, that's right folks, you can use those HTML elements in .js text. Pretty nifty, if I do say. 

     All of this texts makes for a pretty lackluster page with a spinning dealie on it. Told you the scripts were going to be stupid. Expect better each time! Well, that's what I'm hoping. Next time I'm going for a better looking page with more spinning and motion!!
See y'all on Monday!

--Martin

Happy Birthday Internet, I failed you.

Dear internet,

     I have failed you. I got nothing done today. I should have been able to, but I overslept and missed my window of opportunity. And then I got distracted... typical terrible day for me here. I then had to drive all over. Now I'm in Dallas hoping to get some studies done.  Also, today is the birthday of the internet! Yay me for failing it on its birthday... But, in lieu of nothing .js/HTML/CSS to write about, I thought I'd write about my beginning experiences with the internet and its included technology. Basically a copy pasta from G+ that I did earlier today, plus a few flourishes. Here goes:

     I was born the same year as the internet, but my birthday is not until November, so I'm not one of the cool people that was born today twenty five years ago. Unlike a lot of people my age, I remember the first time I heard about the internet. The main reason for this is that my family didn't have internet or even a computer till the year 2002-2003 before that we had to go to the library to access the internet. I was about seven the first time I heard about the internet from my oldest sister. She told me about how I needed to go to the big blue E(IE) and then type in yahoo.com and then from there I could search for things. I didn't really do much for a long time, the games were stupid, you had to stand the whole time, there were a lot of loud, whiny kids that, like me were trying to figure things out. This was back when I was somewhat of an introvert, so loud people was not really my thing(still isn't really) I didn't really start doing anything until (again) my oldest sister, who had now moved out and gone to the Navy, gave the family an old computer that she no longer needed. Using dial-up the family would do their emails and my mother would write on there instead of the Word Processor she had before. My parents didn't want me to use the computer and instead forced me to go outside, or read a book, or something. This new technology couldn't be good for a young mind like mine. However, I am somewhat of a rebel(not because I live in Texas btw) and learned the dial-up password(this was in the days when you had to sign into the internet yourself) I tested it at midnight, and woke my brother up from all the dial-up sounds. He made me go back to bed, but I had the password! from then on I would sneak as much time as I could on there. My mother, being the wise old soul that she is, soon figured out that I was sneaking onto the computer. Of course, she thought I was looking at porn and such (that didn't come along till later) mainly because this was the time when the news stations were freaking out about how porn would kill the fertile minds of the youth of America. I just wanted to play games and learn everything I could about how it worked. But, my mother would hear none of it; she started by hiding essential(or so she thought) parts of the computer. Hide the keyboard? learn that there's an on-screen keyboard. Hide the mouse? learn keyboard shortcuts, that you can use the number pad to direct the pointer, and that tab comes in handy all the time. Hide the power cord? make a new one. Really, what I'm trying to say is that there really wasn't a way to keep my offline. But my mother tried her hardest. My father didn't really have an issue with it as long I wasn't on there all day. He also was the one who found me looking at porn when he came home early. "I clicked the wrong link" only worked the first time. The internet and I have had a long and tumultuous relationship. I've known the world without the web, but that's only because I wasn't allowed to know it until much later than most. Today, as you can see, I'm still trying to learn how things work. I'm way behind, and have a lot of catching up to do, but I'm not planning on stopping. As much fun as Reddit and all those meme sites are, I just ignore them (usually) and now I need to learn so much! But, unlike some, I want to learn. I want to know as much as I can! Right now it's just .js and such, but once I get those down enough, I don't plan on stopping there. As long as technology exists, there will always be something new to learn. So, sock it to me baby, I'm ready and willing!

--Martin