YOOtheme News Feed Commercial template club for Joomla. YOOtheme offers a wide variety of stylish templates with professional Web 2.0 features. http://www.yootheme.com/blog?view=category Mon, 22 Mar 2010 07:04:38 +0000 Joomla! 1.5 - Open Source Content Management en-gb Native comments for ZOO 2.0 http://feedproxy.google.com/~r/yootheme/~3/HGJ8RHnp2wU/blog http://www.yootheme.com/blog?view=item&item_id=302 This is our sixth article from our blog post series about the new ZOO 2.0 release. If you didn’t read the latest posts here you go: <a href="http://www.yootheme.com/blog/item/root/announcing-zoo-20">the ZOO 2.0 announcement</a>, <a href="http://www.yootheme.com/blog/item/root/the-zoo-20-app-concept">the new app concept</a>, <a href="http://www.yootheme.com/blog/item/root/zoo-20-usability">the usability improvements</a>, <a href="http://www.yootheme.com/blog/item/root/zoo-20-element-updates">all the new elements</a> and <a href="http://www.yootheme.com/blog/item/root/zoo-20-frequently-asked-questions">frequently asked questions</a>. <p> This time we are very proud to present the brand new, native comment system of ZOO 2.0. There is already some information about the great user interface of the comment system to be found in the <a href="http://www.yootheme.com/blog/item/root/zoo-20-usability">usability article</a>.</p> <h4>Why a native comment system?</h4> <p>Yes, it’s a legitimate question. A year ago we would have answered this question with: “It’s not really necessary. There are great web services like IntenseDebate or Disqus.” A year later we introduce our own comment system for ZOO. What happened? On our own YOOtheme blog we use a third party comment service. In the beginning everything worked out well but before long we discovered some anomalies. On blog posts with lots of comments some disappeared for no reason. Some of them resurfaced later on and some didn't. In another incident comments from one article were swapped with comments from another article. To make a long story short: these comment services are nice and easy to setup but a native comment system definitively gives you more control over your comments. A major benefit of a third party comment system is that you'll only need one user account to comment on any blog that uses this system. But with the upcoming of Twitter, Facebook, Google and OpenID many users already have a central user profile with an avatar. Therefore if your comment system allows you to login and comment with your social network account, it would be as great a benefit as the third party comment solution. Another plus for a native comment system is that the comments are searchable. Actually the development of a native comment solution isn't a 5 minute task. It would deserve to be an independent extension of its own. We decided to couple our native solution with Zoo 2.0 and rather focus on simplicity and usability.</p> <h4>Feature highlights of our native comment system</h4> <p>First of all we implemented support for Akismet and Mollom. Both are web services that prevent spamming in your blog posts. These services check if the comment seems to be spam or ham. If it's not ham, the comment is marked as spam and we move it to the spam folder. We decided against a CAPTCHA mechanism because these spam preventing services are much more user friendly. The user won't notice anything and doesn't have to fill out extra fields.</p> <p>In addition to prevent spam we added a black list feature. This means that when a comment contains any words from the black list in its content, name, URL, e-mail, or IP, it will be marked as spam. If a comment is not spam it can be approved by default, not by default or the approvement is only required once. The last setting is very useful. You can also set a time span between user posts so the user has to wait, before he is allowed to post again. We also decided to strip the HTML code from the comments by default. We think this is much better than allowing the user to enter any kind of HTML code. But we do detect automatically if the comment text includes any URL or email addresses. If so we add a link around the URLs with a rel attribute set to “nofollow”. The email addresses are also linked.</p> <p>By now one feature has become a standard of most comment systems: nested comments! Of course we implemented this feature too. You can set the maximum comment depth in the administration. The default maximum is five.</p> <p>Last but not least we support Gravatar. Gravatar is a web service to provide globally-unique avatars. You can register an account based on your email address and upload an avatar to be associated with this email address. When the user posts a comment and the email address is required our comments system checks whether that email address has an associated avatar at Gravatar. If so, the Gravatar is shown along with the comment.</p> <p>We got only one feature left on our todo list on which we are working right now. The connects for Twitter, Facebook and OpenID. We are not sure if they will make into the BETA but we will add them in short with the next update. </p><img src="http://feeds.feedburner.com/~r/yootheme/~4/HGJ8RHnp2wU" height="1" width="1"/> Fri, 19 Mar 2010 13:21:36 +0000 http://www.yootheme.com/blog?view=item&item_id=302 ZOO 2.0 Frequently Asked Questions http://feedproxy.google.com/~r/yootheme/~3/76VNph0LqeY/blog http://www.yootheme.com/blog?view=item&item_id=308 In the comments of our latest blog posts and on Twitter, we recently noticed some questions about ZOO 2.0 that were being asked more than others. There seems to be a lot of confusion if some demanded features will make it into ZOO 2.0 or not. Our latest posts are about the new architecture of ZOO 2.0 and all new features we developed. But of course we want to answers all your questions and clarify the features of ZOO 2.0. <h4 style="margin-top: 15px;">What about Frontend Submission?</h4> <p>The most demanded feature is frontend submission. But there are some misunderstandings about what frontend submission really is. Some are asking for frontend submission, some for frontend editing, some for frontend capabilities and so on. For us there is a big difference between user submissions and frontend access to the ZOO administration panel. The demand of administration through the frontend is caused by the need of a better permission management for Joomla. For example website administrators just don’t want to allow their customers to access the Joomla backend. Joomla 1.6 will solve this problem. It will have a completely reworked ACL system which looks very promising. Of course ZOO will make use of it as soon as Joomla 1.6 is released. Because of this, we have no plans for frontend administration for ZOO. Frontend submission on the other hand allows non-registered users to submit items. For example blog articles could be submitted or new files could be added to a download archive. Frontend submission is a more complex feature than frontend administration. You have to validate all submissions because user submissions cannot be trusted like submissions from administrators. We have a lot of ideas for the frontend submission and it is on top of our todo list. But for ZOO 2.0 we had to focus on the new architecture and all the basic stuff. We are very happy how everything worked out with the ZOO 2.0 development and after the release we will look forward to implement features like frontend submission. Currently we are not sure if it will make it in ZOO 2.1 or 2.2 but it has high priority. We are aiming for short release cycles for the next versions and it will not take long before we start the development.</p> <h4>What about multilingual content?</h4> <p>Currently Joomla offers no support for multilingual content. There are great extensions available to solve this problem like Nooku Content and Joomfish. In most cases this solutions works but for a complex content management extension like ZOO with CCK features it is a very difficult task - Not simply to make everything translatable but also to have a great usability, which is very important to us. To make a long story short, it is currently no solution available which works 100%. But of course we will keep an eye on the progress of multilingual extensions and maybe work something out in the future.</p> <h4>What about the framework?</h4> <p>ZOO 2.0 does not make use of any other PHP frameworks than the Joomla framework. There is a simple answer to that. ZOO is and will be used by a large user base. And to keep conflicts small we don’t want any dependencies to more than one framework. Think about Mootools and JQuery. We would never use both at the same time. There should only be one. Don’t be concerned. We are pretty sure our code quality will meet your expectations ;-)</p> <h4>What’s next?</h4> <p>We hope that we could answer a lot of open questions about ZOO 2.0 and that you are looking forward to the release. The next blog post will again be about the new features.</p><img src="http://feeds.feedburner.com/~r/yootheme/~4/76VNph0LqeY" height="1" width="1"/> Thu, 18 Mar 2010 11:11:41 +0000 http://www.yootheme.com/blog?view=item&item_id=308 ZOO 2.0 Element Updates http://feedproxy.google.com/~r/yootheme/~3/KzgNFZ19tlA/blog http://www.yootheme.com/blog?view=item&item_id=301 In this blog post about the new ZOO 2.0 we are taking a closer look at a fundamental part of the ZOO: The elements! For the new ZOO we reworked the entire elements architecture to make them more flexible and easier to use. And of course we added a bunch of new ones to extend the possibilities of what can be done with ZOO. <div style="overflow: hidden; margin: 15px 0px 15px 0px;"> <h4>Repeat Functionality</h4> <img style="float: right; margin: 0px 0px 25px 20px;" width="330" height="185" alt="New Elements for ZOO 2.0 - The Repeat Functionality" title="New Elements for ZOO 2.0 - The Repeat Functionality" src="http://www.yootheme.com/images/stories/blog/news_zoo20_elements_repeatfunctionality.png"> One of the things bothering us when creating content with ZOO 1.0 is the fact that if you have several paragraphs, for example in your article, you still have to code HTML in the textarea element. Wouldn't it be nice if the textarea was repeatable and you'd have one for each paragraph? The text paragraphs should be automatically separated by the needed HTML code. For example if you are creating a new item and you need a second text you simply click on repeat and a new textarea is injected into your item. We implemented this fantastic feature in ZOO 2.0 for the textarea and text element and also for some new ones. We took this idea a little further: if you can have multiple textareas, why not get rid of the way Joomla! handles the "System Readmore" break. It certainly feels better to have two independent textareas instead of some ominous code break in one textarea. Reduced complexity. </div> <div style="overflow: hidden; margin: 15px 0px 15px 0px;"> <h4>Image Resizing and Caching</h4> <img style="float: right; margin: 0px 0px 95px 20px;" width="330" height="141" alt="New Elements for ZOO 2.0 - The Repeat Functionality" title="New Elements for ZOO 2.0 - The Repeat Functionality" src="http://www.yootheme.com/images/stories/blog/news_zoo20_elements_imageresizing.png"> We were a little unhappy with the use of the image element in ZOO 1.0. For example you needed two image elements to show a teaser image on the category view and a second one for the item view. You had to select an image file for each element. In many cases it was the same image but with a different size. This is really annoying if you have a large number of images. Especially creating all the thumbnails locally with our favorite image editor is a pain. So we came up with the idea to have a resize functionality for the image element and here we are. In ZOO 2.0 it is possible to resize an image when you assign it to a template position. The clue is that you can define different sizes for different positions. Images can be resized by width, by height or both. If necessary the image is cropped automatically. And of course the resized images are cached! This is one of the little features which make life so much easier. Did I mention that not only the image element has this feature but also the images of categories and the frontpage. Awesome! </div> <div style="overflow: hidden; margin: 15px 0px 15px 0px;"> <h4>Related Items Element</h4> <img style="float: right; margin: 0px 0px 25px 20px;" width="330" height="140" alt="New Elements for ZOO 2.0 - The Repeat Functionality" title="New Elements for ZOO 2.0 - The Repeat Functionality" src="http://www.yootheme.com/images/stories/blog/news_zoo20_elements_relatedelement.png"> The third thing we really want to do with ZOO is to display related items in the item view of another item. For example if you are creating an online movie database you have movies and actors. In the item view of the movie you want to show the names and some thumbnail images of the actors. Each name should be linked to the item view of the actor. Of course if you change the actors name or his image it should also change automatically on the movie page where the actor is listed. Our new related item element is exactly developed for this purpose. The icing on the cake is that you cannot only display the name or the image of an item but also any of its elements! Think about the possibilities... Again, awesome! </div> <div style="overflow: hidden; margin: 15px 0px 15px 0px;"> <h4>Joomla Module Element</h4> <img style="float: right; margin: 0px 0px 25px 20px;" width="330" height="159" alt="New Elements for ZOO 2.0 - The Repeat Functionality" title="New Elements for ZOO 2.0 - The Repeat Functionality" src="http://www.yootheme.com/images/stories/blog/news_zoo20_elements_joomlamodule.png"> Joomla has a large extensions directory where you can find nearly any kind of module. Unfortunately, the module assignment is bound to the menu items of Joomla and it is not possible to load them on specific sub pages of an extension. Wouldn’t it be great if it was possible to load the YOOtools modules or any other module on a specific item page? Yes, in ZOO 2.0 we have a Joomla module element which lets you select any module instance from the module manager and have it rendered in the item view. For example it is possible to render the YOOcarousel or YOOscroller on any ZOO item page. </div> <div style="overflow: hidden; margin: 15px 0px 15px 0px;"> <h4>Core Elements</h4> <img style="float: right; margin: 0px 0px 0px 20px;" width="330" height="215" alt="New Elements for ZOO 2.0 - The Repeat Functionality" title="New Elements for ZOO 2.0 - The Repeat Functionality" src="http://www.yootheme.com/images/stories/blog/news_zoo20_elements_coreelements.png"> One of the most important features we introduce with our new template engine are element positions. Now it is no longer necessary to hard-code the elements rendering in the template. Instead you can arrange elements via drag 'n drop. But what about the native item attributes like name and author? It should also be possible to arrange and mix them together with the item elements. This is why we implemented the so called core elements for the items name, author, hits, categories, tags and modification and creation date. For example the core category element displays a link list of categories the item is sorted in. </div> <h4>More new elements and updates</h4> <p>With ZOO 2.0 we introduce a number of new elements for a better type creation. The first new element is a Google Maps element. Similar to the gallery element it has the same features and settings as the YOOtools pendant "<a href="http://tools.yootheme.com/extensions/yoomaps" target="_blank">YOOmaps</a>". All Google Maps features like Zoom Level, Zoom Controls, Map Type and Minimap are fully controlled through the element configuration. A special highlight is the "Get direction" tool which for example allows visitors to find their route to your company. Route planning has never been easier!</p> <p>We've got a new date element. It uses the Joomla date picker so you can easily pick a date from the calendar. Now you have the most important part to set up an event calendar with ZOO. The date element is one of the elements which support the repeat functionality.</p> <p>We've already got a select element which lets you create any select boxes for your items. But what if you need a select box with all countries of the world? Typing them all by hand? For each type? Now we've got a new country element! You can decide whether multi select should be possible or not. Furthermore more, you can restrict the selectable countries.</p> <p>The next very important element is the link element. It allows linking a text to an URL. It has some nice options like a custom link title and rel attribute. The rel attribute makes the integration of a lightbox very easy. The link element is one of the elements which supports the repeat functionality.</p> <p>Similar to the link element we have the email element which links to an email address. It allows a custom subject and body text. Furthermore the email address is cloaked in the source code to prevent spam. The email element also supports the repeat functionality.</p> <p>Last but not least we have similar to the core category element the related category element which allows picking the related categories manually. We also added some new options to the existing elements like rating and download element. We like to highlight the image element which now also can be linked to an URL and has a custom rel attribute for better lightbox integration.</p> <p>The topic of the next blog post will be the brand new, native comment system. Don’t forget to check out the latest blog post about the <a href="http://www.yootheme.com/blog/item/root/announcing-zoo-20">ZOO 2.0 announcement</a>, <a href="http://www.yootheme.com/blog/item/root/the-zoo-20-app-concept">the new app concept</a> and all <a href="http://www.yootheme.com/blog/item/root/zoo-20-usability">the usability improvements</a>.</p><img src="http://feeds.feedburner.com/~r/yootheme/~4/KzgNFZ19tlA" height="1" width="1"/> Mon, 15 Mar 2010 13:41:36 +0000 http://www.yootheme.com/blog?view=item&item_id=301 ZOO 2.0 Usability http://feedproxy.google.com/~r/yootheme/~3/kcI3CoKqN7g/blog http://www.yootheme.com/blog?view=item&item_id=300 In our last two posts we presented a <a href="http://www.yootheme.com/blog/item/root/announcing-zoo-20">brief overview about what’s coming with the new ZOO 2.0</a> and gave a quick peek inside the <a href="http://www.yootheme.com/blog/item/root/the-zoo-20-app-concept">new app concept</a>. In this post we're going to take a closer look at the new user interface of the ZOO administration area and all the usability features we included. Here we go... <div style="overflow: hidden; margin: 15px 0px 15px 0px;"> <img style="float: right; margin: 5px 0px 25px 20px;" width="260" height="128" alt="ZOO 2.0 Usability Improvements - Global Parameters" title="ZOO 2.0 Usability Improvements - Global Parameters" src="http://www.yootheme.com/images/stories/blog/news_zoo20_usability_globalparameters.png"> <h4>Global Parameters</h4> We like the global parameters concept in Joomla but it lacks on usability when you don’t use select boxes. So we improved it by using a checkbox to set whether you are using the global parameter or a specific parameter. If "global" is checked the parameter is hidden. If you uncheck it the parameter form will slide in with a nice Javascript effect. This gives you a much cleaner user interface for the global parameters. </div> <div style="overflow: hidden; margin: 15px 0px 15px 0px;"> <img style="float: right; margin: 5px 0px 25px 20px;" width="390" height="209" alt="ZOO 2.0 Usability Improvements - Item Priority" title="ZOO 2.0 Usability Improvements - Item Priority" src="http://www.yootheme.com/images/stories/blog/news_zoo20_usability_itempriority.png"> <h4>Item Priority</h4> Manual item ordering was a common feature request for ZOO 1.0. In Joomla everything can be order manually but you have only one order rule. It's either ordered alphabetically or manually or by hits and so on. We rethought the item ordering and came up with the idea of an item priority. In ZOO 2.0 items are ordered by priority and not by an unique order. Items can have the same priority which is great because this allows a second order rule for items with the same priority. For example you can order items alphabetically but also put some items first by setting a higher priority. The priority can easily be edited in the item overview and is saved automatically using Ajax. </div> <div style="overflow: hidden; margin: 15px 0px 15px 0px;"> <img style="float: right; margin: 15px 0px 10px 20px;" width="390" height="67" alt="ZOO 2.0 Usability Improvements - Slug Autocompleter" title="ZOO 2.0 Usability Improvements - Slug Autocompleter" src="http://www.yootheme.com/images/stories/blog/news_zoo20_usability_slug1.png"> <img style="float: right; margin: 10px 0px 45px 20px;" width="390" height="70" alt="ZOO 2.0 Usability Improvements - Slug Quick Edit" title="ZOO 2.0 Usability Improvements - Slug Quick Edit" src="http://www.yootheme.com/images/stories/blog/news_zoo20_usability_slug2.png"> <h4>Slugs</h4> In ZOO 2.0 we renamed the well-known Joomla "Alias" to "Slug". A slug is a unique name which only consists of web-safe characters and it is commonly used in search-friendly URLs. We like how unobtrusive the permalink functionality of Wordpress is and thought about making the slug creation for ZOO 2.0 just as smooth. The slug is automatically created based on the item name. Invalid characters are stripped and if the slug already exists a number is added to guarantee the uniqueness. There is also no input field during this process because in most cases there is no need to change the slug. But if you want to edit it an input field is injected right there. We really enjoy these small things to improve the overall user experience. </div> <div style="overflow: hidden; margin: 15px 0px 15px 0px;"> <img style="float: right; margin: 5px 0px 25px 20px;" width="390" height="173" alt="ZOO 2.0 Usability Improvements - Drag 'n Drop Categories Sorting" title="ZOO 2.0 Usability Improvements - Drag 'n Drop Categories Sorting" src="http://www.yootheme.com/images/stories/blog/news_zoo20_usability_categoriessorting.png"> <h4>Drag 'n Drop Categories Sorting</h4> Sorting a large tree of categories can become really annoying if there is no easy way to do so. In ZOO 2.0 you can sort categories by drag 'n drop! Isn't this awesome? You can drag any categories and their whole child categories and drop them into the root or any other category. The new hierarchy is saved automatically using Ajax. Which makes resorting your categories a breeze! </div> <div style="overflow: hidden; margin: 15px 0px 15px 0px;"> <img style="float: right; margin: 5px 0px 25px 20px;" width="390" height="156" alt="ZOO 2.0 Usability Improvements - Drag 'n Drop Element Positions" title="ZOO 2.0 Usability Improvements - Drag 'n Drop Element Positions" src="http://www.yootheme.com/images/stories/blog/news_zoo20_usability_elementpositions.png"> <h4>Drag 'n Drop Element Positions</h4> The first feature we implemented after the ZOO 1.0 release were template positions. For us this was the most missing feature in ZOO 1.0. Now it is no longer necessary to hard-code the elements rendering for your custom types in the template. You can arrange your content via drag 'n drop from the administration backend. This is really one of the greatest features about ZOO 2.0 and improves template development and the overall usability so much. Awesome! </div> <div style="overflow: hidden; margin: 15px 0px 15px 0px;"> <img style="float: right; margin: 5px 0px 25px 20px;" width="390" height="153" alt="ZOO 2.0 Usability Improvements - Tag Autocompleter" title="ZOO 2.0 Usability Improvements - Tag Autocompleter" src="http://www.yootheme.com/images/stories/blog/news_zoo20_usability_tagautocompleter.png"> <h4>Tag Autocompleter</h4> While the development of our tag system we needed an easy way to add and remove tags from items. We used and customized the great AutoCompleter script for MooTools from digitarald. It provides text suggestion and completion as well as multiple selections. Really a nice one to have! For example it is possible to enter comma separated words and all are added as tags in one step. </div> <div style="overflow: hidden; margin: 15px 0px 15px 0px;"> <img style="float: right; margin: 5px 0px 25px 20px;" width="390" height="115" alt="ZOO 2.0 Usability Improvements - Tag Quick Edit" title="ZOO 2.0 Usability Improvements - Tag Quick Edit" src="http://www.yootheme.com/images/stories/blog/news_zoo20_usability_tagquickedit.png"> <h4>Tag Quick Edit</h4> Tags are a really simple thing. The only attribute of a tag is its name. So it doesn't make sense for us that tags have their own edit view. So we also implemented a quick edit in the tags overview. Actually we really like the quick edit functionality and we tried to use it as much as possible. </div> <div style="overflow: hidden; margin: 15px 0px 15px 0px;"> <img style="float: right; margin: 5px 0px 25px 20px;" width="470" height="156" alt="ZOO 2.0 Usability Improvements - Action Links" title="ZOO 2.0 Usability Improvements - Action Links" src="http://www.yootheme.com/images/stories/blog/news_zoo20_usability_commentsactionlinks.png"> <h4>Action Links</h4> One thing we like in Wordpress is that users are not distracted by too much information. For example additional links to manage an item only appear when you hover with the mouse over it. In ZOO 2.0 we also used this concept as often as possible. It gives you a much cleaner user interface. Especially the comments manager benefits from this. </div> <div style="overflow: hidden; margin: 15px 0px 15px 0px;"> <img style="float: right; margin: 5px 0px 25px 20px;" width="470" height="198" alt="ZOO 2.0 Usability Improvements - Comments Quick Edit" title="ZOO 2.0 Usability Improvements - Comments Quick Edit" src="http://www.yootheme.com/images/stories/blog/news_zoo20_usability_commentsquickedit.png"> <h4>Comments Quick Edit</h4> Last but not least we like to point out that it is also possible to quick edit a comment from the comments overview. This works so great that we don't even need no extra view to edit a single comment. </div> <p>All these little things make content management so much more convenient! Next post will be a sneak peek of all the new elements...</p><img src="http://feeds.feedburner.com/~r/yootheme/~4/kcI3CoKqN7g" height="1" width="1"/> Wed, 10 Mar 2010 11:00:00 +0000 http://www.yootheme.com/blog?view=item&item_id=300 The ZOO 2.0 App Concept http://feedproxy.google.com/~r/yootheme/~3/r8IaaSmb_Rw/blog http://www.yootheme.com/blog?view=item&item_id=299 A couple of days ago <a href="http://www.yootheme.com/blog/item/root/announcing-zoo-20">we announced our brand new ZOO 2.0</a> extension and we are really excited about it! Today we want to show you the most important part of your new ZOO architecture: the apps! <p>One of the biggest goals for us during the development was to move from a catalog system to an application builder. The CCK feature from ZOO 1.0 already allows us to create content specific types to fit exactly your requirements. But on the other side everything in ZOO 1.0 was a catalog with the same parameters and content fields. We didn't like that concept that each catalog has the same properties and settings. For example a blog, a product catalog or a download archive aren't the same and have different requirements. So the next step was to allow catalogs to have their own properties, settings and workflows and to be a real content application. With ZOO 2.0 we did this step and it is not a catalog system with a CCK anymore. ZOO 2.0 is a content application engine that lets you create your own apps!</p> <h4>Let’s start with an example!</h4> <p style="overflow: hidden;"><img style="float: right; margin: 5px 0px 0px 20px;" width="385" height="280" alt="ZOO 2.0 App Concept - Apps and Instances" title="ZOO 2.0 App Concept - Apps and Instances" src="http://www.yootheme.com/images/stories/blog/news_zoo20_appconcept_01.png">Imagine you are setting up a new website and need a private blog. When you create the blog a new section will appear where you can manage your private blog with its own items, categories and content. After a few days you decided to start blogging about your business and you don’t want to mix it up with your private blog stuff. Again you can easily create a new blog and another section will appear where you can write articles about your business. This is great! You have 2 instances of the blog application and each instance manages its own stuff. A couple of weeks later you want to add your wines and electronics and make it a browseable catalog. Again you can create two separate instances of the product catalog app. One for wines and the other for electronics. In general you can create multiple instances of every app in Zoo 2.0.</p> <h4>The App Instances</h4> <p style="overflow: hidden;"><img style="float: right; margin: 5px 0px 35px 20px;" width="385" height="180" alt="ZOO 2.0 App Concept - App Instances" title="ZOO 2.0 App Concept - App Instances" src="http://www.yootheme.com/images/stories/blog/news_zoo20_appconcept_02.png">Normally you will spend most time working inside an app instance to create and manage your content. So let’s go back to our example. We created 2 instances of the blog app. In the configuration of each blog you can choose which template should be used to display the content. Further you can configure some global settings for example for the RSS feed and comments. In each blog instance you can manage its own content. This means each blog has its own frontpage, categories, items, comments and tags. And you can manage all this content in the blog instance. The same goes for the 2 product catalogs. But the big difference between the blogs and catalogs is that they are instances of different apps. This means they have for example different templates and settings to fit their specific needs. Let’s take a look at the core part: the apps itself!</p> <h4>The Apps</h4> <p style="overflow: hidden;"><img style="float: right; margin: 5px 0px 10px 20px;" width="385" height="420" alt="ZOO 2.0 App Concept - Apps" title="ZOO 2.0 App Concept - Apps" src="http://www.yootheme.com/images/stories/blog/news_zoo20_appconcept_03.png">In ZOO 2.0 apps are small ZOO extensions which are developed for a specific purpose like a blog, a product catalog, a download archive and more. Further each app comes with it's own templates which can be assigned to each app instance individually. Every template loads its own assets like images, CSS or JavaScript. Templates include sub templates for all app views like the frontpage, category and item. We also have to introduce a new core concept for the templates: the layouts! Layouts are responsible to render items with its element positions. Element positions are similar to the module positions in Joomla templates. Each layout has it's own set of element positions. So when you create your types you can drag ‘n drop the elements on the element positions provided by the template. In ZOO 1.0 you had to edit your template to render an element. This is no longer necessary. Just drag ’n drop them on the element positions. This is awesome! Another new feature of the template engine are global template parameters. Each template has its own set of parameters. When you create an app instance you can set the global template parameters in the configuration. These global parameters will be used by default but the template engine allows you to set them individually for the frontpage, each category and item. You know this concept from Joomla! but we improved it a little bit.</p> <p>Next important parts of an app are the types. We introduced the types and elements concept with ZOO 1.0 as Content Construction Kit (CCK). It allows you to create your very own custom content types which mean you can select the exact elements the type should consist of, like text, images or many more. Later when creating new items in your app instance you choose which type the item should be. For the blog app for example you would have an article and an author type. Also you can create predefined types which are bundled with the app. This is great because it allows users to start instantly creating the content using the predefined types. You can edit existing types and add easily new ones. Another great feature is that you can also attach your own elements. So if you need a specific element for your app and there is currently no one which matches your needs in the ZOO 2.0, you can add your own elements to the app.</p> <p>Further we provide a lot of parameters which allows you to configure and extend your app. You can define basic app parameters which can be used by the app. We got content parameters which allow extending the frontpage and categories with content fields. For example you can add text, textareas and images to categories. This means that app instances of different apps can have different content fields for categories. Isn’t this awesome? It’s a CCK for the frontpage and the categories! Further apps include comments configuration, language files and the alpha index. The alpha index configuration allows you to add more individual characters to match you native language.</p> <p>Of course we have an installation manager for apps. They can be uninstalled and you can install new ones. It is also possible to export your own created apps and share it with others. We hope this gives you a overview of the new app concept of ZOO 2.0. We are pretty excited with the new approach of ZOO 2.0 to be a content application engine.</p> <p>Next post we will take a closer look on the new user interface and all the usability improvements. We have more awesome UI stuff to show!</p><img src="http://feeds.feedburner.com/~r/yootheme/~4/r8IaaSmb_Rw" height="1" width="1"/> Mon, 08 Mar 2010 12:24:36 +0000 http://www.yootheme.com/blog?view=item&item_id=299 Announcing ZOO 2.0 http://feedproxy.google.com/~r/yootheme/~3/Dk6hi2X8OWI/blog http://www.yootheme.com/blog?view=item&item_id=298 Today we are really excited to announce one of the most anticipated extensions for Joomla: ZOO 2.0! Yes, we know some of you waited quite a while for this announcement. This is the start of a blog post series about the new ZOO 2.0. Today we want to give you some insight into the ZOO development and changes in the upcoming version. <p>Actually the new ZOO release was planned for summer 2009. We had some cool features implemented like “drag ’n drop” element positions to improve templating and the overall usability. The project codename was ZOO 1.1. But as always we had some new ideas and we did a brainstorming about how we could add essential improvements to the software architecture to make it more future proof. We didn’t like the old concept that everything is a so called "catalog". For example a blog isn’t necessarily a typical catalog and may have other features and workflows than a product catalog. And a business directory may have again different requirements. It was great that we already had a CCK which allows to build content items that meet exactly your requirements. The next big thing for us was to transform this idea and make it possible to build your own content applications which have their own parameters, workflows and features instead of having a super catalog, which has hundreds of parameters and options to cover everything. So we started the ZOO 1.5 development in late summer to move from a CCK to a Content Application Builder.</p> <h4>Introducing Content Applications</h4> <p>What does “Content Application Builder” mean? A content application (or in short: app) has its own application parameters. It has its own templates. Each template again has its own template parameters. Further a content app has its own types, items, categories, feeds, etc. It can even have its own elements. One of the great things is while you are working inside an app you are only seeing the content like items and categories of this particular app and it's not mixed up with other apps. This gives you a much better workflow when working with your content. We also wanted to make these apps exportable so that it is very easy to share apps among each other. So we implemented an installation manager which allows you to uninstall and install new apps. Also it was essential to us to make an app extendable. Finally apps became small extensions for ZOO with their own controller and views. You can do anything by extending your app!</p> <h4>ZOO 2.0 is around the corner</h4> <p>By designing and developing this new application architecture we reviewed the whole code base of ZOO 1.0. At the end nearly 100% of code is rewritten from scratch for the new version. The code is now slicker, more flexible and much improved. We put a lot of effort into developing ZOO 2.0 and it took almost twice the time than developing version 1.0. To reflect on the completely new architecture and all the new features we decided to make a major version jump to ZOO 2.0! Which other new features are included? We got our own brand new native comment and tag systems. Both are very slick with a great usability. We got a completely new template engine with element positions. You can now arrange your content via drag 'n drop. There is a new global parameter system for categories and items. All elements are completely rewritten and we added "repeat"-functionality and a lot of new features. And of course we also got a bunch of new elements. There is a lot more and we will talk about it in the next blog posts!</p> <h4>Goodbye ZOO LITE and PRO</h4> <p>How does the new app architecture affect the ZOO distributions? Another thing we didn’t like about the current ZOO 1.0 are the different ZOO editions: ZOO Pro and ZOO LITE. The update process isn’t that smooth if you want to move from LITE to PRO and we also have to deal with two different release packages. To cut a long story short with the new ZOO release there will only be one ZOO version. And now here it comes: it will be free for everyone distributed under the GPL license. It will include all the new features and a blogging app along with a template.</p> <h4>Cutting edge!</h4> <p>ZOO 2.0 is written from scratch and uses the latest web standards and technologies offered by modern browsers. We utilized all the new CSS3 properties and selectors, added the latest JavaScript stuff and used CSS image sprites for fast loading times. To achieve this we dropped the IE6 support for ZOO 2.0 like we already have for our templates since January 2010. ZOO 2.0 requires PHP 5.2+ and is of course compatible with PHP 5.3.</p> <h4>We care about our Members</h4> <p>You might ask: "ZOO 2.0 will be free and includes all new features? So why did I purchased ZOO PRO in the first placed?" Here is the answer. Currently we are developing a lot of new sophisticated apps for ZOO 2.0 to cover a wide range of uses. Like blogs, download archives, product catalogs and many more. Basically a versatile app bundle will replace the current ZOO PRO edition. We will also provide anybody who purchased the ZOO PRO edition access to the all new apps even if the membership is already expired. This means we will extend all active memberships and reactivate all expired memberships so that everybody has at least additionally two months of testing and working with ZOO 2.0 and all the apps. A couple of months ago we already extended the three months membership time to six months. So if you purchase the current ZOO 1.0 or the new apps for ZOO 2.0 you will have six months access to updates and our forum. We think this better reflects the time some projects take. One more thing: ZOO 2.0 will be a BETA release at first and only ZOO PRO members will have access to the BETA. Once ZOO 2.0 goes stable we will provide a public download for everybody.</p> <h4>The release date and the future</h4> <p>The release date for the ZOO 2.0 BETA is set for 23. March 2010. We got a new teaser site online with a countdown. <a href="http://zoo.yootheme.com">Check it out!</a> We will do a number of blog posts on the new app architecture and the new features in the coming days. After the BETA release it will not take that long for the public stable release. We are confident that the new architecture of ZOO 2.0 is future proof so that after the release we can focus on adding additional features. We are aiming for short release cycles for ZOO 2.1, 2.2 and so on. Also we will try to open the development process more by posting details about upcoming features. <p>If you enjoyed this reading get excited about ZOO 2.0! Because we are!</p><img src="http://feeds.feedburner.com/~r/yootheme/~4/Dk6hi2X8OWI" height="1" width="1"/> Tue, 02 Mar 2010 15:52:00 +0000 http://www.yootheme.com/blog?view=item&item_id=298 Intro template http://feedproxy.google.com/~r/yootheme/~3/CkmAaud6d5o/blog http://www.yootheme.com/blog?view=item&item_id=304 <p>In march we &quot;Intro&quot;duce our new template Intro. The clean and light design is predestinated for setting up a blog, a portfolio or any other content of your choice!</p> <p>The template comes with a very clean and open design, only wrapping the articles in boxes to put your websites content into the visitors focus. Most of the template colors can be easily customized by just editing CSS and the use of only a few images will accelerate template loading time.</p> <p>We created some new module styles for this template, like the new styles for the submenus and the <a href="http://tools.yootheme.com/extensions/yootweet" target="_blank">YOOtweet module</a>. The new module class suffixes for the ribbon header and the stamped style of modules complete the brand new look of this template. The template comes with 12 new color variations with subtle colors to match every kind of content.</p> <h5>New List Styles</h5> <p>Typography is a key element in web design. This templates delivers you a sophisticated typography and we also added two additional list styles to this template. The first new list style can be perfectly used to build lists with a nice menu style hover effect. It integrates in the template layout and changes its colors depending on the module position it is published in. The second one is a neat list style with a plus sign and a dotted line as separator. Both can be used to put your lists in the right perspective.</p> <p>Have a look at our Typography page and learn how to use them.</p> <h5>Feature list</h5> <ul class="checkbox"> <li>A variety of template color variations</li> <li>Built with the new Warp5 template framework</li> <li>Multi-column dropdown menu</li> <li>Lots of modules with color variations, endless combinations with icons and badges possible</li> <li>2-1-3 column ordering for search engine friendliness</li> <li>Compact size, using gzip and image sprites</li> <li>Works with all <a href="http://tools.yootheme.com" target="_blank">YOOtools</a></li> </ul> <a href="http://www.yootheme.com/signup"><img src="http://www.yootheme.com/images/stories/buttons/signup.png" width="170" height="35" alt="Join the YOOtheme club today!" /></a> <a href="http://demo.yootheme.com/index.php?show=mar10/index.php" target="_blank"><img src="http://www.yootheme.com/images/stories/buttons/viewdemo.png" width="170" height="33" alt="View demo" /></a><img src="http://feeds.feedburner.com/~r/yootheme/~4/CkmAaud6d5o" height="1" width="1"/> Mon, 01 Mar 2010 09:30:35 +0000 http://www.yootheme.com/blog?view=item&item_id=304 Vox template http://feedproxy.google.com/~r/yootheme/~3/A7eSv6-L2Ww/blog http://www.yootheme.com/blog?view=item&item_id=294 <p>We proudly introduce Vox, our new February Template. It comes with a very sleek and simple design which will match any type of content you put on your site. It perfectly fits for any kind of editorial content like news, media, sports, music and many more.</p> <p>One of the highlights of this template is the new designed tabbed style for the main menu which smoothly integrates the dropdown menu.</p> <h5>Template variations for every purpose</h5> <p>In this template we added 10 brand new astonishing template variations which will suite your needs. The wide range of different themes covers designs from clean over playful to complex background images. Your content will be supported by a large teaser area in the top position which, in combination with our <a href="http://tools.yootheme.com/extensions/yoocarousel" target="_blank">YOOcarousel</a>, can be perfectly used for rotating news articles or advertising.</p> <h5>Warp5</h5> <p>Vox is based on the powerful <a href="http://warp.yootheme.com/" target="_blank">Warp5 framework</a> which utilizes the latest web techniques. As <a href="http://www.yootheme.com/blog/item/root/goodbye-ie6" target="_blank">announced in back in August</a>, all templates released in 2010 and will drop the support for the old and outdated Internet Explorer 6 browser.</p> <h5>Feature list</h5> <ul class="checkbox"> <li>A variety of template color variations</li> <li>Built with the new Warp5 template framework</li> <li>Multi-column dropdown menu</li> <li>Lots of modules with color variations, endless combinations with icons and badges possible</li> <li>2-1-3 column ordering for search engine friendliness</li> <li>Compact size, using gzip and image sprites</li> <li>Works with all <a href="http://tools.yootheme.com" target="_blank">YOOtools</a></li> </ul> <a href="http://www.yootheme.com/signup"><img src="http://www.yootheme.com/images/stories/buttons/signup.png" width="170" height="35" alt="Join the YOOtheme club today!" /></a> <a href="http://demo.yootheme.com/index.php?show=feb10/index.php?yt_color=city" target="_blank"><img src="http://www.yootheme.com/images/stories/buttons/viewdemo.png" width="170" height="33" alt="View demo" /></a><img src="http://feeds.feedburner.com/~r/yootheme/~4/A7eSv6-L2Ww" height="1" width="1"/> Mon, 01 Feb 2010 12:04:26 +0000 http://www.yootheme.com/blog?view=item&item_id=294 Planet template http://feedproxy.google.com/~r/yootheme/~3/_Mp4dxtj7i4/blog http://www.yootheme.com/blog?view=item&item_id=293 <p>Happy New Year 2010! Enjoy our new template creation "Planet"! We used a complex process to catch the colors sparks of new years fireworks and build it into our latest template.</p> <p>This template comes with four impressive color variations: Black, White, Green and Blue. They fit perfect for gaming and sports sites. They are combined with different color and glow effects. We introduce two new impressive visual effects: We animated the background image of the header to create a pulsating gradient effect. And we slowly change colors of module headers, article separators and more to create a glowing color effect.</p> <p>This new YOOtheme template is based on the powerful <a href="http://warp.yootheme.com/" target="_blank">Warp5 framework</a> which utilizes the latest web techniques. As <a href="http://www.yootheme.com/blog/item/root/goodbye-ie6">announced in back in August</a>, all templates released in 2010 and will drop the support for the old and outdated Internet Explorer 6 browser. Taking this step will ensure better templates which use latest web standards and technologies offered by modern browsers.</p> <p>Come and visit the four Planets (The Dark, Ice, Battle and Water Variations) of this template or customize them to create your own new worlds.</p> <h5>Feature list</h5> <ul class="checkbox"> <li>Black, White, Green and Blue template variations</li> <li>Built with the new Warp5 template framework</li> <li>Multi-column dropdown menu</li> <li>Lots of modules with color variations, endless combinations with icons and badges possible</li> <li>2-1-3 column ordering for search engine friendliness</li> <li>Compact size, using gzip and image sprites</li> <li>Works with all <a href="http://tools.yootheme.com" target="_blank">YOOtools</a></li> </ul> <a href="http://www.yootheme.com/signup"><img src="http://www.yootheme.com/images/stories/buttons/signup.png" width="170" height="35" alt="Join the YOOtheme club today!" /></a> <a href="http://demo.yootheme.com/index.php?show=jan10/index.php?yt_color=blackblue" target="_blank"><img src="http://www.yootheme.com/images/stories/buttons/viewdemo.png" width="170" height="33" alt="View demo" /></a><img src="http://feeds.feedburner.com/~r/yootheme/~4/_Mp4dxtj7i4" height="1" width="1"/> Fri, 01 Jan 2010 17:42:00 +0000 http://www.yootheme.com/blog?view=item&item_id=293 Explorer template http://feedproxy.google.com/~r/yootheme/~3/dbuUEDs_gss/blog http://www.yootheme.com/blog?view=item&item_id=285 <p>Welcome 'Explorer', our new December Template. The Explorer template features really extensive themed variations for different purposes and different font-faces using CSS3. Like all our latest templates, Explorer is based on the <a href="http://warp.yootheme.com" target="_blank">Warp5 Joomla template framework</a>.</p> <h5>Template variations at its best</h5> <p>This time we have taken it a step further, to provide you great looking variations for websites about Adventure trips, Traveling, Vacations, Sports and Blogging. Further to provide a overall consistent layout, every variation comes with it's own style for the modules. So make sure to check out every single template variation! This template also features a large top module position to publish your pictures or promotional content, e.g. in a <a href="http://tools.yootheme.com/extensions/yoocarousel" target="_blank">YOOcarousel</a>.</p> <h5>CSS3 Web Fonts</h5> <p>In Explorer, we used one of the great new features of CSS3, the font-face rule. With font-face you can enhance your website by using your favorite font. Just have a look at the article- and module headlines of this site. We also included different fonts for the templates variations.</p> <h5>Feature list</h5> <ul class="checkbox"> <li>Extensive themed template variations</li> <li>Built with the new Warp5 template framework</li> <li>Multi-column dropdown menu</li> <li>Lots of modules with color variations, endless combinations with icons and badges possible</li> <li>2-1-3 column ordering for search engine friendliness</li> <li>Compact size, using gzip and image sprites</li> <li>Works with all <a href="http://tools.yootheme.com" target="_blank">YOOtools</a></li> </ul> <a href="http://www.yootheme.com/signup"><img src="http://www.yootheme.com/images/stories/buttons/signup.png" width="170" height="35" alt="Join the YOOtheme club today!" /></a> <a href="http://demo.yootheme.com/index.php?show=dec09/index.php" target="_blank"><img src="http://www.yootheme.com/images/stories/buttons/viewdemo.png" width="170" height="33" alt="View demo" /></a><img src="http://feeds.feedburner.com/~r/yootheme/~4/dbuUEDs_gss" height="1" width="1"/> Tue, 01 Dec 2009 19:43:17 +0000 http://www.yootheme.com/blog?view=item&item_id=285