Custom WordPress Theme

Our final assignment in the WDDM Program at Humber College was a choice between several different assignments that each involved a culmination of the skills we learned in the program.

One of the choices available was to create a Custom WordPress Theme. As such I had decided to build one based on the default Twenty Seventeen Theme.

I’ve had experience in the past creating websites built with WordPress and I’ve worked with child themes before but I thought I’d take a step further with this CMS. With some of the lessons we had in this program on WordPress I definitely wanted to do this particular challenge.

For this, I decided to do a WordPress Website for a club downtown that could be used by the staff to easily and constantly update the website with new event listings and for visitors/patrons to view the listings of the club and have different methods of contact for various purposes (booking events, general questions, etc).

After installing WordPress and connecting to the database manually on a subdomain through my hosting, I created a new folder on my Desktop and added the first default files for my Custom Theme. These included the main Stylesheet, Index.php file, the Functions.php file (not imperative, but just in case!) and for good measure a screenshot.png image to recognize it better in the Themes page on the back-end. After making the necessary adjustments in the comments I uploaded the theme into the themes folder.

I activated the Theme thereafter and began to make the first changes which was to remove some of the default features and styles to almost start from scratch.

I had already known what look I was going for with the website so I applied the styling and fonts and edited the layout of the website. This involved me editing other files which included but was not limited to the Header.php and Footer.php files which I had to upload to the Custom Theme folder.

To add more features to the website I installed plugins such as a Masonry Plugin as well as a Contact Form plugin. In a more traditional sense, I would have created these features from scratch but seeing as this is WordPress, I thought why make it more complicated than it has to be?

The Event Listings page is the actual Posts page, which I initially had another plugin installed for that but after receiving some advice I removed the plugin and set that particular page as the listings page which can be updated by adding and removing posts as you would normally do on WordPress. Additionally, the website is Responsive as well.

There are some other features I do want to add to this particular theme, one major one would be to include a separate ticket link for events where visitors can go and buy tickets directly from the venue through the website – we’ll see how that goes but stay tuned for updates!

You can see my current version here:

Click Here!

Thanks for stopping by!

– Mike

Composite 2 Complete! For now….

Again, it’s been a while since I posted anything new, yeah, sorry about that again!

Reason is, I’ve been pretty busy with our Composite 2 assignment as we had to create an application built on PHP, MySQL, AJAX, jQuery and CSS.

With 2 other group members we managed to create a World Traveling Application that allows users to sign up and submit reviews for cities that they have been to around the world.

You can see it here, hosted on one of my group members’ hosting:

http://vacationcatalog.williamdev.co/

Feel free to sign up yourself and try out the functionality!

We managed to complete this within a 2 week span which included conceptualization, building out the layout and adding functionality as well as testing.

Of course, there’s much more that we’d to put in the future but we managed to add in Login/Logout functionality, uploading Avatars and adding Reviews and Comments.

For more information, please read the documentation below:

Click Here!

Thanks for stopping by!

– Mike

HTML – The Know-How

I guess I should have covered this earlier on but I’ve been pretty busy with homework and assignments and you know, life in general. Oh Well.

Anyhow, It seems logical to cover the basics of HTML.

HTML, also known as Hypertext Markup Language is the language used that build websites from scratch. It is the absolute first thing you would ever know when creating websites. Before anything else is added you would build a website through HTML – with that in mind there are other ways to build websites (I’m looking at you PHP) but in the end you are still using HTML to make it happen.

html5-720x1280

HTML has been around since the start of the web and since then has gone through a number of changes – 4 major ones actually (if you don’t count the initial release. The latest release is now known as HTML5 which included a number of improvements, most notably including approximately 29 new HTML tags and more browser compatibility.

To suffice a bare bones HTML Document looks like the following:

html-1

Essentially, this will give you a blank document on your page, but an HTML document nonetheless.

The first tag, DOCTYPE, defines what kind of document you are creating to let the browser know in order not to confuse it with say and CSS or Javascript file (which we’ll cover later). Followed by that is the HTML tag – this is where all of your content is contained in the file including meta information, at the end of your document you will include a closing tag that is almost the same thing except that it has a forward slash in front of it, indicating that it is closing. Lang=”en” is pretty self explanatory, just stating to the browser what language your document is in.

Next up is the HEAD tag. This is where you include all your meta information such as Page Title, Meta tags and files that link to your page that require it to run properly such as CSS and Javascript. In this case I’ve included a Meta tag that defines what character set this document is optimized for, which makes it able to include all the characters and keys on your keyboard inside of your document so that no unknown keys are included in your document. This is very important to have so your website does not crap out in any way or shape because of the incorrect character set.

After the HEAD tag you have the BODY tag. This is where all your content actually goes that you see on your browser.

For example, a Body may contain content such as the following:

Screen-Shot-2017-06-02-at-4.46.40-PM

In a nutshell, this basically is HTML5 that includes a Header section, a Main Section and Footer Section.

Within the HEADER tag you have a Navigation Bar with a UL tag which is an Unordered List that contains 2 lists elements (LI tags) within it. Within those are A tags which as known as Anchor tags that link to other parts of the website and in other cases outside of the website. Href stands for Hypertext Reference, which is ‘referring’ you to any part in the website or beyond.

Normally you’ll put your actual content in the Main tag. Stuff like articles, Welcome messages, image galleries and etc. are included here. Of course there’s no right or wrong answer here but as a Web designer or Developer it’s in your best interest to have an easy to navigate website that is clear and concise.

Lastly comes the Footer which is normally where you’d put in contact information, links to your social media and sometimes a search bar. In this case I’ve included a DIV tag (which stands for Divider tag) with an ID of “contact-here”.

What is an ID in HTML?

Well stick around, and I’ll have more for you next time.

For now, here’s a quick reference on HTML:

https://www.w3schools.com/html/

Have a good weekend!

– Mike

Responsive Web Design – the 101

You’ve probably heard it somewhere in conversation with other web developers and designers. It’s one of those buzz words that make you almost instantly search for your phone or computer and Google it for an easy, descriptive term that will familiarize you with it.

The term I am referring to is Responsiveness or more prominently known as Responsive Web Design.

For the record, it has nothing to with people when they don’t respond to your calls or texts and it certainly doesn’t refer to you un-attentive kids tweeting away on their phones (just kidding..).

Responsive Web Design refers to how your website looks on various screens and changes accordingly. Basically, how it ‘responds’ to each individual screen and adjusts the layout and content on whatever screen it is being viewed.

You wouldn’t have the same layout on a Desktop computer as you would on a Mobile phone and vice versa. If you tried to fit all your content and layout for a Desktop computer into a Mobile phone your content would be way to minimized for any practical reading and your users would be forced to zoom in and constantly move the screen from the left to right to view content. Not good.

It’s in your, your client’s and your client’s clients best interest to have a website where, first off, you don’t need to to scroll right to left to read content and secondly need to zoom in to do so. Additionally Google actually ranks your website lower in it’s search ranks if you don’t have a mobile friendly website.

responsive

What you shouldn’t do vs. What you should do

When the internet was made widely available, we didn’t have smart phones that allowed us to view content on them. Remember the good ol’ days of the brick Nokia phones and flip-phone Krazers? Good Times. Anyhow, once iPhones, Androids and etc. came more into everyday use for everyone, people started viewing websites on mobile and inevitably they had trouble viewing them because they were not designed for smaller screens. Surprise, surprise.

Hence Responsive Web Design came into play and we’ve been using it ever since. In fact, it’s now considered an essential part of web design and not a separate entity on it’s own. As a Web designer and in some cases a Graphic Designer or any role that involves Designing for Web you’re going to need to know this stuff for sure, in fact you won’t survive without it.

——————————————————————–

So now that we know what it is, how exactly does this work?

To simply put it, you add additional rules in CSS called Media Queries.

Basically when you hit a breaking point in your viewport and your content starts to move around, effectively breaking your layout, you would add your first Media Query.

SIDE NOTE:

IT IS ALSO BEST PRACTICE TO BUILD FROM MOBILE FIRST.

A basic Media Query looks something like the following:

@media only screen and (min-width: 768px) {

body {
background-color: #F00;
}
}

What this is reading is that when the screen width is more than 768 pixels, the body background will change to #F00 a.k.a Red. Any width less than that will revert to it’s default color state as defined in your initial CSS rule for the Body tag.

To break down the rules:

1) You start with @media which is basically saying ‘Hey screen, I’m about to start a Media Query’.

2) Only Screen refers to the actual screen you are viewing. When Media Queries were first being used there was an option for Print, Handheld and other avenues like that but eventually there were so many screen sizes that Only Screen now covers everything under the sun.

3) and (min-width: 768px) is the condition that must be met in order for the Media Query to work. You can have additional conditions by using the same format as this. If you have two conditions with the word ‘and’ between them then both conditions must be met in order for the Query to take effect. You can also instead of adding an ‘and’ between conditions and adding a comma instead. This will make sure that if either of the conditions are met, then the Media Query will take effect.

After your Media Query, you add curly braces (like a function!) and add in your CSS rules inside of it, almost like a separate Stylesheet. For semantic reasons you should add Media Queries in either the same stylesheet as your content’s, only after or in a separate stylesheet so you can find them easily if you need to adjust any rules later on.

Media Queries also don’t have to refer only to width in pixels but height as well, landscape or portrait layouts and even Screen resolution. You can also add for certain width and/or heights like this:

@media only screen and (min-width: 768px and max-width: 1024px){}

This effectively will only apply any styling within the curly braces when the width is between 768px and 1024px.

You can add multiple Media Queries inside of a Stylesheet if you’d like as well. In this case I had made a Media Query for a Laptop. If I wanted to make one for a Desktop of Wide Screen layout, I would add another condition that would have a min-width: 1400px and add my rules inside of that.

Since I’m on topic for the standard layouts for Mobile, Tablet, Laptop and Desktop, the following minimum width dimensions are the general layouts for screens:

Mobile: 0 – 480 px
Tablet: 480 – 768 px
Laptop: 768 – 1500 px
Desktop and Wide Screen: 1500 and up

responsive

Mind you, apparently there are over 17 000 screen sizes available in the world as different phones and devices are built and released every year. I can’t cite my sources on this one but I’ve heard this from people (legitimate, I swear!).

With that in mind, you’re obviously not going to make 17 000 Media Queries for a website or app hence why you should follow the general dimensions above for your website. In order to minimize how much Queries and additional rules you’d need to make it’s always best practice to create a good layout beforehand with as little extra content if possible. If you design a good prototype and follow a good layout you should have an easy time making your website responsive and easy to navigate and read.

There’s much more to cover still (Fluid vs. Fixed layouts, Rem and Em font sizes, Bootstrap, 960 Grid) but for now, I hope you can take something from this and try some basic stuff for yourself and go from there.

Have a good long weekend!

– Mike

Google Ads Assignment

We had a lesson this week in our Design Class re-creating a web ad you would normally see when visiting a website. Basically, one of those ‘Cookie’ ads you see when visiting websites like Amazon, Ebay or any type of forum online.

Using the program Adobe Animate (a.k.a Flash 2.0 😛 ), we re-created the following:

https://goo.gl/zGeupu

With a combination of Animations in Adobe Animate including Slide and Fade-In with Keyframes, we built a basic Google Ad that any business can use.

Additionally, we had also created a clickable call-to-action button that will direct you to the advertiser’s website which was made by creating the button graphic in Illustrator and then importing it into Adobe Animate, adding the Fade-In animation, converting it into a symbol followed by a button, and then adding an ActionScript Event Handler that allows the user to click and be directed to a pre-defined website.

Once this was completed we were given a task to create our own versions of this type of ad.

I decided to do 2 ads for the Toronto Zoo that would prompt users to visit their website during a promotional run. I built them in 2 dimensions:

300 x 250 px
728 x 90 px

We were taught the various standard layouts of web ads (which are ones you actually have to follow if you are creating them) and these two dimensions I felt were the most popular given from what I usually see online when surfing the internet.

You can view my final works here:

728 x 90 Ad
https://goo.gl/OlQr5W

300 x 250 Ad
https://goo.gl/D1IJom

Thanks for stopping by!

– Mike

Typography Layout

In our Design class we had an in-class assignment to create a page layout using our knowledge of typography.

For this, we were required to include various elements and tags in HTML and style them appropriately with CSS and make it responsive for a topic of our choice.

I decided to base my assignment on the band Fugazi. Taking my information from Wikipedia, I went ahead and stylized my page with various H1, H2, P, Table, Blockquote, Definition List tags to put this altogether along with various CSS attributes such as Em font sizes, line-height, word-spacing and much more.

After that we were to take our knowledge of Typography and apply it to make Serif and Serifs typefaces with imported Fonts from Google that contrast each other perfectly to make it look professional with a sleek design.

Pretty simple assignment, but good practice in design and responsiveness. This makes for more efficient Website Design in the end.

Click Here!

Thanks for stopping by!

– Mike

Composite 1 Assignment – Barber Shop

Early last week, we were given an assignment to complete a 5 page mock website that comprised of all the skills and lessons we have learned up to this point in our program.

Primarily we would need to use HTML, CSS and our knowledge with Photoshop and Illustrator to plan and build a website for a topic of our choice. I decided to go with a more practical route of re-designing an existing website of a small business in town. At first I debated either to do a Tattoo Shop or a Barber Shop but in the end I finally decided to go with a Barber Shop in which the original one is as follows:

https://goo.gl/j3L700

Seeing as this website had not been updated in quite some time, I decided to re-design and develop a new one for this assignment. Mind you, the original owners of this website and business are unaware that I had recreated their website, hence my inclusion of the copyright information at the bottom of the footer.

Before we even began to write any code, a major aspect was to create a Wireframe and Mockup which would be used as a guide line when actually coding the website.

As such I had create both in Illustrator using Photoshop to optimize the images for Web. You can see my work below.

Framework

Mock Up

Besides the images on the Chair page, I had gathered all the other images from a royalty free website for hi-res stock photos called Unsplash.

Once I completed this and had it approved, I was ready to make this website a reality.

Beginning with our standard HTML Skeleton and CSS page reset, I set out to create the general layout of the pages which you had seen in the mock examples above. Once this was complete, I decided that since all the pages have the same Header and Footer layout, I would convert them into PHP files, thus allowing me to make adjustments to the Header and Footer more efficiently through one PHP page as opposed to adjusting it on each page as HTML files.

Now that I had the basic layout of the website in grasp, I would need to create each individual content of the page. To make some of the content more exciting I decided to add in a jQuery Slider on the landing page that would fade in 3 images every 2 seconds which I learned through a lesson that I had read online. That being said I also included a jQuery plugin for the image gallery in the Footer which would allow you to browse through past cuts that the barbers would have made if this website was made for real. Most of the pages had a pretty standard layout however I did include a Google Maps locator on the Book an Appointment page as well as creating a Appointment Form in case people would like to book an Appointment in advance online with them. Creating a form was a vital component for this assignment and this was a perfect scenario to create one.

With everything now in place, I still had to make this website responsive for different sizes and layouts.

While it was not necessarily a difficult task, I was by far the most time-consuming. Even with a basic layout like this, there was much to consider and I spent a considerable amount of time debugging and making sure each page fit appropriately on every screen width from over 2500px to as small as 320px. Alas, I did decide to include one more jQuery plugin for this, which of course was for the Navigation bar. After much testing and consideration, I decided that once the width was lower than 942px, I would have the Nav Li’s be put into a Hamburger Menu which you can click to show the links to each page.

All in all, this was a very practical website that I learned much about with. Using a combined knowledge of HTML, CSS (Responsive Web Design), Javascript, jQuery (Plug-ins), PHP, Adobe Illustrator and Photoshop this is what I was able to accomplish in the week timeframe that we were given to complete this Project.

You can see the live version here:

https://goo.gl/CDafja

Thanks for reading! 🙂

– Mike