Creating My Own WordPress Theme: #1

I’ve set out on the path of making my own WordPress theme. I’ve quickly realised that it’s really going to test my skills. It involves HTML, CSS and PHP. I’d say I’m at beginner level for all of these, particularly PHP which I don’t know any of.

To help me with this task I’ve been reading and watching a number of different articles and videos on CSS-Tricks.com by Chris Coyier. If you don’t know who he is then I suggest you start by looking at some of his articles on CCS-Tricks. He use really up-to-date and clever techniques for developing websites. His tutorials and techniques are also very well explained, so it’s great for a novice like me. The videos I’ve been watching is are a 3 part series where Chris takes you through the design and implementation of a custom WordPress powered blog. You can see the first video by clicking here, the rest of the videos are linked on that page. One of the first things I noticed about his work is just how well presented his CSS is. Everything is commented in an easy and understandable way so you always know exactly what section of the page you’re working on. He also has the clever idea of commenting in his colour scheme at the top of his CSS document so he can refer to it whenever he needs it. These are definitely things I’m going to be doing going forward. I’ve also been following a very good tutorial over at ThemeShaper by Michelle Langston and Ian Stewart.

I’ve constructed a little mock up of my purposed theme using Adobe Fireworks. The reason for using Fireworks is because it provides great tools for aligning your objects and it allows you to cut you page into sections easily using its guide feature.  I’ve included a picture of my mock up at the bottom of this page (fig.1) as well as an image where I have left the guides visible (fig.2) so you can see how I cut up my page and align everything nicely. It’s really simple at the minute and I welcome any feedback on it, good or bad.

With my mock design done, I’ve stared to code it out in Dreamweaver. At this moment in time I’m just concentrating on building the page using only HTML and CSS because once I know how to do that comfortably then I know I’ll be ready to tackle a more complex design and move on to incorporating some PHP. Like I said before, I’m certainly no HTML or CSS master so sometimes I become confused about how to do different things. For instance, I knew didn’t know how to get my head section colour to run the full way across the page. When I first coded out the section it was just a big lump in the middle of the page, which is not what I wanted (fig.3). I want it to run smoothly across the full length of the browser. I fixed this by doing this:

#header {
padding: 0 1000px;
margin: 0 -1000px;
}

Although that did make the header run the complete way across the page it also gave me a sideways scroll bar which wasn’t ideal. I found a little trick to fix that though:

html body {
overflow-x:hidden;
}

By doing that it hid the sideways bar leaving my head section running the full length of the page. Just what I wanted (fig.4)! I’m sure there is probably a better way of doing that but it worked for me and hasn’t disrupted the rest of my page so that’s a winner in my eyes.

That’s really all I’ve done so far. Even at this early stage I’ve come up against a few challenges but I’m learning how to get around them which is the important thing. Hopefully testing myself in this way will pay off in the end. In my next post I’ll be describing how I coded out the main section which is already causing me some problems.  Oh and just before I go, I should mention that you can click to enlarge any of the images. Until next time!

WordPress Mock Up

Fig.1

Mock Up With Guides

Fig.2

Page With Wrong Header

Fig.3

Page With Right Header

Fig.4

 

 

 

Cosmo The God

Like most lads my age I play Call of Duty. I have a love hate relationship with it. I enjoy playing it from time to time but I find the more time I actually do spend with it the more infuriating it becomes. There has been times where I have had to turn it off through fear of a stroke. Anyway the point of this article is not to discuss how much I hate noob tubes and campers. You see if you don’t play Call of Duty then its hard to understand just how big the community around it is.  A lot of people earn money from COD, not just the developers and publishers, although they do make a lot! People play professionally and are sponsored to enter tournaments, which pay out big money. Others produce content on the internet, mainly in the form of YouYube videos. These people are called commentators or codcasters as Activision have cleverly entitled it. Its these guys that make some of the most money.

Commentators do videos of expert play and give tips and advice on how to play better. Some, as you can imagine, are a bit less helpful but never the less, these guys get some serious hits on YouTube and earn big money from advertising. SeaNanners is one such commentator with 1,394,929 subscribers and 235,662,970 video views (as of 06/12/12). Whiteboy7thst is another commentator with 1,625,152 subscribers and 474,604,837 views, making him one of the most subscribed to COD commentators (again as of 6/12/2012). Not quite Gangnam Style but still that’s pretty impressive for people who just play video games. If you would like to see just how fanatical there followers are then watch this. I honestly tried to pick out on single moment from that video as the ‘best bit’, rather then link the whole thing but I couldn’t, just watch it. I think clip 2 and 3 are the best.

I’ve been aware of these commentators for a few years but I can honestly say I have never really paid any attention to them until recently. In the run up to the Black Ops II launch, I started watching one commentator called WoodysGamertag because he had info on the game before it came out. One of his videos I found more interesting other. You can see it here. In the video he discusses how his Xbox Live account (the one he uses to make a living) was taken over by a hacker know as Cosmo The God.

Cosmo The God is hacker that brought down sites such as NASDAQ, CIA.gov, and UFC.com, he has redirected other sites to his own twitter account and wired.com has quoted him as “pioneering social-engineering techniques that allowed him to gain access to user accounts at Amazon, PayPal, and a slew of other companies”. These are no small feats.

After a multi-state effort from the FBI, Cosmo was brought to justice in June 2012. He was banned from using the internet for the next 6 years. I should mention at this point that Cosmo is only 15 years of ages. I was shocked when I discover that. Shocked a child had brought down major government websites and taken over seemingly secure accounts. His raised lawyer raised and interesting point saying he felt that his punishment was a little on the harsh side:

“…they could have locked him up for three years straight and then released him on juvenile parole… But to keep someone off the Internet for six years — that one term seems unduly harsh. You’re talking about a really bright, gifted kid in terms of all things Internet. And at some point after getting on the right path he could do some really good things. I feel that monitored Internet access for six years is a bit on the hefty side. It could sideline his whole life–his career path, his art, his skills. At some level it’s like taking away Mozart’s piano.”

-Jay Leiderman, a Los Angeles attorney

I don’t agree with what Cosmo did at all, but in some ways I can see what his lawyer is saying. If he was guided he could probably do something really good with his life but just how do you guide someone like that? If ta person is willing to take down government websites and stop people from making a living who is to say that if they got on the right path they wouldn’t regress?

Anyway I found this story interesting and I hope you did too. You can read the original article here if you like. There is also a longer more detailed article, that goes into specifics about how these hacks are done here. The longer article also gives an insight into the strange life that he leads.

Update: Since first sitting down to write this I have found that despite being prohibited from using the internet, Cosmo has actually used his knowledge to hack the twitter account of the Westboro Baptist Church. I don’t condone the hacking of anyone’s accounts but the WBC are not the nicest people and in my opinion, stopping there message of hate can only be a good think. Read the update here

Help Sheet

Below is a pair of links to “cheat sheets” or as like like to call them, “help sheets”. These sheets offer useful information regarding a ton of web tech, such as keyboard short cuts and code tags.

The top link is for an HTML5 cheat sheet which shows you new tags and tells you ones that are not in use any more.  The second link is to a whole host of different help sheets, ranging from Photoshop keyboard short cuts to CSS3 tags.

These help sheets are pretty useful if you’re new to this stuff. Although I will say that I think these should be used as a resource as and when you need it rather then a constant help. If you are reading from a sheet all the time its unlikely you will improve, so use in moderation.
I hope these help you and let me know in the comment section if you have found any worth sharing.

http://www.html5in24hours.com/2012/04/html5-cheat-sheet/

http://guider.com/blog/dont-miss-this-fantastic-collection-of-developer-designer-cheatcheats/

Google Zeitgeist 2012

Shortly before Christmas Google released its annual Zeitgeist. Zeitgeist roughly means the ideas and beliefs shared at a point in history, so the Google Zeitgeist is the most popular Google searches made over the year.

The Zeitgeist show huge trends in society, some of which are really interesting. The most popular search in the world was for Whitney Houston who died in February of 2012. It’s interesting to see something that happened so early on in the year could dominate other huge major events

Officially the most viewed video on the internet ever and recognised by Guinness World Records as the most liked video on YouTube

Officially the most viewed video on the internet ever and recognised by Guinness World Records as the most liked video on YouTube

such as the Olympics. The most popular image searches were all for pop stars apart from the iPhone 5 coming in at the 3rd most popular search and surprisingly Minecraft ranking at number 8. Minecraft has been around for a number of years now but its only placed on the Zeitgeist in 2012, this is possibly due to it being released on the Xbox 360 in 2012. The most searched video was clearly Gangnam Style, which was the first ever YouTube video to hit a billion views. Psy, the artist behind the song, and Gangnam Style literally came out of nowhere and exploded over night. I think its popularity may be due to the fact that its a South Korean song and it may have not been so readily available to purchase on popular music stores like iTunes, or it could be just a really catchy song.

The Zeitgeist show social trend and changes in society but what I think it also does extremely well, is show the power of Google and how it brings people and ideas together. Google aids the sharing of news help promote new content faster then anything before. Would Gangnam Style have been just as big 10 years ago? ComScore, a internet technology company that measures what people do on the internet, claim that as of April 2012 Google had a 66.5% share in the search market. The rest being made up by Microsoft, Yahoo, Ask and AOL. You can see this statistics here. Google also has around 4 billion searches a day, bringing new information to people and organisations more then any other form of media.

You can see the Zeitgeist for yourself by following this link http://www.google.com/zeitgeist/2012/#the-world. Also watch the “Year in Review” video I’ve put at the bottom of this post. It was also made by Google and highlights some of the major events of the past year.

Have You Forgot The Size Of Memory?

 IBM 350 disk storage unit

IBM 350 disk storage unit – capacity 5 MB

Back in November I made a post about how computer memory had declined in price over the past 20 years (you can read it here).

Now I’ve come across another article showing a hard drive from 1956. Pictured right, is the IBM 350 Disk Storage Unit. It had the capacity of just 5 MB and had to be mechanically lifted on to an aeroplane it weighed that much.

I tried to see if it was even still possible to buy a 5 MB memory drive by doing a quick Google search. 128 MB was the smallest I could find and that was a memory stick for a camera. It has a size of about 2.8mm thick and weighs as little as 4 grams (Sony 128MB Memory Stick High Grade – MSH128.CE). Another good example of how quickly the computer industry changes.

The IBM history website has more on this mammoth machine  if you’re interested. I’m putting a challenge out there to anyone who can find a modern device with less data than I did. Post the link in the comments if you manage to find one.

Weekly Reflection – Week 12

This week I had not formal lecture again but I did get set a task of replicating a small website in my seminar. It was a small 4 page website that used basic HTML and CSS. It taught me a few good techniques actually. Like how to use the CSS tag “float” to position content on a web page and how to can set a HTML class to an object and then use CSS to style that particular item differently from other similar items. For instance I might want to centre all my text on my page, for that I would use something like this:

HTML

<p>Lorem ipsum dolor sit amet, facer insolens nominati per ne, at vis dolorem contentiones, nec tincidunt cotidieque eloquentiam et. Fuisset laboramus hendrerit eu has, per quas habeo ne. Ex mea postulant maiestatis. Inani platonem has no, alia fuisset cu has. Eos ei causae sanctus docendi, ea ferri maiorum sadipscing ius. Mea natum elaboraret delicatissimi no.</p>

 

 

<p>Dicat exerci mucius usu at, sea viris minimum adolescens te, eleifend incorrupte an sit. Pri ad dictas referrentur suscipiantur. Ut nisl euripidis similique mea, sed at volumus officiis suscipiantur. Blandit elaboraret ei vim, sea vocent splendide ei, ius eu dicat interesset sadipscing. Case posidonium per ut, no vix tritani necessitatibus. Mea unum sonet eu, hinc iudicabit no vix.</p>

 

CSS

p {

text-align:center;

}

Lets say though, that for some reason I wanted the second paragraph to align to the left. Then I could use this code:

HTML

 

<p>Lorem ipsum dolor sit amet, facer insolens nominati per ne, at vis dolorem contentiones, nec tincidunt cotidieque eloquentiam et. Fuisset laboramus hendrerit eu has, per quas habeo ne. Ex mea postulant maiestatis. Inani platonem has no, alia fuisset cu has. Eos ei causae sanctus docendi, ea ferri maiorum sadipscing ius. Mea natum elaboraret delicatissimi no.</p>

 

 

<p class=”left”>Dicat exerci mucius usu at, sea viris minimum adolescens te, eleifend incorrupte an sit. Pri ad dictas referrentur suscipiantur. Ut nisl euripidis similique mea, sed at volumus officiis suscipiantur. Blandit elaboraret ei vim, sea vocent splendide ei, ius eu dicat interesset sadipscing. Case posidonium per ut, no vix tritani necessitatibus. Mea unum sonet eu, hinc iudicabit no vix.</p>

 

CSS

p {

text-align:center;

}

p.left {

text-align:left;

}

That way only the second paragraph would align to the left. This is a very basic application of the class tag but it could be used to create a much more advance style. I do think however that it may be better to create a new div rather than a separate class to provide better overall control. Making lots of different classes for similar objects could clutter the code and make things difficult to find if there was a mistake made or you wanted to make changes. Even so, it’s a new technique I’ve learnt and I used it to great effect to turn a 2 column page into a 3 column page using only one CSS sheet.

Weekly Reflection – Week 11

I’ve had no formal lecture in week 11, instead as a group we critiqued each others medium fidelity mock ups we had done weeks earlier. I received mainly positive feedback in regards to me designs but I also got some criticism, which I understood and thought was valid. I did two designs for a mock children’s clothing company and you can see the result of the first design here, and the second one here. The criticism I received was in regards to my product listings pages, particularly on my second design. It was noted that I had obscured some of the categories of products which could make it hard for people to find. I hadn’t taken that into account when I first designed the page but it became totally obvious was it was pointed out. Going forward I think I really need to concentrate on the usability of my designs and to make sure users can find the information they need. If I were to redesign the product listings page I would do it vastly different. I’d make all the categories   visible, while not giving prominence to any individual category.

Having my work critiqued by other people has shown me that a fresh pair of eyes can pick up things you didn’t notice. In the future I’m going to apply this to other designs I do and let other people look at them before I finalise them. There is a certain level of pride involved with design work and because of this some people find it hard to take criticism, I would like to think I am not one of those people. I think as long as the criticism is  constructive then it will benefit the design in the end by allowing you to improve and refine what you already have .