4elements, Amsterdam, Holland

  1. Website Launch Announcement

    DesignScan, Get insight in your website launches their site www.designscan.me

    After 3 years of development, in spare time, DesignScan is excited to announce the launch of their new service and website. The website goes live today, on Monday, June 2, 2014, and is located at: www.designscan.me

    It is time to retake control of your own website. At the newly launched DesignScan.me, instead of endlessly browsing or talking with web design agencies, owners get insight in their own website (Design age, flaws, Usability and others). DesignScan.me features cutting-edge, in-house developed, software that analyses your website design and reports back to the owner in human understandable language.

    DesignScan.me is on a mission to deliver perfect, readable, insights for website owners and to bring the two worlds together, website owners and web- designers, developers. By doing so we pave the way where we provide website owners with the tools and knowhow, and provide the designers and developers with potential new business, clients.

    ###

    Our website is divided into three main sections: MADE SCANS, DASHBOARD (after login) and SUPPORT. By moving to a more client-centric layout, we allow visitors to access information based on their own choice rather than sift through everything to decide what is of interest to them.

    In de MADE SCANS section our current and new members will find detailed information about the companies we made designscans for, this is also the place where you can start earning credits by participating in our “Vote & Earn” program. The DASHBOARD area is specially designed for our registered members. A place where your designscan results are shown and explained, in a human understandable language.

    The website will feature new types of rich content, inspired by our experience, gathered materials and a great team of people working for DesignScan.me. You will find this content in the SUPPORT section in the form of articles, case studies, videos, presentations, interactive forum and live email (Free, for members, one-on-one email help).

    We will update our website on a regular basis, with news, events, product launches and new content. We encourage our visitors to visit our website and sign up for our newsletter, the first issue of which will be released at the end of July. As this functionality shall be available within the next two weeks, please keep visiting our website: www.designscan.me.

    If you experience any problems using our website or if you have any suggestions, please contact us at marketing@designscan.me

     

    0 Comments

    Leave a comment › Posted in: Daily Sneak Peak

    1. Get Started Building Your Blog with Parse.js: Working with Data

      Final product image
      What You'll Be Creating

      Last time, you set up a local server (XAMPP), a web server (GitHub Page), and a database server (Parse.com). You also bootstrapped the HTML of a blog page and embedded basic Parse.js code to link to the database. In this session, I will teach you how to create, retrieve and render your first object.

      If you can bear using Parse.com as your admin panel, you can easily create portfolios, blogs, landing pages, etc. for yourself after learning this session.

      The Concept of a Class and an Instance

      Before we dive into the code base and make it happen, let me make sure you're familiar with classes and instances. Again, feel free to skip this part if you are familiar with those concepts.

      According to Wikipedia:

      A class is “an extensible program-code-template for creating objects, providing initial values for state (member variables) and implementations of behavior (member functions, methods);” and "when an object is created by a constructor of the class, the resulting object is called an instance of the class."  

      If those definitions are too abstract for you, let's put them in the context of a blog. 

      A Blog Class

      Think about the common components of all the blogs. They probably each have a title, an author,  a page of content, a time that they are created, etc. Those shared attributes will make a common template for all the blogs we have, thus the Blog class:

      A blog class

      A Blog Instance

      And when we have the Blog class, each specific blog that fits this template would be an instance of the Blog class:

      A blog instance

      To help identify when we are referring to the Blog class and when we are referring to a specific blog, we always capitalize the first letter of a class. So "Blog" for the blog class and "blog" for a blog instance. This rule applies to both this tutorial article and to the JavaScript code you will be writing.

      Also, you will notice that on Parse.com, you would see the word "object" a lot. In this context, we will be utilizing the rule of capitalization and use the word "object" for instance and "Object" for class. You will soon get used to that.

      A Blog Table

      Because a class defines all the attributes its instances have, it's easy to store all the instances of a given class in one table: each attribute would be a column, and each instance would be a row:

      A blog table

      And this is exactly how you are going to store data on Parse.com

      Create Blog Class

      Now let's go ahead and create it on Parse.com.

      Step 1: Add a Blog Class

      First, go to your dashboard on Parse.com, find your project and go to "Core" - "Data" (previously Data Browser). Then, click "Add Class."

      Add a blog class on Parse

      As you can see in the screenshot, you need to create a custom class for your blogs. Let's name it Blog. You always want your class names to be crystal clear and say what they store.

      And as you can see, you now have an empty custom class on Parse.com:

      Newly created custom class on Parse

      Every custom class would have four system attributes:

      • objectId - a unique identifier automatically generated by Parse when a new object is created. That way, the program always know which object you are referring to. (As you can see, here object just mean instance.)
      • createdAt - a timestamp automatically generated by Parse when you first create an object.
      • updatedAt - a timestamp automatically generated and updated by Parse every time you update that object.
      • ACL - an object-level access control List that defines who can read from and write to that object. If undefined, it defaults to the class-level access control. We will discuss it in future sessions. You can just leave it empty for now.

      Step 2: Add Columns to the Blog Class

      Next, let's move on and create columns for the attributes that defines a blog. To keep it as simple as possible, let's just do two of them: title and content.

      Click on the "+ Col" button to create a new column. Set the type to "String" and name it title.

      Add title column on Parse

      Repeat the same process and create a content column, also set the type to "String".

      Step 3: Add Some Blogs

      Time to add some blogs! Click on the "+ Row" button and double click on the title and content cells to add some content:

      Add blog posts on Parse

      Notice that you can also put HTML syntax in the content column. In fact, all string columns can correctly store HTML syntax. However, remember not to over use it. In this case, the title column probably should not contain HTML syntax.

      As I mentioned before, because Parse.com let you manipulate your database like this, you can totally use it as your admin panel if you don't want to write your own. And once you learn how to render that data on your website, you can easily create a dynamic blog or portfolio of your own. Moving on to the next part, I will show you how to do that.

      Retrieve Blog Data

      Go back to your blog.js file. It's time to take out the test code and get those blog data from the Parse.com to your website!

      First, extend a JavaScript class from the Blog class on Parse.com:

      var Blog = Parse.Object.extend("Blog");

      Thinking about a blog homepage, you probably want to get a list of blogs at once. That list of objects of the same class is called a collection by Parse. Let's also define that:

      var Blogs = Parse.Collection.extend({
          model: Blog
      });

      Notice that both Blog and Blogs are classes. They are the abstract templates for blogs and collations of blogs. You can have different, specific blogs, and collections of blogs. Those are their instances.

      So now, in order to have a real collection of all the blogs you added on Parse.com, you need to create a new instance of Blogs collection (notice that the first letter should not be capitalized here):

      var blogs = new Blogs();

      If we don't specify anything and just fetch that new collection with data, it will get all the rows in the Blog table by default.

      Let's fetch and log it into the console:

      blogs.fetch({
      	success: function(blogs) {
      		console.log(blogs);
      	},
      	error: function(blogs, error) {
      		console.log(error);
      	}
      });

      Load the website on your local server again, and check your console in your developer tools, you should be able to see this:

      Blog data in console

      Now you have the data!

      Display Data on the Page

      Before we display the blog data on the page, we need to prepare an HTML template for that.

      Step 1: Clean Up HTML

      Clean up everything within .blog-main and replace that with a simple container:

      <div class="col-sm-8 blog-main">
      	<div class="main-container"></div>
      </div>

      Then, if you take a look at the original blog template, you will find the HTML structure of one single post can be simplified like this:

      <div class="blog-post">
          <h2 class="blog-post-title"><a href="#">A title</a></h2>
      	<p class="blog-post-meta">At time by an author</p>
      	<div>Some content</div>
      </div>

      All we want is to replace those placeholder text with the data of each blog we have on Parse.com.

      Step 2: Prepare Blog Template

      To do that, we first need to change the HTML to a template, which takes a data object and change it a string of HTML.

      We want the template to take an array of blogs:

      [{
          title: 'Hello World',
      	content: 'The first blog post!'
      }, {
      	title: 'Second Blog',
      	content: '<p>You can put HTML in content, too.</p>'
      }, ...]

      And render it as HTML like this:

      <div class="blog-post">
          <h2 class="blog-post-title"><a href="#">Hello World</a></h2>
      	<p class="blog-post-meta">At time by an author</p>
      	<div>The first blog post!</div>
      </div>
      <div class="blog-post">
      	<h2 class="blog-post-title"><a href="#">Second Blog</a></h2>
      	<p class="blog-post-meta">At time by an author</p>
      	<div><p>You can put HTML in content, too.</p></div>
      </div>

      I will show you how to use handlebars.js to do that in this tutorial, but you can also use underscore.js, mustache, or other templates you prefer.

      In order to use handlebars.js, let's first add it to the index.html under parse.js:

      <!-- Handlebars.js -->
      <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>

      Then, let's take the cleaned up HTML of a single blog post and put it in a special <script> tag for handlebars just above the <script> tags for JavaScript files. Let's also give it the id of #blogs-tpl. This way, handlebars would know that it's a template, and you would have a way to refer to it:

      <script id="blogs-tpl" type="text/x-handlebars-template">
          <div class="blog-post">
      		<h2 class="blog-post-title"><a href="#">A title</a></h2>
      		<p class="blog-post-meta">At time by an author</p>
      		<div>Some content</div>
      	</div>
      </script>

      Next, to let handlebars know that where to put the title and content value, you need to change "A title" to {{title}} and "Some content" to {{{content}}}. Handlebars.js identifies the content within "double-stash" {{}} as variables. 

      <script id="blogs-tpl" type="text/x-handlebars-template">
          <div class="blog-post">
      		<h2 class="blog-post-title"><a href="#">{{title}}</a></h2>
      		<p class="blog-post-meta">At time by an author</p>
      		<div>{{{content}}}</div>
      	</div>
      </script>

      Notice that for content, we use {{{}}} instead of just {{}}. That's because handlebars.js HTML-escapes values by default. Using "triple-stash" {{{}}} keeps all the HTML syntax in the content.

      The final change you need to make to the #blogs-tpl is to wrap the blog template within {{#each blog}} {{/each}}, so it takes in an array of objects and render them one by one:

      <script id="blogs-tpl" type="text/x-handlebars-template">
          {{#each blog}}
      	<div class="blog-post">
      		<h2 class="blog-post-title"><a href="#">{{title}}</a></h2>
      		<p class="blog-post-meta">At time by an author</p>
      		<div>{{{content}}}</div>
      	</div>
      	{{/each}}
      </script>

      Step 3: Render Blogs

      Now that we have a template, let's go back to blog.js and render those blogs on the page. 

      To do that, you will be creating a view for the blog collection. The concept of a view is from the MVC (model–view–controller) architectural pattern, and Parse follows that pattern. I will not dive into MVC here. Just know that a view instance for a blog collection generates HTML for it and handles all its events.  And a View class is the abstract template for that instance.

      It can be confusing for now, but it would be clearer as we write the code. Let's write a BlogsView class:

      var BlogsView =  Parse.View.extend({
          template: Handlebars.compile($('#blogs-tpl').html()),
      	render: function(){ 
      		var collection = { blog: this.collection.toJSON() };
      		this.$el.html(this.template(collection));
      	}
      });

      Like how we extended Blog class from Parse.Object and Blogs class from Parse.Collection, you can simply extend a new View class from Parse.View so it has all the predefined values and functions from Parse.

      Here, the template variable get the template we prepared before. Then, the render() function get the data in this.collection, convert it to JSON format, render it with the handlebars template, and assign it to this.$el.

      Next, let's change the success callback of blogs.fetch() to create a new instance of BlogsView, render that new instance, and put it in the $('.main-container') on the page.

      success: function(blogs) {
          var blogsView = new BlogsView({ collection: blogs });
      	blogsView.render();
      	$('.main-container').html(blogsView.el);
      }

      Notice when you create a new instance of BlogsView, you pass in blogs, the blogs data you get from Parse server, that value becomes this.collection for the render() function. And when you put the HTML in $('.main-container'), you use the value of blogsView.el, which was the content of this.$el, created by the render() function. (Here blogsView.$el = $(blogsView.el)) That's how the View class and view instance works.

      Now let's refresh the page: http://localhost/blog/

      Blogs rendered

      And it's working! Now you can just push it to your GitHub Page and have a working dynamic content site! If you take some time to change the blog template and modify the code a little bit, you can easily create portfolios and other content websites.

      Conclusion

      Today, you've created your first class on Parse.com. You also learned how to add content in that class on Parse.com and how to render it on your website. There could be quite a few new concepts for you, but I'm sure you will get familiar with those very soon.

      In the next session, we will start building the admin page for the blog system. You will create your second class - the User class. You will also learn how to handle user login, and create two new views: login view and welcome view. So stay tuned, lots of good skills are coming your way.

      I think you guys could have lots of fun with what you've learned in this session. Let me know if this tutorial helped you create anything. And as always, check the source file if you got stuck and leave a comment if you meet any difficulties following along.

       

      0 Comments

      Leave a comment › Posted in: Daily

    1. PHP 5.6: What’s New

      It's been a long time coming, but we finally have a new version of PHP. With it comes a some nice, new features, improvements to existing features, as well as features that have been removed or marked as deprecated.

      Let's dive in and take a look at everything that's offered by the latest version.

      Backward Incompatible Changes

      In this part, I'll be listing backwards incompatible changes; however, most of your PHP5 code will work in PHP 5.6 without any modifications.

      json_decode

      As per the JSON specification json_decode() will immediately eliminate all non-lowercase variants of the JSON literals like true, false and null along with this it will set json_last_error() accordingly.

      GMP Resources

      If you are not sure what GMP in PHP then I would advise looking at here. In PHP 5.6, GMP resources are objects. You do not need to make any changes in your existing code unless you are checking resource using explicitly using is_resource().

      Mcrypt

      All Mcrypt function which expect key and IVs will not accept keys or IVs with incorrect size, these functions includes mcrypt_encrypt(), mcrypt_decrypt(), mcrypt_cbc(), mcrypt_cfb(), mcrypt_ecb(), mcrypt_generic() and mcrypt_ofb().

      Array Values and Overwriting

      Before PHP 5.6 when you declare array in class property with explicit and implicit key, array value was overwritten silently when explicit key was the same as a sequential implicit key.

      class helloWorld {
          	const ONE = 1;
      		
      		public $array = [
      			self::ONE => 'Eclipse',
      			'Sublime',
      			'PHPStrome',
      		];
      	}
      	
      	$hello = new helloWorld();
      	
      	print_r($hello);
      	
      	// Before PHP 5.6
      	array('Sublime', 'PHPStrome')
      	
      	// PHP 5.6
      	array('Eclipse', 'Sublime', 'PHPStrome')

      New Features in PHP 5.6

      Constant Scalar Expressions

      With the release of PHP 5.6, it is possible to provide a scalar expression which includes both numeric and string literals. In previous versions of PHP, it was expected to be static value of constant, function arguments and property declaration.

      const ONE = 1;
      // Scalar Expression in constant
      const TWO = ONE * 2;
      
      class helloWorld {
          // Scalar Expression in Property	
      	const THREE = TWO + 1;
      	
      	// Scalar Expression in Methods
          public hello f($a = ONE + self::THREE) {
              return $a;
          }
      }
      
      echo (new helloWorld)->hello()."\n";

      Variadic Functions via "..."

      Earlier we were using func_get_args() to get all arguments available in function call, but with PHP 5.6, this can be removed as we can easily get that facility with ... operator.

      function myTools($name, ...$tools) {
          echo "Name:". $name.'<br />';
      	echo "My Tool Count:". count(tools);
      }
      
      myTools('Avinash', 'Eclipse');
      // Output:
      // Name: Avinash
      // My Tool Count: 1
      
      myTools('Avinash', 'Eclipse', 'Sublime');
      // Output:
      // Name: Avinash
      // My Tool Count: 2
      
      myTools('Avinash', 'Eclipse', 'Sublime', 'PHPStrom');
      // Output:
      // Name: Avinash
      // My Tool Count: 3
      

      Argument Unpacking

      We can use the same operator (...) to unpack any argument which is either an array or a set of traversable objects. 

      function myTools($name, $tool1, $tool2, $tool3) {
          	echo "Name:". $name.'<br />';
      		echo "Tool1:", $tool1.'<br />';
      		echo "Tool2:", $tool2.'<br />';
      		echo "Tool3:", $tool3;
      	}
      	
      	$myTools = ['Eclipse', 'Subline', 'PHPStrom'];
      	myTools('Avinash', ...$myTools);
      	// Output:
      	// Name: Avinash
      	// Tool1: Eclipse
      	// Tool1: Subline
      	// Tool1: PHPStrome

      ** Shorthand

      ** operator has been added for exponentiation, we have got support for the shorthand operator as easily.

      echo 2 ** 3;
      echo "<br/>";
      $a=2;
      $a **= 3;
      echo $a;
      
      // Output
      // 8
      // 8

      Note that the order of operations comes into play using this operator. Please take a look at the following example for a clear understanding:

      echo 2 ** 2 ** 4;

      You might expect it to return 256 as grouping would be like (2 ** 2) ** 4 but that is not the case here. Real result would be 65536 as grouping would be from right to left and it will parse as 2 ** (2 ** 4).

      phpdbg

      An interactive debugger called phpdbg has been added in PHP 5.6. Please visit the official document for phpdbg.

      This phpdbg debugger is implemented as SAPI module.

      __debugInfo()

      A new magic method added in PHP 5.6, this method allow to change properties and values of an object when the object is output using var_dump().

      class demoDebugInfo() {
          private $val;
      	
      	public function __construct($val) {
      		$this->val = $val;
      	}
      	
      	public function __debuginfo() {
      		return [
      			'iamchanged' => $this->val + 3;
      		];
      	}
      }
      
      $debugInfo = new demoDebugInfo(50);
      
      // We will get altered array which is returned by __debuginfo megic method.
      var_dump($debugInfo);
      

      Default Character Encoding

      Default character set for htmlentities(), html_entity_decode() and htmlspecialchars() functions can be set using  default_charset()

      Large File Upload

      It is possible to upload file larger than 2GB.

      php://input is reusable

      php://input can be used as many times you want to read data. This feature has great reduction in memory compare to reading POST data.

      use function and use const

      use operator has been offered to support extending of constants and functions, this can be performed by using the const and the use functions, respectively. Earlier this operator was limited to class only.

      Deprecated Features

      Call From Incompatible Context

      Immediately it will generate E_DEPRECATED error when you attempt to access non static method statically or static method using object context.

      class helloWorld() {
          public static hiWorld () {
      	
      	}
      }
      
      $hello = new helloWorld();
      
      $hello->hiWorld();
      
      // Before PHP 5.6 
      E_STRICT error
      
      // From PHP 5.6
      E_DEPRECATED error
      

      $HTTP_RAW_POST_DATA

      $HTTP_RAW_POST_DATA is deprecated now, we should be using php://input instead.

      Encoding Setting

      With the launch of default_charset() configuration related option is deprecated for iconv and mbstring.

      List of Changed Functions

      List of all changed functions in PHP 5.6 can be found here.

      List of New Functions

      List of all New functions in PHP 5.6 can be found here.

      Conclusion

      While the PHP team is working on PHP6, PHP7 and PHPNG, I would say PHP 5.6 has covered a shipped with a solid amount of improvements and feature additions.

      Don't forget to let us know of any questions or comments you may have in the feed below.

       

      0 Comments

      Leave a comment › Posted in: Daily

    1. New Course: Building a Web App From Scratch With AngularJS

      AngularJS is an amazing front-end framework that has a very novel approach to building web applications, completely unlike any of the other frameworks you might be used to. If you're curious about how it works, and how you can use it to create powerful web apps, check out our new course, Building a Web App From Scratch With AngularJS

      What You'll Learn

      In this course, web developer Andrew Burgess will show you all the core components of Angular, and how they work together to build a complete application. 

      During the course, you'll create a web app from scratch using AngularJS. We'll take you through the whole process, step by step, starting with nothing at all and ending up with a complete, working address book app. 

      Along the way, you'll learn all about the core features of the framework, and will pick up some useful skills that you can use to start developing your own web applications with AngularJS.

      Watch the Introduction

      Start Learning With a 14-Day Free Trial

      You can take our new AngularJS course right now, with a completely free 14-day trial subscription. Take a look at the Tuts+ subscription options to get started. Or you can buy this course individually for just $15!

       

      0 Comments

      Leave a comment › Posted in: Daily

    1. Magento Theme Development: An Introduction

      In this series, we'll be taking a look into the basics of Magento Theme Development.

      Magento has earned a reputation for being one of the most flexible and powerful eCommerce platforms out there today. 

      Documentation for it is scarce leaving developers a conundrum to solve. That is to say it's relatively simple once you get to grips with the basics especially if you're someone who is comfortable with front end development.

      Before we go any further it's important to understand the purpose of this series and where we're heading over the next few weeks.

      This series is aimed at the very beginner and will cover the basics of front end theme development. If you're an advanced Magento developer this may not be the series for you. 

      In this series, we'll be covering the following topics:

      • Magento hierarchy
      • Packages and themes
      • Fall-back hierarchy
      • Layout files
      • Template files

      By the end of the series you will be well-equipped to at least have a solid understanding of Magento theme principles and be able to create and modify your very own themes like a professional!

      With that said, we're ready to get started.

      Magento Hierarchy

      First up, we need to understand the Magento Hierarchy and where our theme falls into place. There are hundreds of folders and thousands of files, far too many to list, I will only be focusing on the ones we need to work with.

      app/design/frontend/base/default/
      app/design/frontend/default/default/
      app/design/frontend/<package_name>/<theme_name>/
      
      skin/frontend/base/default/
      skin/frontend/default/default/
      skin/frontend/<package_name>/<theme_name>/

      Magento, at its core, has two folders app and skin which correspond with each other. The app directory contains files that control how the page templates are rendered, the structure. The skin directory contains files that control the appearance of the website such as CSS, JavaScript, and images.

      Within a sub-folder of app and skin are where our packages and themes can be found, a typical install of Magento comes with two packages base and default.

      So, before we go any further it's important we understand what packages and themes are. If we get this right everything else will fall into place nicely.

      All About Packages and Themes

      A package is a collection of related themes, there's no limitation on how many packages we can have and we must have at least one package present. Magento comes with a special package, if you will, called base. It's a repository for making Magento core files available to the front end. You must never edit the base package files, do so at your own risk - more on this later!

      A theme on the other hand is a direct sub-folder of a package which contains the files that make up your store, again there's no limitation on how many themes we can have within a package. A theme can only belong to one package and by convention each package must contain a theme named "default" which is the main theme for that package.

      What's Base All About?

      The base package only contains one theme named default. It comes bundled with every Magento install and contains the front end files that make our store run. There's a couple of rules we must accept with the base package.

      The first rule being as I mentioned earlier is not to edit these files, this means both in app/design/frontend/base/ and skin/frontend/base/  they should only be used for reference. Files that need to be edited should be copied from base to your package/theme. There are a couple of reasons for this which I will explain.

      These files are what make Magento core files in app/code/core/ available to the front end. We simply shouldn't be editing core files, this theory doesn't just apply on Magento but also applies on other platforms including WordPress. 

      The second one being that when you upgrade Magento it will likely overwrite the base package files. So all your hard work and edits to getting your website looking tip top will all be gone. Unless you took a backup you've pretty much had it!

      The second rule is the files in the base package are part of the fall back system, which I will explain next. In short, Magento will fall back on the core files found in base after it utilizes your package and theme. When it falls back it should be to the original intact file not an edited version.

      The third rule is do not create any themes inside of the base package.

      In summary, only use base for reference and if you need to edit a file copy it over to your own package/theme. If you do ever need to edit base do so at your own risk and keep track of your changes as you may need to manually restore them after upgrades, otherwise leave it well alone!

      What's Default All About?

      The default package again comes bundled with every Magento install but this time has multiple themes assigned to it. As of community edition 1.8.1.0 it has four different themes of which are:

      • default
      • blank
      • iphone
      • modern

      Just like the base package the exact same rules apply here. The themes in the default package are in essence purely for demonstration purposes only. Ideal for demo stores or if you want to showcase what Magento is capable of to your clients, its a quick setup.

      Fallback Logic

      Magento relies on a fallback logic to make themes easier to maintain and more upgrade friendly. It allows us to edit and maintain only the files we need within our theme. If we don't need to edit the file we don't need it in our theme, the file will be picked up from elsewhere. To explain this in detail we need a real life example.

      Say we have our own website which is setup to use our own package and theme like so:

      app/design/frontend/our_package/our_theme/
      skin/frontend/our_package/our_theme/

      Our website requests a template file named 1column.phtml and a CSS file named styles.css but Magento is unable to locate these files within our theme. Magento fallback logic will now search the next theme in the hierarchy for the files and continue searching until it locates the requested files.

      The following order demonstrates the fallback logic Magento goes through when looking for our files:

      app/design/frontend/our_package/our_theme/template/page/1column.phtml
      app/design/frontend/our_package/default/template/page/1column.phtml
      app/design/frontend/base/default/template/page/1column.phtml
      
      skin/frontend/our_package/our_theme/css/styles.css
      skin/frontend/our_package/default/css/styles.css
      skin/frontend/base/default/css/styles.css

      With this fallback logic in place it means we can have a clean code base by keeping our themes to the bare minimum. Only copy the files from base that we need to make modifications to otherwise leave the files out of our theme. If our website requests the file and we don't have it in our theme it will be located by going through the above logic.

      Note: If after Magento has been through the fallback logic and the file still cannot be found it will either throw a rendering error if it's in the app directory or if its in the skin directory it will likely throw a 404 file not found.

      Create and Enable Our Package / Theme

      Right, enough talk let's get down to setting it up. 

      First up we will create our very our package/theme setup. We'll start by creating the following folders:

      app/design/frontend/jasonalvis/default/
      skin/frontend/jasonalvis/default/

      Now we have a package called jasonalvis and a theme called default, feel free to rename your package to suit your needs. We will keep the theme name as default as each package should always have a default theme, remembering also that default is automatically part of the fallback logic.

      All that's left to do now is to enable the package via the Magento admin area. Once logged in head over to system > configuration. From here click on design from the left hand menu and then enter your package name in the Current Package Name field.

      While we are here notice below there is a themes section. This is where we would enter our theme name, but because we're just using default we don't need to type anything in here as Magento automatically seeks out this name. 

      For demonstration purposes say we had for example a theme we wanted to use during a sale we would create the theme like so:

      app/design/frontend/jasonalvis/sale/
      skin/frontend/jasonalvis/sale/

      Then all we would need to do is enable the theme in the admin area just like we did with our package:

      When to Use a Package or a Theme?

      So now you know how to setup your package/theme but whats best for which scenario?

      Well there are countless scenarios out there and I'm sure each and every one of you have a different one. It also gets a bit more complicated when you have a Magento installation with a multi-store setup. As a general rule the themes the package contains should be similar, otherwise they should be split out into packages.

      The default theme should be the site hub and the additional themes should simply be adjustments to the hub. If your drastically changing every aspect of the site in a theme it probably warrants it to be in a separate package entirely.

      Note: When creating additional themes within our package we don't have to create it in both the app and skin directories, only create the theme where it's relevant. Take for example our sale theme, it's only going to be styling changes, different color scheme etc the actual templating files are not being changed. Therefore only create the theme in the skin directory and edit the relevant files as required.

      With that said, let's call it a day. You should now have a solid understanding on the Magento hierarchy which you'll need to put into use through the rest of the series. As always any questions leave a message in the comments below.

      What's Next?

      In the next article, we're going to be taking a look into the basics of layout XML. In the meantime, don't hesitate to shoot us any questions, comments, or feedback below!







       

      0 Comments

      Leave a comment › Posted in: Daily

  • Page 1 of 28 pages  1 2 3 >  Last ›
  • Browse the Blog

    Syndicate

    governing-bruise