Monday, March 24, 2014

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