Twelve Five – 2010
HTML5 Video tag
More enhancing! Since I like the video tag in HTML and love Apple products I felt I had to make my videos accessible from i-Touch products: HTML5. The videos was accessible, but though the Youtube app: not optimum!
I converted the videofiles to OGV (Chrome, Firefox, Opera) and to MP4 (Safari). I now combined it with my previous code and got this:<div id="videobackground"> <div id="videoobject"> <video id="videopresentation" width="900" height="506" controls="controls" preload="preload"> <source src="http://chrisc.dk/itu/1semester/bfpw/video_presentation_of_portfolio.ogv" type="video/ogg"> <source src="http://chrisc.dk/itu/1semester/bfpw/video_presentation_of_portfolio.m4v" type="video/mp4"> <div id="videotext">Your browser does not support video tags, click <a href="http://www.youtube.com/watch?v=VCLEI-Y9Wnw">here</a> to watch the movie at Youtube. </div> </video> </div> <div id="videotext">Drag your cursor here to watch the video presentation.</div> </div> </br>As you can see, I added a link for those conservative users out there still using an old version of Internet Explorer.
Eleven Thirty – 2010
Video ornament
With my recently acquired powers in CSS I wanted to do a makeover on my videos. I placed a picture, with text saying “drag your cursor here to view the video”, under the video, and set the video opacity to 0, and 1 at hover, focus and action. This awefully cool, but I wanted to enhace the proces. so I through more CSS in it, and ended up with border, background-color and text instead of a picture.
#videobackground { position: relative; width: 900px; height: 506px; background-color: #F1F1F1; border-top:4px solid #C9D1DC; border-bottom:4px solid #C9D1DC; } #videotext { color: 333333; font: italic 32px/130% 'Droid Serif',Georgia,serif; text-shadow: 1px 1px 1px #FFFFFF; font-size: 36px; line-height: normal; text-align: center; position: absolute; top: 300px; z-index: 1; padding-left: 50px; padding-right: 50px; } #videoobject { position: absolute; z-index: 2; }
Eleven Twenty – 2010
Picture uptimization
I now fully master the magic of CSS(3) and I feel the urge to use it everywhere! Today I replaced all my PNG-images with JPG-images and CSS. The pictures now rotate and scale when hovering. The thing about CSS3 is that you have to write individual code for every browser. I tried to show the differences here.
Example of the code for different browsers:
{-moz-transform: rotate(10deg) scale(1.1);-o-transform: rotate(10deg) scale(1.1);-webkit-transform: rotate(10deg) scale(1.1);transform: rotate(10deg) scale(1.1);}This change not only means that my page looks elegant, but it also means that the heavy PNG-images are gone, therefore a faster loading time!
Eleven Twentysix – 2010
Centre menu
At first I centered the menu with a ‘<div text-align=”center”>’ in the header.php, but I figured out that, that was not the best way to do it. So I dug into the style sheet and added ‘text-align: center’ to this:
#secondary-menu { border-top: solid 4px #D2D2D2; margin-bottom: 10px; text-align: center; }But after doing this I ran, as you can see on the pictures, into problems. To straighten this out I had to write an all new class:
.menu li ul li, .menu li ul li a { margin: 0; }That was a tough one to crack. After this I aligned the sub-menu items to the left:
.menu li, .menu li a { display: inline-block; margin: auto 40px auto 40px; text-align: left; }
Eleven Twentyfive – 2010
Search field
I wanted a search field but not the in the sidebar as the theme alows me to do. I know that I can just write
<?php get_search_form(); ?>to call a search field, but that does not give me the opportunity to edit the search field. So I copied the code from the sidebar.php and pasted it to the header.php.
<div> <label for="s">Search for:</label> <input type="text" id="s" name="s" value=""> <input type="submit" value="Search" id="searchsubmit"> </div>It still wasn’t in place so I edited the code a bit:
<div id="searchfield"> <form action="http://chrisc.dk/portfolio/" id="searchform" method="get" role="search"> <div> <label for="s">Search for:</label> <input type="text" id="s" name="s" value=""> <input type="submit" value="Search" id="searchsubmit"> </div> </form> </div>Not I am satisfied with the position, but I do not want the text above it saying “Search for:”, so:
<div id="searchfield"> <form action="http://chrisc.dk/portfolio/" id="searchform" method="get" role="search"> <div> <label for="s"></label> <input type="text" id="s" name="s" value=""> <input type="submit" value="Search" id="searchsubmit"> </div> </form> </div>
Eleven Eleven – 2010
PHP get the category
I wanted a page to show posts from, by me, selected categories. So I started by copying the index.php and renaming it. Then I found this code at wordpress.org and implemented it:
<?php foreach((get_the_category()) as $category) { echo '<img src="http://example.com/images/' . $category->cat_ID . '.jpg" alt="' . $category->cat_name . '" />'; } ?>After a few ajustments and replacements it worked as I wanted it to. BUT then I realised that I was able to do what I wanted, with parent categories. I have always been deliberated about doing things the best and most simple way, and for me the parent categories way looked best. I knew that one php file would load miliseconds faster than two, so I deleted the php file and made it work the peace-of-cake-way!
Ten Thirtyone – 2010
Installation of plugin ‘Captcha‘
Well today I got my first spam comment, yay! Deleting comments on my blog is not my favorite occupation so I decided to do something about it. I went to the plugin-install page and searched for ‘most popular’, and as I guessed Akismet is the most installed plugin, I do not want to pay for my plugins, so I scrolled a little down and found SI Captcha which is exactly what I was looking for! I know there are more Captcha plugins, but I feel comfortable choosing the one that most others have chosen.
I must say that I do not find it very pretty or nice to have on my page, and I am a little sorry that people with blogs have to install plugins like this.. but thats the world we live in. -atleast for now.
Changing language of WordPress
I’m a bit of a perfectionist and for some time now I have been aggravated by the installation of the danish WordPress, since that means that some of the autotext is in danish; “Skriv en kommentar”.
Now I had had enough and decided to do what ever et takes to make it right. And surprisingly a quick google search showed me that I needed to rename the following
define ('WPLANG', 'da_DK');to
define ('WPLANG', '');Was that really it? Yes.
Ten Fifteen – 2010
Page: Sitemap
The purpose of this page is to give the user a view of what my portfolio contains and to make it easier for him to find what he is seeking.
Apple touch icon
I created an Apple touch icon, so that if you save my webpage on a iPhone, iTouch or iPad it will show my logo on the homescreen among the other apps.
Nine Thirteen – 2010
Post: Enlighten me!
I decided that it might be time for my first comments.
Nine Eleven – 2010
Creation of ‘ChangeLog‘, ‘About me‘ and ‘Assignments‘ pages
Assignements page with password protection as requested by my teacher.
Installation of plugin ‘WPtouch’
‘WPtouch‘ is a theme that activates when my blog is visited from a mobile device. I am of the opinion that clarity along with simplicity is keywords in webdesign. That is why I installed this plugin, to give the reader on the move the best treatment.
Creation of Categories
I did a few categories, more to come. One for every lecture and one called ‘Everything else‘.
Changed permalinks
Like I said: I like things to be neat and simple, now my URLs are.
Language of choice
The fact that I speak both the Danish and the English language very well, leaves me in a position where I have to decide which language I want to keep my portfolio in. Well, I did choose english (surprise!). The cause of this decision is mainly that I want to keep all my portfolio in one single language, and since I am attending all english classes next year this is obvious. Also the facts that one of my teachers is english speaking and we are doing a project with Georgia Tech did effect me.
For my own reasons, I find this a way of preparing myself for later on, where I have to turn in papers in English. So hopefully my (not perfect) written English will improve!
_
Nine Ten – 2010
WordPress installed
Let the portfoliation begin!
Candid theme chosen
I did chose the ‘Candid‘ theme for my weblog, since I find it neat and clean, but on the face of it there seem to be trouble with the theme, so I might change it in the nearest future if I can not work things out.
Comment option removed
At this point I can’t see any point in people posting comments. Therefore I removed the option, I’m sure I’ll make commenting possible for certain posts or pages later on.
Installed the plugin ‘Google Analytics‘
Well, what can I say? I am as curious as the day is long.
2 Comments