Blog

 

ExpressionEngine Day 3 – Addons

Posted on August 6, 2010 by Landon Poburan

Read the previous posts in the series:
Start your ExpressionEngines!
ExpressionEngine Day 1
ExpressionEngine Day 2

Another day with ExpressionEngine and things seem much like they did yesterday—positive. I think that EE is very powerful and I am starting to like there interface. They have some nice eye candy that grabs peoples attention like the Google Analytics addon I spoke about yesterday. I previewed that you a few people that they loved it!

Now as I begin to thoroughly test it out and think about how I would implement it with client projects I ran into one issue.

The way that EE seems to be set up is that when you would like create a section of page you create your template for that page, followed by creating the Channel then publishing content.

But the way that I work with a lot of my websites is I will have a “Default” or “Page” template that many of the pages on the website are based off of. Yes there will always be custom templates for specific pages but I think it is fare to say that when a site is built the majority of pages can use the same template. This seems to be a sticky point for ExpressionEngine.

But fear not, Structure is here to save the day. To quote viget.com Structure allows the following “Entries [to be] linked to templates, and not vice versa.” EE’s issue is that templates are linked to pages. So when you want to create a new page, you need to create a new template. When you use Structure, pages become linked to templates. So you can create 1 template and build make Pages or “Entries” as you wish. Structure is a plugin I will most definitely be using.

Easy Content Management with Structure

It also allows for easy content management, presenting your website content in a tree view allow you to see all the pages and parent – child relations and allowing you to easily re-order/re-organize it.

Navigation

It also provides us a few navigational benefits. In EE we cannot simply spit out a list of navigation. You can only do this with a particular Channel or Categories. Structure allows you to use a tag to dynamically generate a navigation menu. It will also provide you with handy breadcrumbs with different parameters like “Include Home link”. It also will handle submenus making it ideal for dropdown and flyout menu systems.

Conclusion

I only touched on a few benefits of Structure today but I urge you to check it out—it will save you time for sure. Structure also has other features which I am sure you can utilize.

I am still enjoying ExpressionEngine, here are a few other handy Addons I found today:

SEO Lite – a SEO addon.
Sitemap Generator – a handy sitemap generating that pings search engines.
Contact Manager – allows you to drop a contact form anywhere you want.
CKEditor – use the CKEditor WYSIWYG instead of the default plain text editor.
CP Analytics – integrate your Google Analytics stats right into your dashboard.

Note all of these add ons are compatible for ExpressionEngine 2.0.



Share|
Posted in Web Development | Tagged , , , | Leave a comment

ExpressionEngine Day 2

Posted on August 5, 2010 by Landon Poburan

This is a follow up on my previous posts:
Start your ExpressionEngines! and ExpressionEngine Day 1.

Day 2 working with ExpressionEngine is coming to a close. My thoughts have done a 180 from Day 1. On my first day working with it I was feeling like I would way rather be working with ModX or WordPress but I am starting to see how ExpressionEngine could be very powerful.

Building your template

I started off by taking an actual HTML layout for a client site and building out templates. I started by splitting the page into sections similar to how I would use server side includes like header, footer, navigation for information that is included on multiple pages. Like ModX, ExpressionEngine stores all of the template data in the database. So I worked from local files building the templates and implementing the various template tags. I found these easier to work with then ModX and WordPress.

In a matter of minutes you will have your HTML page sliced and diced having a number of blocks of code being replaced by items like:

{embed=embeds/header}
 {embed=embeds/main_nav}
 {embed=embeds/footer}


Adding content with Channels and Content fields

Once you have completed your templates you will begin working creating pages. Now the concept is quite simple. You create a form then create a page to build content off of it. Then Channels are like a group of similar content. So say we have a news section. We will have a Title, body, and excerpt. We proceed and create a Content Field Group for “news” and add the fields we just named. We can then add a “News” channel that uses the “news” Content Field Group and when you go to publish a page you will see those fields! (this is kind of handy so clients only see the fields they need to fill out). You can publish unlimited number of items in a Channel. So you can go and add a tonne of news posts. Then this is how you add it to your template file:

{exp:channel:entries channel="news" limit="10" orderby="date" sort="desc"}
 {title}
 {body}
 {/exp:channel:entries}

This is a very rough example just for the record! But you open a block and specify the Channel to pull data from. Then the items within the curly braces {body} are the names of the content fields that we added.

It was a little difficult for me to wrap my head around the:

{exp:channel ….. }

I won’t lie, I am still taking it all in but I see the power of the system and am still learning.

Sweet Google Analytics Integration

One awesome feature I found was a third-party Google Analytics Addon. It integrates write in the user interface so would be an awesome feature for clients and developers alike.

ExpressionEngine Google Analytics Addon

But that is enough for now, writing this post is drawing from my R&D.

Share|
Posted in Technology | Tagged , , | 3 Comments

ExpressionEngine Day 1

Posted on August 4, 2010 by Landon Poburan

This is a follow up on my previous post Start your ExpressionEngines!

I have spent a day with ExpressionEngine and that first day had me not so found of it. I found a lack of documentation and articles surrounding the latest release (version 2). Outside of the official documentation from EllisLabs good articles are few and far between. There is a lot of blogs, articles and tutorials on the previous version (1.X) but they completely rebuilt the CMS and is now completely driven by CodeIgniter. This could be due to the fact there is only around 100,000 sites running it which is a far cry from WordPress which powers something like 15,000,000+ sites.

The initial difficulties may be due to different terminology and an interface I am not accustomed to but I will press through and try and find a happy medium as I want to learn this system as I hear incredible things.

* Please note that these posts will not be landing on the actual days of testing but providing insight on that days events.

Share|
Posted in Technology | Tagged , , | Leave a comment

Start your ExpressionEngines!

Posted on August 4, 2010 by Landon Poburan

I am very exciting to start some work with the commercial CMS ExpressionEngine. This has been a product I have been interested in for some time now mainly because it is built on the open source PHP framework CodeIgniter. I have had learning CI on my to-do list for sometime now and was planning to get around to it in a couple of weeks but seems I will be forced into it sooner then later—thankfully!

ExpressionEngine is a commercial content management system that is built on an open source platform. They claim it is the best of both worlds. They may just be on to something. Having the power of an open source core which will constantly be improving over time combined with a commercial team of developers behind the CMS almost seems like it would be 2x as good as an open source CMS which has one team behind it.

One nice benefit of this commercial CMS is support. Although you pay for a license which will run you between $99.95 -> $299.95 (depending on your needs) you will have the support of the developers who built it. You can’t say this much for something like WordPress. When you have an issue with some custom code wouldn’t it be nice to just contact the person who built it? Well we may just have that opportunity now.

The reason that I am now diving into ExpressionEngine is that I have a client project that is requesting the use of this product. It was one of the proposed options as they desired a commercial product. Now I am getting my hands on a license to do some intensive R & D testing it out and see what it is capable of.

Check out ExpressionEngine.

Please check back soon for a follow up of my experience with ExpressionEngine.

Share|
Posted in Technology | Tagged , , | 2 Comments

Sign into multiple Google accounts in one browser session!

Posted on August 3, 2010 by Landon Poburan

Google has rolled out a new feature which allows you to sign into multiple accounts in one browser session. Gone are the days of having to open multiple browsers to get into more then one Google account.

This is particularly a pain for me as a web developer. I have my own account and am always logged into my Gmail but for example if I need to login to a clients Google Analytics to run an export for them I have to log out of my account then into theirs or open a new browser to accomplish this. What a pain—but Google has come to the rescue.

View the original post by mashable.com here. [link to mashable]

Note: I am unsure if this is rolled out in Canada yet but I cannot wait to utilize this feature.

Share|
Posted in Misc, Technology | Tagged , , | Leave a comment

How to fix orphan text around floated images.

Posted on August 1, 2010 by Landon Poburan

If you are anything like me, you have been aggravated by text wrapping underneath a floated image. Well now there is a fix that is sure to put a smile on your face and make your designs much cleaner.

Lets take some very basic HTML to demonstrate how this traditionally works. Using the code below will have the paragraph flowing around the image if the text is that long. Here is the HTML and CSS being used:

CSS

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
}

img {
	margin: 0 25px 25px 0;
	float: left;
}



HTML

<img src="placeholder.jpg" />

<div>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin rutrum faucibus sapien, eget condimentum elit rutrum ut. Proin rhoncus
tristique mauris, eu ornare massa mollis vel. Quisque lacinia dictum velit,
varius tempus sem accumsan eu. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed iaculis pulvinar dictum. Donec at urna id felis hendrerit
blandit ac vel sem. Pellentesque velit lectus, blandit a sodales quis,
elementum quis nisl. Vestibulum a magna vitae erat accumsan dictum. Fusce
congue diam at arcu bibendum cursus vehicula mi vestibulum. Vivamus hendrerit,
risus sed viverra rutrum, diam mauris ultrices augue, id vehicula tortor
libero non urna. Cras sagittis mauris in nisl aliquam vitae ornare lacus
auctor. Aliquam erat volutpat. Phasellus sit amet libero arcu. Phasellus nec
felis dolor. Sed eget est sem, vel lacinia turpis. Nullam semper urna mollis
quam feugiat consectetur. Sed aliquam sollicitudin ligula, non euismod ipsum
posuere at. Vivamus magna nibh, pretium ac molestie eget, imperdiet quis
est.</p>

</div>



Note: I used 3 paragraphs but for purpose of demonstration I did not want to display the code for 3 paragraphs of lorem ipsum.

Image displaying text wrapping around image

Overflow fix

Now you can see how the text wrapping around the image is not ideal. This is refereed to as Orphan text.

Using the “overflow” property to fix the text wrapping

We will now use the CSS property “overflow” and apply it to the div containing the text. Add the following CSS:

div {
	overflow: hidden;
}



Once this is added your image will now appear to have the text all contained and not wrapping around the image like so:

Overflow fixed

Now that looks a lot cleaner doesn’t it? Who would have thought that Orphan text could be fixed so simply?

Viewing this technique in real world scenarios

I have recently applied this technique to the new Donovan Creative website. The issue here was that the Twitter feed text was wrapping around the Twitter icon that was being displayed. Now depending on the size of the Tweet, some wrapped and some did not. This became an issue as it begun looking messy.

In this particular case the Twitter feed is dynamically generated by using a jQuery plugin available here: http://tweet.seaofclouds.com.

Now the HTML displaying the feed is dynamically written to the page using JSON and the code generating it is in “jquery.tweet.js”.  If you browse to line 152 you will find the following javascript.

list.append('<li>' + avatar + date + join + text + '</li>');


This is the javascript that is displaying the tweets. I modified this line to wrap everything except the avatar so I could apply this technique described in the post. Here is the modified line of code.

list.append('<li>' + avatar + '<div class="tweet_overflowfix">' + date + join + text + '</div></li>');


Now that I had the text contained in a div with the class .tweet_overflowfix I simply applied the following css to “style.css”.

.tweet_overflowfix {
	overflow: hidden;
}


And Voila! The Twitter feed is now clean as can be with no Orphans running around!


Final words.

If you have any questions regarding this technique or applying it with the Sea of Clouds jQuery plugin please comment below.

Happy Coding.

Share|
Posted in Technology, Tutorial | Tagged | Leave a comment

Just launched a fresh website for getwed.

Posted on July 29, 2010 by Landon Poburan

I am very happy to see a brand new website for a local Edmonton Wedding and Event Planner go live. Last week marked the launch of a website redesign for www.getwed.ca.

I undertook this project looking forward to the opportunity to design a high class and elegant website to showcase getwed’s unique work. I utilized a graphic from getwed’s stationary and created a sleek design around it then pulled various colors from the companies current look to build the color scheme. Once we had all of this in place it was topped off by some amazing photos showcasing the great work of getwed.

Once the design was completed, the work shifted to implement a content management system so they would be able to manage their website and keep there clients up to date with information in a news section. I choose to utilize ModX which is an open source CMSs and is a pleasure to work with for both a developer and administrator. I will expand on some of the awesome features (like editing the website without even using an admin interface!) of ModX in another post soon to come.

Please take a look at the brand new www.getwed.ca website and share your comments.

getwed Edmonton Wedding and Event Planning

Visit website »

Share|
Posted in Clients | Tagged , , | Leave a comment

Inital experiements with CSS3—Color transitions

Posted on July 26, 2010 by Landon Poburan

Every site and article I see lately is all CSS3 this, HTML5 that…So I decided I would take a little dip into CSS3 to see what all of the fuss is about. It turns our, it is actually pretty neat.

It is pretty cool to think that we will be able to do so many things that heavily religned on Flash with simply HTML and CSS. Only downfall is how long will be it before this is actually standard in all browsers…

Can you imagine still having to support IE6 along with being cross browser with HTML5 and CSS3, I will pray to the internet gods that it doesn’t happen.

So I decided to play with CSS3 color transitions. I applied it to my anchors so that when you hover on a link it will fade into the hover color as if it were a Flash menu.

So lets say you have some standard styles for your links:

a, a:visited {
     text-decoration: none;
     font-weight: bold;
     color: #37424a;
}

a:hover, a:visited:hover {
     color: #e36322;
}

Now you want to apply your CSS3 color transition with the following code:

a { -webkit-transition: color 1s ease-out; }

Lets break this down so you know what each item is:

  1. “color” – The first item is the transition property. Simply what are we animating? The color.
  2. “1s” – The second item is the transition timing. This is where we can specify how long the transition will take in seconds.
  3. “ease-out” – The last item is the transition timing. If you are familiar with flash or javascript you will understand easing. It is how the element is animated. You can choose linear, ease-in, ease-out, etc. For my example I have chosen ease-out so the animation ease out.

So after you have your regular CSS from above  with a :hover the CSS3 code will animate from the default into the :hover state.

But what browsers support CSS3

This was one of my first concerns. This is not widely support just yet but the good news is it degrades great. If there is no support for the fancy CSS3 you have added then it degrades to just the normal HTML and CSS, in our case it would be a regular :hover effect. Most people will no know they are missing anything.

Google Chrome
I will go out on a limb and say all users using Chrome will be fine. Google Chrome pretty much supports all CSS3.

Firefox
Firefox is kind of in the stone age here as they don’t have full support for CSS3. Most of your users using Firefox will not be able to see your fancy new CSS3. I am sure Firefox is hot on the train with the new version to get back in the game.

Safari
Safari is on the ball here with CSS3 and one step up on Firefox. They have pretty much the most support for CSS3 out of all the browsers from the research that I have done. If you audience is Mac users, your golden.

Opera
Opera is touch and go with this new technology. They are like half and half, they support around half or less of the new features. The testing I was doing with CSS3 did not work on my install of Opera.

Internet Explorer (*Cringe…*)
Sorry to break it to ya, but as usual IE causes the most stress. With all versions of their browsers they pretty much have zero support for any CSS3 and HTML5. I really do not understand why they don’t get the point. They are holding every website back and causing headaches for developers around the globe. Although I believe some of this is apparently supposed to change with IE9 which will only be available if you have Windows 7.

If you would like to view a full detailed report on CSS3 and HTML5 support please visit: findmebyip.com

Information for CSS3 browser support was referenced from www.findmebyip.com/litmus

Share|
Posted in Misc, Technology, Tutorial | Tagged , , | Leave a comment

SMA Consulting Ltd. launched.

Posted on July 19, 2010 by Landon Poburan

I have recently launched a brand new website for a local Edmonton consulting company, SMA Consulting Ltd.

I worked with Alexander Von Sass to create the interface for the website which the client was extremely happy with. One of the challenges Alex and I faced was presenting a plethora of content in an organized, clean and usable way. SMA Consulting has quite a bit of content in their services and projects sections. We analyzed the content and decided the best way to organize this content would be to use a slick drop down menu. Once if was designed I had the perfect jQuery solution for developing it and it turned out great.

The main priority on the development side was to build a easy to use Content Management System so that client could have complete control over the website. After meeting with the client and analyzing their current needs I ruled out using an open source solution such as ModX or WordPress. I came to the conclusion that a custom Content Management System would best accommodate the current state of SMA Consulting as well as provide the best scalability for them as they continue to grow.

This was a great project to work on and I look forward to working with both Alex and SMA Consulting in the future.

Visit Wesbite »

SMA Consulting Ltd. Home Page

SMA Consulting Ltd. Projects

Visit Wesbite »

Share|
Posted in Clients | Tagged , | Leave a comment

My future secret to success and productivity

Posted on July 16, 2010 by Landon Poburan

I have been doing a lot of thinking lately and reading books like “Rework” and “Deliverying Happiness” (Link to books before publishing) and here is what I think my future secret to a successful business and extremely productive employees is.

When I am running a business where I have numerous employees I will put them on a salary. This way they will come into work and get paid for 8 hours regardless of how much they actually work. This may sound weird to some as you may think “Why would I pay someone for not actually working?” Well give me a second to explain.

In my own personal experience and experience from many people I have met throughout the years we would all have preferred this method over the traditional exchanging hours for dollars.

When working for various companies and working contracts if I am provided a task for the day and that task would say take 2 hours. But your sitting down for an 8 hour day and a 2 hour task for that day. I would bet my money on most people will draw that 2 hour task into an 8 hour task because they don’t want to work for 2 hours then sit board out of there tree for the remaining 6 hours. This is a lose, lose situation in my opinion. What happens is you for one have people that are board and will eventually not look forward to work and people to start to slack more and more.

The alternative is the following. If you provide me a 2 hour task, and I can leave as soon as that 2 hour task is complete BUT I still get paid for the entire day I gaurantee that 2 hour task will be completed in 2 hours—if not less. This will greatly increases productivity. Now you put an 8 hour day into 2 hours.

I think this scenario is the downfall of being paid by the hour because when your paid by the hour if you complete that 8 hour day in 2 hours and leave you only get paid for 2 hours which is why you make it drag out into 8 hours so you get paid for 8. But if you can finish it in 2 hours and still get paid for 8 that is so much motivation for you.

So when I am running a business with employees this is why I will put them all on salary. They will have their daily tasks, when they are finished they are free to go home. They people I want working for me will be the people that finish that 2 hour task in an hour and a half so they can go home—these are the productive people I want working for me.

This is my future secret to success. Feel free to steal my idea to increase productivity with your employees!

Share|
Posted in Misc | Tagged , | 4 Comments