Apr 07 2014
Apr 07

Hitting a contractible deliverable for accessibility is generally easy enough, even despite Drupal's best efforts to scupper all attempts with forms and redundant labels and other hidden gotchas. A deliverable in these cases usually comes in the form of meeting a standard, whether it be a North American client wanting Section 508 coverage, or A UK client wishing for AA coverage and protection from UK disciplinary against the Accessibility Acts laws. It’s these requirements that are commonly tested against some automated checker that gives you a nice happy ‘well done your site is accessible’ message. But the harsh truth is these automated tools look against pretty binary challenges; for however good they are, they will not perform logical tests or analysis. So lets don the Spock ears and look at accessibility from a logical point of view against some of the most common, annoying, yet challenge-passable errors your website will face.

ALT text

Simple test: do all inline images in your content have ALT text? The answer is probably yes, or at least it should be – and you can’t use the excuse that the content is client generated and they might miss the ALT text. At this point I'm assuming a certain degree of developer competency, that you know when to use an inline image and when a CSS background image is necessary. So all your images have ALT text, that’s great, then you’ll more than likely pass this test, but what we really need to know, in order to have a correctly accessible pass, is whether the ALT text actually benefits those that make use of it. To steal a quote from Wikipedia: “Alternative text allows the content and function of an image to be understood by text-only readers.” So go back to your page, find your ALT text, and read it to the person sat next to you. Now show them the image; does the ALT text actually provide the information that you see in the image? If not, then I’m afraid you’ve failed. Bad ALT text is arguabally worse then none at all, it just wastes time and nobody likes wasting time.

Link order and volume

If you ever get the chance, watch a visually-impared user - who is competent with a screen reader - navigate around the web; it is truly astonishing how quickly they can find whatever it is they are looking for. It's actually quite simple in practice: a dialog box of links is often their first port of call, loading all the available hyperlinks on a page in the order they are found, from the top down. So what? If I ask you how many links are on your page, chances are it's far more than you imagine, especially those loading within advanced 'mega nav' menu or dropdown navigation components. Priority links need to appear first, any content loading into dropdowns needs to be delivered logically, perhaps utilise some HTML5 technology with data attributes to bring this content in. The volume of links will stay the same unless you want to be really brave and ditch the drop-down all together, but what you have achieved is giving the links some degree of importance value.

Headers structure and order

Headers (h1, h2, etc.) are the single most important pieces of content on a webpage, yet the most abused and misused I come across. Pre-HTML5 a single h1 was the first piece of content a user would expect to focus on. From a styling point of view, it's obvious, assistive technology locates and presents this in a similiar way to the links dialog box discussed previously. But for assistive technology and logic in general, headers need to be hierarchial, even more so now that we can have multiple h1's correctly deployed within article sections of an HTML5 document.

The order is simple: an h2 is associated to its h1, an h3 to the h2, and so on down the stack. All too often headers are used to cheat styling, not providing useful structure to the content given to the user. Have a look at your webpage using a tool like the WAVE toolbar in FF, this will show you all headers. If you have floating h2's without an h1 in the same article or section, it needs changing. Assistive technology will not be able to correctly assess how important these are, so the user will therefore be equally confused. Makes sense, doesn't it?

Fieldsets, Labels and Legends

These I have to say are becoming more than a pet hate for me to put right, but it’s a simple case of understanding what they do.

The clue is in the name: a fieldset is a group of fields, or a set of fields, as the name suggests. We know a field is a partnership of a label and an input; in the same way a fieldset requires a legend, youcan't have one without the other - that'd be like having Ant and no Dec. The label is read with the input for assistive technology form components; if we add a fieldset and legend to the mix, then the technology would read the legend, then the label and input for each and every form component in the fieldset. This can get tedious if the fieldset is used to group fields instead instead of a header.

A common example of a fieldset would be one that groups ‘Personal Information’ of a user (first name, last name, dob, etc.) with a legend that states ‘Personal Information’. In this example a screen reader would read, “Personal Information, First Name, input, Personal Information, Last Name, input, Personal Information, dob input” and so on. The only real use of fieldsets and legends should be to contain radio and checkboxes, or fields like date and time, where the day month year values are separate inputs. So it makes sense for the legend to be read before each label and input. Use the title markers (h1, h2, h3 if necessary) to split the form up in the same way you would if it were a conventional article. Go back to the forms on your page and check the fieldset usage. Chances are it's hindering your accessibility approach by prolonging the time required to understand what information is covered by the form, and what needs to be completed.

Colour Usage

All too commonly we're blocked from meeting good accessibility standards before we've even started to code anything. A design will come through, look very shiny and polished, has responsive coverate, and is expertly annotated. But wait! What happens to focus or hover?

You change the blue colour used to highlight a link into a different blue from your corporate colour palet. Hmmmm, now our users that struggle with distinguishing a full colour palet will not notice that change. Ok, so the mouse icon changes from the arrow to the hand, that's great! But what about keyboard-only users? Thirdly, the excellent point you highlight in the sentence of an article using a red colour looks brilliant, but to users with difficulty distinguishing colour, the red looks the same as the black text colour. In these instances we have to get quite persistent with our client and reiterate that links that change blue on hover and focus need to have an underline added. This is called a 'change of state' so no matter what colours you see you'll notice the difference.

As a little tip here make sure your css covers: :hover, :focus, and :active pseudo elements. For important pieces of content in text: be a bit smarter with your syntax, move away from what is probably a span and a class. The easiest solution is to use bold or italics for featured content; strong and em are read much different in screen readers. Even the same bold / italic approach with a class that takes the font styling away from bold / italics back to the normal default will cover our bases.

Keyboard Traps

The last failsafe to check in our flying-stop tour of real world accessibility is the keyboard trap. Not all users use pointer devices like a mouse, and obviously mobile and tablet presentations of your page generally won’t either. Some users navigate exclusively with a keyboard, tabbing, or better still using the arrow cursors to move freely around a webpage. Chances are the more evolved your UI gets the more it relies on mouse interactions in its desktop view, so if something expands and contracts (accordions, mega navs etc.) make sure the trigger to open is the same as closing. There are loads of really useful keyboard safe scripts out to help an evolving UI play nicely with keyboard navigation. If your user can’t escape your top navigation, they will never find their way past your opening content, this will soon become too annoying and too stressful to continue and they move away. Again, the automated checklist of accessibility will not look for this, so you can't really say “Yes Mr or Ms Client, we’ve made your site truly accessible" until you can demonstrate this.

To conclude, I believe making your work accessible shouldn’t be a optional deliverable. We have a duty of care to the real world of users to build this in as part of our work, a lot of it is just good practice with your mark-up and CSS and the decisions you make when composing this. Finally, no mater how good automated test tools are for verifying your work, they won’t cover everything. It's best to ensure for your own pride and satisfaction that you review the work done against the points above, it’ll be quite embarrassing if you give the work your seal of accessibility approval only to be found out by real world users that it isn’t. To close, for those who do yield my observations, I take my hat off to you; together we are making the digital world a truly inclusive world.

Mar 26 2014
Mar 26
{{#if useSimpleSecondCol}} {{#if useSecondColThin}} {{else}} {{/if}} {{#with secondColumn}} {{#if simpleList}} {{/if}} {{#if complexList}} {{/if}} {{/with}} {{else}} {{#with secondColumn}} {{/with}} {{#with thirdColumn}} {{#with content}}

{{title}}

{{#each images}} {{/each}} {{/with}} {{/with}} {{/if}} {{#with thirdColumn}} {{#if fullBanner}} {{#with content}}

{{top_title}}

{{{description}}} {{/with}} {{/if}} {{#if view}} {{{content}}} {{/if}} {{/with}} {{#if hasFourthColumn}} {{#with fourthColumn}}

{{title}}

{{{description}}} {{/with}} {{/if}} {{/if}} {{{description}}}
Mar 24 2014
Mar 24

The media and entertainment business model has changed quite a bit over the last 20 years due to the incorporation of new technology. The incorporation of new technology has created new business needs - individuality over mass-media consumption - rendering a new business model which is no longer broadcast-based. It is necessary to consider the consumer's needs regarding media consumption and therefore, the customization process: interaction, sharing, proactivity, and creativity. This is a model which has proven to be more effective than the old broadcasting one.

So which technology would support this new market and also provide the customization, flexibility, and interactivity needed? Drupal - a content management system (CMS) and content management framework (CMF) that powers websites and applicaitons - is the answer.

But why Drupal development? The benefits of Drupal to the media and entertainment industry include:

1. Content Management;

2. Customization and Social Media Interactivity;

3. Coverage and Portability; and,

4. Monetization.

1. Content Management Drupal is highly content driven, therefore enabling content management and maintenance dynamically. Drupal can attend the needs of media industry by publishing content in a very diverse and fast way while simultaneously respecting the life-cycle of content. Drupal can also support states of content development such acquisition, production, packaging, distribution, and archiving. Drupal completely supports the media business model for all phases of content management.

2. Customization and Social Media Interactivity One of the current, and high, demands of this industry is the need to engage consumers in a personalized way. It doesn't make sense to distribute content for a user that has no interest on the subject. The customization need to be provided because it's incentive for the users to interact, share, and consume. One the best advantages of Drupal is the modulation that provides a fast path to customization, and incentive for consumers to interact, share, or even create the content.

3. Coverage and Portability Drupal is engineered to provide portability in the web environment. When you use Drupal creating a responsible layout you are accommodating your site to several platforms such as mobile devices, tablets, and desktops. Besides portability, Drupal can also provide customization in different languages. The multi-lingual support is part of your model, making it easier to provide regional content translations.

4. Monetization Once the customization has an approach to supply the personalization needs of media consumers it is possible to create business models and strategies to monetize the content with: advertising, subscriptions, promotions, or one-time purchase interactions.

For reference, our portfolio features some successful Drupal sites within the media and entertainment industries:

FOX News Candidate Tracker App

MTV new site with community and e-commerce

NBC Universal

2012 Vancouver International Film Festival

Drupal is a fantastic tool to support the demands of the media and entertainment industry. Drupal gives the flexibility to attend individual necessities on different types of content, supporting the best solutions to help improve the entertainment business model.

About Partner

Acquia is the digital experience company. Intuit, Warner Music Group and Stanford University are among the more than 4,000 organizations that are transforming their digital businesses with Acquia’s open cloud platform. Global 2000 enterprises, government agencies and NGOs rely on Acquia to create new revenue streams, lower costs, and engage audiences more deeply through content, community, commerce and context.

  • Recent Achievement: Deloitte's Technology Fast 500 (2014).

Learn more about the partnership

Mar 17 2014
Mar 17

In the age of fast-paced news and social media there are still some who look to their favourite magazines to stay up to date with their news and events. These days, it’s hard to find someone holding a physical magazine in their hands, they're either on their handheld devices or going through their computer. It's not easy to fill all the magazines' information onto one page; on the one hand, the magazine might want to showcase all of their best stories, but at the same time, doing so may make the website look busy and unorganized. Luckily, some of the most well-known magazine brands have made it easy to look for the same magazine-based information, but have brought it to the reader over the web. The following are some of the best designed magazine websites on the internet.

Time

Time

At a time (no pun intended) where the world needs access to a reliable news source, Time magazine has stepped up to the plate. They have built a site that is both easy to read and responsive. By displaying the featured news items on the left and the latest headlines on the right, Time Magazine has found a great way to balance the screen space.

GQ

GQ

It’s no secret that GQ is one of the most popular men’s magazines out there, so why not try and achieve the same for the website. Right off the bat, you’re hit with fashion imagery with a banner that stretches from edge to edge. As you scroll down, you find a list of articles laid out beautifully in a stylish grid.

National Geographic

National Geographic

Known for their exemplary photography, National Geographic spared nothing in bringing these images into their website. The site boasts simplicity and showcases big images with large, easy-to-read fonts. Each article is not limited to just one large image but comes with a variety of powerful photographs, some of the things that we’ve come to expect from this brand.

Road & TrackRoad & Track

Car enthusiasts have come to love the Road & Track magazines for their insightful articles and fantastic imagery. So when it comes to building an exquisite website, Road & Track came ready to play. This site features a static navigational bar, stunning photography, and great articles. If you’re not around a computer to view this site, not a problem, the site is also responsive so mobile viewers get the same treatment.

NewsweekNewsweek

Newsweek’s website not only looks amazing on a desktop, but it also comes in a responsive version so you can access it anywhere on the go. That’s great since their website is full of amazing imagery and intriguing news stories. After clicking on an article to read more, you’re given a navigational bar that gives you access to all of Newsweek’s featured items. 

Mar 12 2014
Mar 12
{{#if useSimpleSecondCol}} {{#if useSecondColThin}} {{else}} {{/if}} {{#with secondColumn}} {{#if simpleList}} {{/if}} {{#if complexList}} {{/if}} {{/with}} {{else}} {{#with secondColumn}} {{/with}} {{#with thirdColumn}} {{#with content}}

{{title}}

{{#each images}} {{/each}} {{/with}} {{/with}} {{/if}} {{#with thirdColumn}} {{#if fullBanner}} {{#with content}}

{{top_title}}

{{{description}}} {{/with}} {{/if}} {{#if view}} {{{content}}} {{/if}} {{/with}} {{#if hasFourthColumn}} {{#with fourthColumn}}

{{title}}

{{{description}}} {{/with}} {{/if}} {{/if}} {{{description}}}
Feb 17 2014
Feb 17

Although Appnovation started out as a Drupal development shop, we also support many different languages, technologies, and frameworks. The nature of this industry is always in a state of flux and serving the needs of your clients requires the ability to adapt and implement the most appropriate solutions as needed. Keeping on top of the latest technologies allows you to evaluate the best solution to the problem.

There are many technologies available to us and we need to be able to switch to different technologies when appropriate. Although there are many different aspects to programming languages and frameworks, there are commonalities that we can look for and learn in order to master a new technology. Computer programming languages are used to solve problems and provides you with many tools in order to do that.

Here are some basic aspects of computer programming languages and some related functionality in Drupal.

When we program we are usually looking at state and behaviour. State refers to the data (what the information is at a given time) and behaviour refers to the code (what the program does).

State

One of the basic components of programming languages is the variable. The variable represents state and is used to store data. Data can be stored in memory for short term use or saved to a physical medium for long term storage. We use variables for many things such as temporary placeholders for data used in calculations.

  • In Drupal we store long term data in a database to which we create, read, update, or delete (CRUD) using either core, contributed, or custom modules. Most of the data in Drupal is saved as nodes. Nodes are a basic unit of content in Drupal and comprise of a database table entry that includes an unique id number, a type (classifying the node), and a title. These basic units are saved in one table (the node table) and can be extended with fields; fields are saved in separate tables for each field. This allows us flexibility in creating new types of content but gives us the ability to easily make changes to all content.

Behaviour

Behaviour is the functionality of the code. We use code to carry out instructions in a specified order. Instructions are carried out in a specified sequence, with loops to perform repeating instructions and conditional statements to specify which instructions to execute based on whether a condition is true or false.

  • In Drupal the behaviour is executed by PHP code. The framework is created in PHP and we also use PHP to write modules to customize that behaviour.
  • Core modules are the base modules bundled with the Drupal framework. These modules give us our basic Drupal functionality and allows use to interact with our data. Contributed modules are modules that are shared with the community, and address specific needs not addressed in the core modules. In many cases the core and contributed modules can address the needs of basic web development. For a more customized site we require custom modules that are written to address specific needs.

Conditional Statements

Conditional statements allow you to perform different behaviour based on whether a condition is true or false. This allows the program to react to input and deliver an appropriate response.

  • In the Drupal system the equivalent to conditional statements is the Rules module. The rules module allows you to perform actions based on events. We can do things like send out an automated thank you email when a user has posted 50 messages to a forum, or raise a users permission level when they have been a member of the site for a certain period of time. Rules gives us a lot of power to automate actions based on conditions that we set.

Reusing code

Most languages have libraries that contain prebuilt functions that have been found useful to many users. This allows us to use established code that has been proven in use rather than trying to recreate the code ourselves every time.

  • One of Drupal's greatest strengths is it's community, and Drupal's equivalent to libraries are modules that are uploaded to the drupal.org site and can be downloaded and used by the entire community. While this doesn't always give us exactly what we need, we can always patch the code with our needed functionality and submit it for approval to the community. This way it becomes incorporated into the community module and allows others to access and improve it.

Interface

Although the importance of the interface can sometimes be overlooked, it is one of the most important pieces of a program. Without an interface there is no way to input or output data. The most commonly known interface is the Graphical User Interface (GUI). The GUI is a friendly interface for people to interact with machines. There are many other interfaces as well, which is especially important with web technology. We interface with the database, the user, other web sites, and APIs that allow us to harness the power of other systems.

  • Drupal has an excellent user interface that can be easily modified and enhanced. We don't need to code the interface from scratch since Drupal comes with an interface and allows us to use forms to modify them.
  • Drupal also allows us to connect with files containing content information and makes it easy to import and update data using data files such as .csv files. These files can be stored on a server and Drupal will update the content at a scheduled interval.
  • Often we have to communicate with other systems; Drupal has a Services module which allows us to communicate with other systems, and use web services. We can access REST services and make a request to another system and receive XML data in response to our request.

Writing code for Drupal is very exciting because it is such a powerful framework with many aspects to consider. Drupal development ranges from the base level of writing PHP code to create and modify modules, creating the user interface using HTML and CSS, and to the higher level of creating content types and rules. Although Drupal development may seem complicated we can understand it when we look at the different aspects of it and master them individually.

Feb 11 2014
Feb 11

In this post I wanted to share my experience of setting up a new Drupal 8 theme.

I wanted to take Drupal 8 for a spin and familiarize myself with the new TWIG template system and other theming changes, so I set out with a goal of creating a simple, clean, minimal configurations blog theme. I called it "Formata." Sounds like a cool name, right?

Demo  of the theme.

You can also Download or Clone it from GitHub

What is included in this theme:

Installing Drupal 8

You can find the latest Drupal 8 Release here or on Github

As of writing this we are at drupal 8.0-alpha8. Once you have that set up on your environment, be cautious about making upgrades and installing contrib modules (if they exist for D8). At this point Drupal 8 is in active development, so things can change and break very easily. As always, Clear Cache often and backup your Database.

Drush

I had to upgrade the Drush install in order to use it with D8. Since I am using homebrew all I had to do was: $ brew unlink drush then $ brew install --HEAD drush. Also the drush cache-clear all or drush cc all command is deprecated for Drupal 8 so instead I had to use drush cache-rebuild or the short version drush cr command.

If you are using Sublime or Textmate you might find this Twig syntax highlighting and auto-completion plugin useful.

Setting up the theme

I started looking into the D8 theme set up by reverse engineering an existing core theme. You can use Bartic or Stark (now a core theme). These themes were specifically useful and helped me better understand the new API, TWIG syntax, and different variables. There are other contrib themes that are actively being ported to Drupal 8 and have lots of good stuff in them. I've looked at adaptivetheme and gratis as an example. For more info check out D8's documentation or this post I put together earlier about D8 resources: Top Resources for Getting Started with Drupal 8

Theme directory

Your custom theme now goes into a "theme" directory in the root and not in the "/sites/all/themes" as we had gotten used to in Drupal 7.

.info file becomes theme_name.info.yml. Drupal 7's .info file was proprietary to Drupal. Now D8 has adopted the YAML format which is a standard for many programming languages. The advantage of YAML is that it uses a specific standard that's supported by other libraries.

Adding stylesheets


    # Add a CSS file:
        stylesheets:
          all:
          - css/style.css
    

You can also remove a system stylesheet. For example drupal.base.css is now replaced by normalize.css but in my theme I've removed it as I am using compass reset


      # Remove a CSS file:
        stylesheets-remove:
          - normalize.css
     

If you want to include a different version of normalize.css, you can also do an override:


        # Override a CSS file
          stylesheets-override:
          - normalize.css
     

Same with adding javascript files


        # scripts:
           - js/custom-script.js
    

Setting up regions


        regions:
           content: 'Content'
           sidebar: 'Sidebar'
           footer: 'Footer'
       
   

As you can see this is pretty straight forward, and not very different from D7.

page.html.twig

All theme files are now html.twig instead of .tpl.php. For example "page.html.twig" and variables in the template use twig syntax.


    {% if page.sidebar %}
      {{ page.sidebar }}
    {% endif %}
      
  

template.php becomes theme_name.theme

Libraries and Scripts

By default Drupal 8 doesn't load any additional scripts. So jQuery is not there, you have to declare it as a dependency. Drupal 8 now comes with Backbone.js and Underscore.js which can also be your dependencies.

drupal_add_js and drupal_add_css are deprecated so we need to use hook_library_info to declare jQuery and Modernizer as dependencies. For all core assets look into /core/assets/vendor

Here is an example of how I ended up bringing in custom javascrpt and its dependencies



  function formata_library_info() {
      // Add jquery as a dependancy on script.js
      $libraries['formata.corescripts'] = array(
        'title' => 'Adding all scripts and dependencies',
        'version' => '1.0',
        'js' => array(
         drupal_get_path('theme', 'formata') . '/js/jquery.fs.naver.min.js' => array(),
         drupal_get_path('theme', 'formata') . '/js/jquery.scrollUp.min.js' => array(),
         drupal_get_path('theme', 'formata') . '/js/rainbow/rainbow.min.js' => array(),
         drupal_get_path('theme', 'formata') . '/js/rainbow/rainbow.linenumbers.min.js' => array(),
         drupal_get_path('theme', 'formata') . '/js/rainbow/language/generic.js' => array(),
         drupal_get_path('theme', 'formata') . '/js/script.js' => array(),
        ),
        'dependencies' => array(
          array('system', 'jquery'),
          array('system', 'modernizr'),
        ),
      );
      return $libraries;
    }
    drupal_add_library('formata', 'formata.corescripts');

    

For external CDNs I used this



  function formata_css_alter(&$css) {
    $theme_path = drupal_get_path('theme', 'formata');
  // Add googlefonts.
    $googlefonts = '//fonts.googleapis.com/css?family=Merriweather:300,300italic,700,700italic,400,400italic|Merriweather+Sans:400,400italic,700,700italic,300italic,300';
    $css[$googlefonts] = array(
      'data' => $googlefonts,
      'type' => 'external',
      'every_page' => TRUE,
      'media' => 'all',
      'preprocess' => FALSE,
      'group' => CSS_AGGREGATE_THEME,
      'browsers' => array('IE' => TRUE, '!IE' => TRUE),
      'weight' => -1,
    );

     // Add FontAwesome.
    $fontawesome = '//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css';
    $css[$fontawesome] = array(
      'data' => $fontawesome,
      'type' => 'external',
      'every_page' => TRUE,
      'media' => 'all',
      'preprocess' => FALSE,
      'group' => CSS_AGGREGATE_THEME,
      'browsers' => array('IE' => TRUE, '!IE' => TRUE),
      'weight' => -2,
    );
  }

      
  

Gem file and Bundler set up

I used sass, compass, Singularity for responsive grids and Breakpoint for media queries. These gems had to be declared as dependencies in my gemfile, and Bundler takes care of the rest.

Sass Structure and Partials

This part is not necessarily Drupal 8 specific and I will not go into too much detail about it here, it just helps me keep things organized. I have to credit @Snugug and Team Sass for all the great tools they produce. This theme's structure is very similar to Drupal's Aurora which I use for all my D7 projects. I like this set up and I've adopted the structure with some modifications here:



├── partials
│   ├── design
│   │   └── _design.scss
│   ├── global
│   │   ├── _base.scss
│   │   ├── _extendables.scss
│   │   ├── _functions.scss
│   │   ├── _mixins.scss
│   │   ├── _typecsset.scss
│   │   └── _variables.scss
│   ├── layout
│   │   └── _layout.scss
│   ├── navigation
│   │   └── _navigation.scss
│   └── typography
│       └── _typography.scss
└── style.scss

All the responsive stuff is done with Singularity and Breakpoint which are great additions to my workflow.

For example if for a medium breakpoint I need my main content to span the width of 5 columns starting on the 3rd column, and 7 columns for a large breakpoint, I can declare it with these singularity's mixins:



  #main-content {
    @include breakpoint($break-medium) {
      @include grid-span(5, 3);
    }
    @include breakpoint($break-large) {
      @include grid-span(7, 3);
   }
  }

  
  

Typography and Vertical Rhythm

For Vertical Rhythm I've tried Typecsset which is a small Sass library for setting type on the web. It gives you an automatic, pixel-perfect, baseline grid.



  $typecsset-base-font-size:      16px;
  $typecsset-base-line-height:    24px;
  $typecsset-show-baseline:       true;


In conclusion

Overall, my experience with D8 theming was great. There is obviously more to learn about the new API, TWIG, and hook system, which I intend to explore as D8 gains more prominence.

Once again you can view the theme here: Demo

And Download or clone it on GitHub

Jan 27 2014
Jan 27

With the internet being more accessible across many different devices these days, it’s no surprise that responsive design have seen a rise in popularity. Gone are the days of pinch-to-zoom. A wide range of websites now automatically adjust their layout according to the user’s device. Some have even stretched the boundaries of the standard 960 grid and take up the full width of the screen. This has been a great approach when it comes to reaching out to their audience. These types of sites not only look great on any device, but also makes the text easier to read. Even those who are not as internet-savvy are able to easily navigate around a responsive site.

The following are some websites that take advantage of this new responsive approach:

Microsoft

Microsoft

The makers of the famous Internet Explorer line, Microsoft went all out and built an excellent website. Their website showcases a very colorful, clear and concise design. With the release of the Windows Phone and The Surface, it only made sense to showcase their website on these devices.

 

Starbucks

Starbucks

If you’re an avid coffee drinker like myself, you’ve likely landed on the Starbucks website at some point. They have managed to keep their simple design and carry it over to any device you’re viewing on. The main menu transforms into a drop down button, which gives users more of a cleaner look while navigating on their mobile phone. 

 

Smashing Magazine

Smashing Magazine

One of my favourite online magazines has taken full advantage of screen real-estate. With the previous two examples, I’ve talked about how great they look on smaller mobile devices. Smashing Magazine has gone beyond that and stepped outside of the standard grid. Their website looks amazing whether you’re viewing it on a mobile device or an extra large monitor. Developers have stretched the boundaries and engineered the site to expand to the edges of the screen.

 

Mashable

Mashable

When you first view the desktop version of the Mashable website, you might be thinking “How are they ever going to fit all of that content into a smaller viewing area?” They achieved this by taking the minimal route and making the mobile version more compact with tabs. The navigation also slides from the left so it does not interfere with the main content.

The Next Web

The Next Web

The Next Web is another example of a site taking advantage of the full width. The design is very simple and clean, which is what you come to expect when you’re reading an article on an online blog. The neat and tidy look carries on to smaller screens. You also have the option to sort and filter your articles with the nifty overlay menu from the top left. 

CSS Tricks

CSS Tricks

CSS Tricks is one of the websites which I visit quite often. As a front-end developer, I find myself always reading their articles on the regular. So when I want to read about the latest news in design and development, I don’t have to worry too much as I can access their site whether I’m on my mobile device or on my laptop.

Mozilla

Mozilla

Mozilla has done a great job of keeping the same look and feel with their design. The text and images remain big and bold on any device. They have also retained the main call to action buttons in the body of the website.  On the desktop version, these animate horizontally. This transforms to animate vertically to accommodate the smaller mobile screen area.

Jan 20 2014
rmo
Jan 20

As many of you know, CSS and JavaScript aggregation is one of the easiest ways in all known methods to increase performance of any Drupal site for end-users, yet many have not taken this into consideration. Aggregation is provided in Drupal and works magically out-of-the-box, so no need to worry. This would be true under normal circumstances, but as the site grows more complex and more modules are added, you may find that the site is not loading any faster than if you had aggregation turned off. Well, allow me to welcome you to the Dark Side of Aggregation!

Concept 1: “One large file is better than many small files.”

Under normal circumstances, Concept 1 holds true because making a call to download one large file is much more efficient than calling the server many times to get smaller files. CSS and JavaScript aggregation is based on this concept, but there are exceptions. Aggregation would fail when files are constantly changing – if one line of code differs from the original, all files will need to be re-aggregated and downloaded again. What a waste of resource and bandwidth, right?

Drupal 7 addressed this shortcoming with a new strategy; aggregates are separated into three distinct function groups:

  • CSS: CSS_SYSTEM, CSS_DEFAULT, and CSS_THEME
  • JavaScript: JS_LIBRARY, JS_DEFAULT, JS_THEME

And files are aggregated in the order described, introducing another concept:

Concept 2: “Sometimes a few smaller files are better than one large file”

Let me explain why Drupal decided to handle aggregation in this manner. The order in which files are loaded into the browser is very important – dependencies would cause problems – especially with JavaScript since it can be added at the top of the page or at the bottom. Also, modules and themes can conditionally add JavaScript and CSS into the page, which would definitely defeat the purpose of aggregation.

In order to maintain the desired effects we can group files that remain unchanged throughout the site into one. Those that require strict ordering need to be put into another file; files that change often may or may not require you to aggregate them. This allows us to sort out dependencies and save resources and bandwidth on dynamically added scripts. After all, we would have to aggregate the files again if one line of code changed.

As outlined in the API documentation, JavaScript aggregates are generated in this order (CSS follows similar pattern):

  • First by scope, with 'header' first, 'footer' last, and any other scopes provided by a custom theme coming in between, as determined by the theme.
  • Then by group. Then by the 'every_page' flag, with TRUE coming before FALSE.
  • Then by weight.
  • Then by the order in which the JavaScript was added. From Drupal: "For example, all else being the same, JavaScript added by a call to drupal_add_js() that happened later in the page request gets added to the page after one for which drupal_add_js() happened earlier in the page request."

The take-away:

For site admins:

  • If you are managing a small to medium size site, default aggregation settings from modules and themes would do just fine. As CSS files are the main ones on the page, we can safely assume that there aren't many JavaScript files on the page.
  • If you are managing a large site with over hundred modules there is a very high chance that there are a lot of JavaScript files. In this case we would need to take aggregation into consideration. You might need to use hook_js_alter() and hook_css_alter() to make aggregation effective.

For module and theme developers:

  • Be aware that the JavaScript and CSS might not play well with others when aggregated.
  • JavaScript dependencies need to be sorted first with the appropriate flags set so that order is respected. For example, if you are adding a library then use JS_LIBRARY flag in the options array of drupal_add_js().
  • Conditionally added scripts should not be aggregated, unless the scripts might appear in various places.
  • Files added in the .info file via css[] and script[] arrays appears on every page.
  • One thing to note is Drupal.settings JavaScript object never gets aggregated.
Jan 17 2014
Jan 17

If you saw my previous blog post then you will know that I recently created a tri-lingual site using Drupal 7. That post covered the configuration of Drupal core to allow both the user interface and the site’s content to be multilingual.

However, in the interests of completeness, I must tell part 2 of the story…

Although I had successfully configured core and I could switch between the supported languages, the site remained resolutely monoglot in various crucial places. This highlights the relative complexity of multilingual site-making with Drupal development, which requires an assemblage of modules to complete the process.

Core functionality is extended by the Internationalization project, which provides its own functionality as well as giving us an API that can be used for custom functionality. This is exactly what has been done by the authors of various add-on modules which further complete the multilingual capabilities of your Drupal site.

Internationalization module Overview

The module provides the following functions via submodules. You should enable individual submodules as you need them, rather than suffering the overhead of invoking unnecessary code! 

  1. Block languages

This allows you to add a language parameter to a block so that the block is only displayed when the site is in the relevant language-mode.

  1. Contact translation

This enables you to translate the contact forms that are generated by the Contact module.

  1. Field translation

This allows for translation of text associated with a field's settings including the help text, default value, and list options.

  1. Menu translation

This allows translation of menu items by adding a language field. You can choose to translate and localise a menu, which enables you to create a single menu with translated terms, or fixed language, which enables the creation of different menus per language. Use the former method if the menu structure is the same across each language and the latter if not.

Multilingual content

This extends the control that you can exercise over the language settings for your nodes. It’s possible to set a default language for a particular content type so that it is the current language: make it a requirement to set a specific language rather than have the node default to neutral, and lock the language of the node.

  1. Multilingual forum

If you want your forums to be multilingual both in terms of their UI and content then this module provides that.

  1. Multilingual select

This module adds a language selection to Drupal’s core pages. This applies to the default homepage as well as lists of content assembled via taxonomy, so long as the taxonomy translation module has also been enabled.

There is a conflict with taxonomy terms that have been translated with entity translation.

  1. Path translation

If there is no natural way to link translations (for example via content translation for nodes) then this module allows pages to be associated together as translations.

  1. String translation

This module provides the means for string translations by other modules. With it enabled modules can call the translation interface with the default string and receive a translation.

  1. Synchronize translations

Where translation is facilitated via separate language-specific nodes that coexist via a relationship, this module allows synchronisation of changes that are made to fields that contain identical values across each translation.

  1. Taxonomy translation

This module allows you to translate vocabularies and their terms. You can choose to localize or translate (see menu translation).

  1. Translation redirect

Improves search engine optimization (SEO) for multilingual websites. By default, multilingual pages can be accessed via different paths by changing the path prefix or domain. Search engines tend to penalize displaying the same content at more than one URL, so it's important to redirect to a single instance of the page.

  1. Variable translation

Allows you to translate text and settings that are stored in Drupal as variables. These variables include text such as 'site name' and 'site slogan', as well as settings like 'Default front page' and 'Default 404 page'.

Finally, I found the i18nviews module necessary for translating the labels and other components of my views.

Dec 12 2013
rmo
Dec 12

It’s official! Our module for osCaddie Drupal Alfresco Integration is officially open to the public! You can now download the Development version directly from Drupal.org. In case you wonder what is osCaddie Drupal Alfresco Integration (or osCaddie for short), and what does osCaddie do? I’ve provided a snippet from the project description…

“osCaddie Drupal Alfresco is an integrated solution providing seamless communication between Drupal and Alfresco. Contents are synced with Alfresco whenever there is an update to content in Drupal, Alfresco will be updated. New content is created on Alfresco as soon as it is created on Drupal.”

For the site administrators and/or content managers, this means that Alfresco can act as a centralized repository for all content. Drupal, thus, can serve as the entry point for content creation (since Drupal has a much more user-friendly interface for creating content than Alfresco) and for display. One of the best features of osCaddie is that it can connect multiple Drupal sites from different physical locations into a single Alfresco server.

In order to sync content from Drupal to Alfresco, it must converts the underlying data structure of Drupal into Alfresco. Having that in mind, osCaddie is designed to allow…

“… content-type mapping with Drupal and Alfresco, meaning a non-standard content-type (such as additional textfields, radio buttos, or checkboxes) can be used on Alfresco.”  

The module allows any number of standard CCK fields such as text, textarea, select list, checkboxes, radio buttons, and date fields to be mapped into Alfresco with help from the osCaddie administrative interface to ease the mapping process. One of the marvels of osCaddie is that content-types can be synced back and forth between Drupal and Alfresco. You can create a content-type in Drupal, sync it into Alfresco, delete the content-type in Drupal, and have it restored from Alfresco. In fact, if more than one Drupal instances are connected with Alfresco and each has its own set of content-types, you can sync content-types across them all. This is truly a Special Feature unique to osCaddie!

The solution consists of a set of modules that are standalone and can be deployed to any new or existing Drupal instance. osCaddie Alfresco portion of the solution is compatible with Alfresco 3 and 4 community and enterprise. However, the current of version osCaddie Drupal is only available for Drupal 6. A version for Drupal 7 will be available in the near future.

Visit the osCaddie project on Drupal.org: https://drupal.org/project/osCaddie

Dec 09 2013
Dec 09

Successful Multilingual Sites With Drupal 7

Part 1

“Given the appropriate environment, two languages are as normal as two lungs.”

The decision to make your website multilingual may be driven by the desire to increase site traffic, increase sales, gain a better competitive edge, or as a courtesy for your customers. Whatever the reasons, a successful multilingual project requires a comprehensive and robust translation backbone.

Fortunately, Drupal 7 provides this necessary backbone. However, if you’ve not done this before then there is a bit of a learning curve to go through. There is also the situation that there are multiple ways of translating content and you might need to decide between them.

In an effort to flatten this curve, I offer this blog post which is written in the light of my recent experiences in creating a tri-lingual system.

Localisation

Localisation is concerned with the characteristics of the site that serve to define its local environment. 

1.       Setup basic localisation.

Drupal core provides the basis of localisation at Administration > Configuration > Regional and language. Here you can set the default country for the site as well as the default time-zone.

2.       Install required languages.

Additional settings are maintained through the Locale module, which also allows you to present your Drupal site in a language other than the default (English). Note that the module allows you to translate the site interface not the content. You need additional modules for that.

Locale allows you to select from any of the 80 or so languages that are supported by the Drupal translation communities. You can install and manage supported languages at admin/config/regional/language/configure.

Installing a language is facilitated through gettext using portable objects files which contain source strings and their translations. Once installed, you will be able to display your site’s UI in the new language, registered users may select their preferred language, and authors can assign a specific language to content.

3.       Set how the site selects the language for display.

You can select the logic used to determine which language is shown to the user using the detection and selection tab. For example you can set the language according to the url pattern used to display the page. A typical example is that French pages will be displayed whenever the path is prefixed by fr.

4.       Enable the language switcher block.

The locale module generates a block containing the necessary code to display a link, which can be used to select the desired language. Note that there are contributed modules that provide additional functionality here. For example, the Language Icons module that provides icons for language links.

Part 2 – Translation

Now that you have the UI translations successfully configured it is time to think about your site’s content. This is where the multiple options mentioned earlier come into play.

Option 1 – Content translation module

Earlier versions of Drupal created a complete copy of each node that needed translation. So a French node would have all the French values of the content and the English node would have all the English values. They are organized together in translation sets, so Drupal knows which are the 'same' content.

Option 2 – Entity translation module

There is an alternative where each piece of content consists of a single node, but each field on the node can have multiple copies, in different languages, all attached to the same entity.

Additionally, Drupal’s modular architecture allows you to “mix and match” these options by having one option for one set of content types and the other option for another set.

How to choose?

 The strategy you choose depends on the functionality and design of your site. Our partners at Acquia have provided a handy table to help make a decision.

Content translation

Entity translation

Only works on nodes

Works on all entities

One node per language

One entity for all languages

Uses core node title field

Requires title module

Views language filtering works

Required a patch to filter on entity language

 XML Sitemap works

XML Sitemap could not filter on entity language

Block translation is difficult (apart from title)

Bean block module

Multiple menu items per language

Single menu item per language

For my project we chose Content translation because the user wanted different versions of the node for each language. So the rest of this post is about that option.

 5.       Enable the Content Translation module.

The Content Translation module enables you to select a language for each node on your site.

6.       Configure content types to support translation.

You have to set each and every content type that you want to translate to support translations. This is done at Administration > Structure > Content Types. Edit the required content type and set the Publishing options for Multilingual support to enabled with translation. Now when creating content you can set its language. Translations are associated with each other enabling the system to display the correct translation depending on the current site language.

This is enough to get the basics of localisation and translation working but it’s only part of the story. In addition to this we had to make use of the Internationalisation module to provide additional functionality, such as translating variables and views. That’s a subject for another blog post.

In the meantime Drupal’s own guide to multilingual site production is at a good read.

Dec 02 2013
Dec 02

In Drupal development, menu items get explicitly linked to node id, rather than aliases. Even though you might specify a menu link to point to /home, the back-end will store it as node/7. If you have a homepage on dev as node/7, but on staging the homepage is node/9, and on prod it's node/19, it can be extremely difficult to move menus across environments. You tested and commit code made on dev, but once deployed to staging, it points to random pages, your /about page goes to your /404 page, and your /home page goes to /faq, while QA wonders if you even look at your own code.

This is an example of one of the issues I encountered while working on menus, albeit a bit exaggerated, and apparently I was only scratching the surface on how menus are created, stored, and exported. Needless to say, I needed a better solution to my “menu problem,” as I quickly saw that I would have to do the same thing many times again in the future. After a bit of iteration, I found a few modules that seemed to help me develop menus, and as such, I have generated a list of a few modules to quickly develop and export menus.

Menu Editor

Menu Editor provides a single page to provide inputs of Title, and Paths. This module helps speed up the creation of menus by allowing users to create menus on one single UI page.

Menu Attributes

By default, Drupal does not allow menus to have attributes such as target or style; luckily, Menu Attributes is a module that allows developers to change attributes of menu links.

Menu Block

If you need to make Menus that need to be separated onto different parts of the page, Menu Block provides configurable blocks of menu trees using Drupal’s standard menu tree navigation. If you need blocks of menu trees at a specific level of a menu, take a look at this module.

Superfish

Superfish integrates the jQuery Superfish plugin with Drupal to provide extra functionality to Drupal’s menus, such as accordions or drop-down menus.

Menu Import

This module helps to easily transfer menus from one Drupal site to another. Menus may contain path alias or node IDs. Another bonus is Drush support.

Export Menu Items (sandbox)

As of this posting, Features does not support two menu items in the same menu that have the same path. This is a sandbox module developed to tackle that issue, by using UUID to identify different menu items, and is fully exportable using Features.

Nov 27 2013
Nov 27

Being an avid gamer, I thought I would get out there on the internets and see what video game industry websites were not only well built and designed, but also use the Drupal CMS. For each website I’ll talk a little bit about the overall visual appeal, their UI/UX (maybe even a little bit of information architecture) and I’ll also highlight a particular feature that made the website stand out to me as a front-end developer. Also keep in mind that not all of the websites in this list are for a video game in particular, but in the video game industry as a whole. Listed in no particular order:


We might as well start out with the heavy-hitter of the group here: League of Legends. With an active user base of over 32 million users, this is a fantastic example of a Drupal video game site that is showing its worth for a large scale enterprise setup. For its visual appeal, you gotta love the big, larger than life graphics that they are using for the backgrounds and the main navigation. They stick to a colour palette that I assume is sticking with the brand design guidelines as well, which always makes a huge difference to general aesthetics and balance. As for UI/UX they keep it simple, using what is commonly referred to as the K.I.S.S. methodology (Keep It Simple, Stupid). Basically they aren’t trying to overcomplicate the page, it's very clear and concise where you’re supposed to navigate in order to accomplish your goals as a user when you get to the site. A great example of this is their main navigation which also features what you could call a “Mega Nav” if you wanted. The difference between a “Mega Nav” and a simple drop down list is that they usually have links grouped in categories with some supporting imagery or other elements that you wouldn’t normally expect a drop down navigation to have. This allows the website to have most - if not all - of their links in a central place of the website, once again making it easy for users to navigate and find what they’re looking for.

Favourite Feature: Their “Promo Slider” they have right below the main navigation is pretty cool, especially when they mix in some animations to give it that extra oomph. That isn’t a real word but I’m using it anyways. And yes, while their current animation is using flash, they are providing a fallback via a background image - good job Riot!

Star Wars! As far as brand recognition goes, it doesn’t get much better than this, so it’s great to see them using Drupal for one of their biggest and most ambitious titles to date. Visually, they are definitely playing to their audience by showcasing large, action packed imagery of not only the game, but concept art as well - classic video game website tactic but an effective one nonetheless for that “Wow” factor. The site also uses iconography to great effect throughout the body of the page which I’m really glad to see. Icons (used properly) are a great way to break up what could be very text heavy sections, and also help to guide the user to particular actions that perhaps one word couldn’t possibly cover. The user interface/experience is fairly intuitive, but I do have to question their decision to put a primary navigation element below the “Hero Promo” banner. I find that it gets a little bit lost in between the header and the main content - but at the very least when you do find it, it’s implemented correctly and looks great as well.

Favourite Feature: An easy feature to overlook here is the multilingual capabilities of the site. SWTOR.com is available in 3 languages which you can switch to seamlessly at the top of the page. The layout is perfectly maintained throughout the site which is something that is often not easy to achieve. Again, while it’s not the sexiest of features, when implemented correctly it’s definitely an important part of the overall user experience especially for those of us who are overseas!

What? A gaming news site? Yes, while screwattack is not a game, it is still a website that represents the gaming community and they’ve used the Drupal CMS to bring their users what I think is quite a unique experience. As we’ve done with the previous two sites, lets start with the visual appeal of the site. I think it’s amazing. Why? For most gaming news/review sites I often feel like I’m being visually pummelled by all sorts of content, whether it be game ratings or popup ads or what have you. This site once again keeps it simple with a nice 2 column layout (body + sidebar) that lets you focus on the main body area first before then guiding you to the sidebar for any extra content they wish to publish there. The other interface elements of the page are fairly standard here such as the main navigation and search, but sometimes that's okay - using familiar techniques definitely does not hurt your users, but rather makes them feel at home.

Favourite Feature: In the “Our Latest Videos & Stuff” block in the sidebar the posts are coloured from red to blue according to how popular they are. A great subtle effect that I’m really interested to see how they implemented. Smells like some sort of SASS function to me…

Riot Games are the creators of League of Legends and they’ve developed a Drupal website to power their corporate site as well. They developed a really clean but impactful layout that really conveys their message and company culture. The colour palette is bang-on and they are doing some layering of elements which I really like as well. I’m going to mix my UI/UX review with my favourite feature because I absolutely love what they have done with the main body area of the front page. The treatment of the images on hover/active state is subtle yet effective in drawing you in at the same time.

Favourite Feature: “News Grid” on the front page is well laid out and has some fantastic active/inactive treatment - great work!

The Need For Speed franchise is a classic and it's great to see them (or their overlords, EA) using Drupal to power such an iconic brand in racing video games. Visually, I feel that the front page lacks a bit of substance that the other sites in this list provide, but once you start navigating around and getting deeper into the website it starts to show a lot more in terms of content and layout design. The UI is simple and effective especially with the use of our old pal the “Mega Nav” for the Games section - a sensible implementation in my opinion.

Favourite Feature: It’s responsive! The only responsive site in this list which I’m happy to see finally. While it may not be the best responsive implementation, its still nice to see them thinking about users viewing the site on various devices.

Well thats the end of my list. Hope it provided you with some insight on not only why these designs are appropriate, but also what the Drupal CMS platform can do for the video game industry. If you think I’ve missed any sites out there, throw them down in the comments. I’m always curious to see what else is out there!

Until next time, GLHF

Nov 26 2013
rwu
Nov 26

This is a primer for those novices who've just heard about the Panels module. The content of this article is from two different sources: online introduction, and the mistakes that I, as a novice, have made. Most of the points are so obvious after one masters the module, but may be confusing for those who just start. Any suggestions or corrections would be welcomed.

000 Overview of Panels Module

Panels is an awesome module that increases the functionality and flexibility of a site for the site administrator, the one who administers the site through user interfaces. It panelizes (or divides) a web page into multiple regions. Within each region, panes can be added to display any content. Furthermore, the layout of the panel can be changed freely through tweaking each individual region. At the front end, a granted user can also affect the layout of the panel by dragging and dropping each pane among regions, and/or changing the style of a region. A panel user can even set the selection rules to let people who have different accessibilities see different layouts or contents within the regions.

001 Terminology I: Panel = Panel Page = An Entity Type != A Content Type

When people say “a panel” - more accurately called a panel page - they are not referring to a block or a combination of blocks, rather, a panel is a highly customized page entity containing a URL path completely defined by the panel builder. In this manner, it differs from a basic page that is part of the node system, since a basic page is visited by a URL automatically appointed by the system.

010 The order of panel variants matters

A common mistake made by novices is omitting the significance of the order of variants. As I mentioned in the overview, Panels has a powerful function allowing the site administrator to create different variants of a panel page with different selection rules; when people with different accessibilities visit the page, they will see different variants based on what the site administrator wants them to see. The logic here is that if the visitor passes the selection rules of the first variant, then he or she can see that variant only - the rules of latter variants won't even be checked. In other words, the stricter the selection rules of a variant, the higher it should be ranked.

011 Terminology II: What is Panelizer really?

Panelizer is another module that is usually used with Panels. Just like it sounds, it literally means to transform a specific component of a web page (eg. a block) or a whole node into a pane. In fact, it transforms node as well as other entities like taxonomy into a panel, with all the fields of the entity being transformed into panes. This means the layout of the node can be easily changed from both front-end and back-end. Panels Node, a module shipped with Panels module, has part of Panelizer’s functions; it only provides a panelized node type.

100 Exportation

A panel is exportable by simply choosing the “export” option in page manager or administration page of a panel. Combining with other modules, we may export some types of panes, however, a pane without any assistance from other modules is not exportable manually. For example, Custom Content Panes module can be used to export panes containing basic HTML code only. Views Content Panes module is able to export views in the display of content pane, which is another example of how the pane is exported. If one wants a customized pane to be reusable, he or she has to create a Ctools plugin programmatically.

101 Pane vs. Block

When we use views on a panel page, we can choose the display as content pane or block. It is plausible that a content pane here can be replaced with the pre-existing block. I found some necessaries for it to exist. Firstly, the pane can accept arguments through user interface, while a block needs additional PHP code to achieve that. Secondly, in views, a pane can override all views generated path with a custom path of the panel. Thirdly, the panel system has additional settings that a block system doesn’t have, eg. title overriding, exposed filter, etc.

References:

https://groups.drupal.org/node/143009

https://drupal.org/node/496278

http://www.pixelite.co.nz/article/building-custom-content-panes-aka-ctoo...

http://drupalize.me/series/building-websites-drupal-7-using-panels

Nov 18 2013
Nov 18

I have over 15 years of experience as a Business Analyst, and have worked on many projects involving different Content Management Systems (CMS). But when I first joined Appnovation, Drupal – the CMS we use – was very new to me. To learn more about this specific CMS, I took a top-down approach, wanting to first capture a big-picture of Drupal development; I posed a list of questions:

  1. What is the overall organization of Drupal?
  2. Why is Drupal the application of choice when it comes to selecting a CMS?
  3. Who uses Drupal as their CMS? And what do they have to say about it?
  4. What does Drupal offer that can fulfill the needs of our clients?
  5. What is the size of the Drupal community and how far is its global reach?
  6. As a Business Analyst, what are the need-to-know items regarding Drupal?

I visited the Drupal.org, reviewed documents, and had in-depth discussions with our Drupal developers.  I wanted more, so to capture a larger spectrum of information to help answer my questions above, I also searched out videos. Here is my list of 10 most useful Drupal videos:

These 3 offer a good overview of Drupal using different approaches:

“Drupal 7 Marketing Video”

Drupal CMS Video: “What is Drupal?”

“Understanding Drupal Documentary” – this video uses an interview format, making it nicely organized and presented

“Drupal Beginner: What is Drupal?” introduces the user to Drupal through tutorials; this video is the first in a series of many.

These two videos get more into the details of theming and module items. Even me, a Business Analyst, was able to understand them – amazing!!

“Part 1: Drupal Theming – Panels & Panels Everywhere HD”

“Introduction to Drupal Module Development”

“What makes Drupal special?” is a video that presents the connection between Drupal and other big systems. It is quite interesting to see that Drupal has a lot of support from well-established technology companies like Sun.

With “Drupal: An Open Source Community” you can see how the Drupal community connects. This Acquia video introduces the viewer to many of the individuals involved with Drupal.

Finally, I couldn’t complete this list without adding a presentation from the creator of Drupal, Dries Buytaert: “The Dries-note”

 

Voila! I hope you enjoy viewing these Drupal-based videos – please send me your comments or share any other links you think are informative.

Nov 14 2013
Nov 14

In honour of the release of Drupal 8 here is a list of 8 of the best Drupal designs. I chose these designs because they truly display the power of Drupal. Anything can be achieved on this CMS. If you have any other sites you think should be on this list, we would love to see them! Please post some URLs in the comment section!

1. http://www.theinformedtourist.com/

website layout

This website is very well designed. It is beautiful to look at and very easy to use both on desktop and mobile. With a beautiful mix of bright colours, iconography, and professional photography this could definitely be one of the most beautiful Drupal sites. This site will make anyone's trip to Sydney, Australia far easier to plan. As you navigate through the different attractions and sights offered in the area you can easily save what interests you as a "favourite" and have a database of all the things you want to do. As everyone knows, you always have limited time on vacation; with this site you can easily see how close each attraction is to the other, and figure out how to get from one destination to the next, saving you time and headache. I really like the metro/flat design look they chose to use beecase it is fun and inviting, perfect for a tourism website. The mobile experience is also very nice, and very helpful tool for people navigating the streets of a new city searching for that exciting vacation experience.

2. https://www.thelondondistillerycompany.com/ 

 website layout

 

This bold and beautiful Drupal site is all about making a statement. The rich photography contrasted with a bright pink highlight colour truly sets them apart from other brewerie sites. They have kept text information to a minimum and instead let the photography do the talking. They are setting a tone and creating an experience that gets people interested in what they do. I am not much of a drinker, but after cruising their awesome website built on Drupal I want to go to their brewery and make myself a custom cask of whiskey! The site has a very nice fluid layout that is very easy to use on a mobile phone. This website is a true testament to Drupal's power. This is no standard theme, this is a unique experience built on a powerful CMS.

 

3. http://wearefrukt.com/

website layout

 

This bright Drupal site has a very youthful look to it. I am intrigued right away, however I am not exactly sure what they do when I first hit the page. Is it a record label? Is it a music blog? Oh, its a branding agency. I like the look of the website overall; the bright colours and modern texture-patterns give a nice sense of energy and youth. However, the responsive nature of the site is a bit buggy. When you resize the window it does not collapse perfectly. But when you view it on a mobile device it is much cleaner. I have a feeling there is some code that detects devices and displays a more appropriate layout. The bright colours contrasted with the old-timey typography really gives them a memorable look. 

 

4. http://www.laborb.de/

website layout

 

The Labor D website takes a nice approach of letting the work speak for itself. The website is spacious, understated, and muted. They could have made it bright and flashy, they could have made the website as bold as their client work, however, that would distract from their portfolio. Their work is what is most important and the website's design lets it sing. The services section is brilliant. Very simple, fun to interact with, and memorable. This is a company that will stand out in a client's mind when they are deciding who to go with. 

 

5. http://www.examiner.com/

website layout

 

The Examiner is a great example of the large scale capabilities of Drupal. This site is very well designed for a news site. Most news sites are very cluttered and overwhelming. This site uses a nice colour coding system to organize the stories which makes it easy for users to find the type of news they are interested in at a glance. They use a tactic I have become very fond of which is to present the global navigation at the bottom of the page as well as the top. Instead of a site map, they give you the same exact options and functionality you found at the top of the page without having to scroll back to the top of the page. This appears to be a good way to keep people moving through out your site. The mobile version of the site is very nice as well. Simple navigation and cleanly stacked layout make this site a pleasure to use whether you are sitting on your couch with your laptop or on the go with your mobile device. 

 

6. http://www.teslamotors.com/ 

website layout

 

This is by far the greatest car site I have come across. All of the other super-car sites are pretty ugly. Tesla is not only revolutionizing how you make cars, they are revolutionizing how you market them. The Tesla site is a fantastic example of Drupal being very customizable. I think a lot of people fear having some standard theme that has simply been re-skinned. Teslamotors.com shows that a Drupal site can be very intriguing, beautiful, and very user-friendly. I implore you to investigate this site just to see how cool the cars are and see how awesome Drupal can be with the right designers and the right developers. 

 

 

7. http://www.whitehouse.gov/ 

website layout

 

For a government website, it is quite nice. The Obama website for his presidential campaign was also very beautiful. Besides the recent HealthCare.Gov fiasco, Obama's administration has been very successful on the web. The White House is a pretty big deal, so if they chose Drupal to build a large scale and beautiful site, then so should you. Whitehouse.gov is clean and easy to navigate. Overall it is a pretty standard site. But not every website has to be a parallax, fullwidth, ultra thrilling visual experience. Remember, good design is how it functions. And this site functions very well. Information is easily found and there is not an overwhelming amount of action items begging for your attention. It might be getting some leeway because it is a government website, but overall it is a well made site. And they even made it mobile friendly.

 

8. http://novation.be/nl 

website layout

 

Novation proves once again Drupal is no "one layout to rule them all" CMS. I have been very intrigued with full width websites. This beautiful site truly uses the screen real estate without feeling cluttered. I think Novation does it proper with high grade imagery and light typeface choices.  It has that immediate wow factor that gets people interested in a company. They proudly put their work front and centre, because at the end of the day, thats what really matters.

 

Nov 13 2013
Nov 13

There are a number of great resources available to those looking to familiarize themselves with the Drupal framework. I've compiled a list of 5 books that cover a wide array of topics including environment installation, taxonomy, module development, to more advanced Drupal capabilities such as database management, and security. The list includes two books that are not necessarily Drupal specific but they are valuable in providing a well-rounded development approach and will prepare you to take on your own Drupal projects.

    1. Pro Drupal 7 Development by Todd Tomlinson, John VanDyk

This was the first book recommended to me when I began my journey into Drupal. Readers are introduced to the core concepts of Drupal including file structures, nodes, modules, and much more.

    1. Using Drupal by Angela Byron, Addison Berry, Bruno De Bondt

Using Drupal serves as a reference guide for the popular Drupal video site: Drupalize.me. The “hands-on” portion of the book will provide instructions on implementing different types of functionality and gives readers something to work with.

    1. Drupal for Designers by Dani Nordin

Drupal for Designers takes a slightly different approach than the first two. This book covers communicating the advantages of Drupal, client collaboration, implementing designs, and lightly treads on the technical side. The book is catered towards those taking on Drupal projects alone or with a small team.

    1. HTML and CSS: Design and Build Websites by Jon Duckett

Although Jon Duckett’s book is not specifically for Drupal development, the book covers the basics for anyone new to web design or development. The layout and content are easy to digest and will provide a fundamental understanding of core concepts of web structure (HTML) and styling (CSS).

    1. Don't Make Me Think: A Common Sense Approach to Web Usability by Steve Krug

Don’t Make Me Think discusses one of the most valuable topics in web development: the users. I was introduced to this book by my professor in university and it changed the way I approach creating websites. This book places an emphasis on the user-experience and keeping things clear, concise and ultimately seamless for visitors.

Learning a new framework can be a daunting task, however with the help of these five books, the learning curve can be separated into manageable sections. If you have any recommendations of your own, please feel free to add the title and author in the comments. Happy reading!

Nov 07 2013
Nov 07

So you want to be a Drupal Pro…. ?

In most cases this will require you to master setting-up of a local dev environment that's compatible with the production web server you're building for. Let's say you start with a clean slate so-to-speak, a freshly installed OS of whichever OS flavour you like... in my case it's usually ubuntu. Ideally you’d want to have that OS configured so that the environment has all the necssary tools to make your development endeavors productive. Generally this involves a lot of time and effort to set up. And let's say, as in my case, you're a front-end developer and the building of lamp stacks isn’t on the top of your daily to do list. The configuring of all the settings for git, drush, compass, ruby, php, msql, apache, drupal, and their dependencies - to name a few - could be more time consuming of a task then the occasional local sys admin would like...

Oh what to do...

The Drupal community comes to the rescue once again! This time with the DrupalProDevelopment Desktop.

DrupalPro is built on Ubuntu 12.04 and is a downloadable pre-built machine image for Virtualbox, but may work equally well with VMware, QEMU, Parallels, or the like. It is: easily backed up (even in real-time); easily cloned and customized for each individual project; easy to remove or migrate to the whole stack or to another computer; much more compatible with your production webserver than a WAMP or MAMP stack; and, can even be run on a USB3 stick. It's also useful for trainers looking for a clean stable environment that can be setup on the fly.

All you need to get going is to install virtual box; in a nutshell:

1. Install Virtualbox(version 4.1.16+)

2. Download the image: DrupalPro: Beta2 - works in 32 or 64bit environments

3. Import virtual machine (.ova file):

• Start Virtualbox

• File -> Import Appliance -> Choose file... -> (select the downloaded ova image file)

• Set RAM to 50% of your system RAM (minimum 1000MB)

• If you have a multi-core CPU -- assign as many CPU's as you can spare. Virtualbox will only use when/whats needed.

• Depending on your setup, you might need to disable HOST ONLY network card.

• Import -> (wait for import to finish)

And with that you can start developing on the fly!

Nov 07 2013
Nov 07

Drupal SEO

This is a post about Drupal, SEO, and Drupal & SEO. While some of this information is specific to Drupal, other parts are just general to SEO, but what makes the general parts related to Drupal is that, in most cases, Drupal development makes it much easier to implement search engine optimization when compared to similar content management systems I have used.

1. Keyword Research is a MUST

Know what keywords you should be using throughout your copy, in your title tags, URLs, meta tags, meta description, alt tags, internal links, and headers. The best way to do that is to use Google’s Keyword Tool, now Keyword Planner. Using the keyword planner you can see how frequently terms are being search per month (globally and locally), how competitive they are for ranking, and how much they cost to advertise on. Better still, the keyword planner will give you related keywords to what you typed in. This tool is a must to start with for good Drupal SEO, really any SEO for that matter.  

2. Google Analytics & Google Webmaster Tools

Get these two tools, Google Analytics & Webmaster Tools hooked up and running data on your Drupal site ASAP, and better still, get them hooked up together. If you aren’t pulling this data from your website you’re going to be lost in terms of what is currently going on, creating difficulty in making confident decisions on what to do next when it comes to SEO. There are a bunch of tools out there that offer similar insight when it comes to this information, but if you want to know what Google is seeing when it comes to your site, why not go directly to the horse’s mouth.

3. Key Drupal SEO Modules To Get Installed

Drupal has several modules that every site should install. That is, if you're looking to take advantage of what Drupal already has to offer, and if you care to get found online 'organically' through someone typing words other than your company's name.

  • Alinks: Creates automatic links allowing users to associate defined text to links.
  • Content Optimizer: Helps to ensure content conforms to Drupal SEO best practices and provides analysis pages to ensure SEO best practices are followed.
  • Custom Breadcrumbs: Allows you to set up parametrized breadcrumb trails for any node type.
  • Global Redirect: After turning on clean URLs and Pathauto, it fixes some of the more common URL problems.
  • Google Analytics: Visitor tracking.
  • HTML Purifier: Fixes substandard HTML on content generated by users.
  • Link Checker: Checks for broken links.
  • Menu Attributes: Additional attribute specification for menu items such as id, name, class, style, and rel.
  • Metatag: Enables full control of meta tags on your site, nodes, categories, views, etc.
  • Mollom: Spam protection.
  • Page Title: Allows the page title to be set.
  • Pathauto: Based on the title of the page, this module autocreates an SEO-friendly URL.
  • Path Redirect: Creates proper redirects for URLs.
  • Read More Link: Creates customized, SEO-friendly read more links.
  • SEO Checklist: Checklist that provides admin shortcuts and download links to pretty much all the modules and tasks to perform SEO on a Drupal site.
  • SEO Compliance Checker: Checks for on page SEO compliance giving the user analysis when a node is saved or previewed.
  • Scheduler: Allows scheduling for the publishing of nodes.
  • Site Map: Creates a plain text version of the sitemap.
  • Site Verification: Verification assistance of site ownership for search engines.
  • Syndication: Centralization, through a web page, all RSS feeds generated by Drupal.
  • Taxonomy Title: Title setting for taxonomy pages.
  • URL List: Lists every URL on your Drupal-based website by creating a plain text sitemap.
  • XML Sitemap: Creates search engine readable, dynamic sitemap that is Sitemaps.org compliant.

4. Backlinks, Backlinks, Backlinks

Don’t let Google fool you, even with the Penguin and Panda updates, backlinks still count pretty big. What those updates are trying to do is get rid of all the big time comment spam and professional profile builders out there by penalizing sites with an overwhelming amount of those types of links.

The key to backlink building is to make it look natural, by having a good mix of links built with just plain URLs, home page URLs, keyword anchor text, long tail keyword phrases and use of "similar" keyword type phrases. Go after links from sites of all Page Rank types and make sure the links reference not only your home page but also your inner pages. Don’t sweat the no-follow links to your site, because here is the thing: they are still links and get counted, maybe not as much as a followed link, but they are still getting picked up. 

Go for credible links, and look at that this way: Appnovation is a Drupal development company so we would definitely want to get a link from Drupal.org pointing back out our site because that is basically telling Google that Drupal.org (the foremost authority on Drupal) considers Appnovation a Drupal development company.

Talking about backlinks can go on and on, but the keys are:

  • continuously do it;
  • make it look natural;
  • keep it as credible is possible; and,
  • have the links touch as many different parts of your site as you can.

5. Watch Your Competitors

Unless you have monopoly, you are going to have to keep up with the competition. Keep an eye on what they are doing both on-page and off, as well as monitor what they are ranking for and where they are ranking. Competitors can give you great ideas on what you should be doing on your pages to make sure your rank is improving.

6. Continuously Update

Sites can’t just be a static page that you build and push live to just sit there. Today you have to continuously create content for it. Although not just new web page after new web page, but content of all types like case studies, product reviews, client testimonials, whitepapers, eBooks, infographics, demos, portfolios, videos, communities, blogs, social sections, and so on. Keep you site as dynamic as possible and keep giving Google a reason to come back and crawl you to see what’s going on. Refresh your website with a complete redesign from time to time so that you can add more ways for people interact with it. Basically today's websites have to be living, breathing entities that need consistent feeding and constant attention. Drupal is an ideal content management system (CMS) for this very purpose.

7. Make It Work Together

The key to all of it is being able to make it work together: the keywords, the tracking, the modules, the backlinks, the competitive research, and the continuous updating. Leaving out any of those is going put a pretty big dent in comprehensive Drupal SEO strategy. Each item above requires the other 6 to be involved, or at least taken into account, someway, somehow.

Bonus. A Word of Caution

Word to the wise: don’t ever put all your eggs in the SEO basket. Not too many people know what makes up the Google algorithm (I am guessing you probably don't) let alone when Matt Cutts’ team (I am also guessing you don’t know Matt Cutts or anyone on his team either) is going to make another change that could affect what your site shows up for, or where, in the rankings.

Nov 01 2013
Nov 01
{{#if useSimpleSecondCol}} {{#if useSecondColThin}} {{else}} {{/if}} {{#with secondColumn}} {{#if simpleList}} {{/if}} {{#if complexList}} {{/if}} {{/with}} {{else}} {{#with secondColumn}} {{/with}} {{#with thirdColumn}} {{#with content}}

{{title}}

{{#each images}} {{/each}} {{/with}} {{/with}} {{/if}} {{#with thirdColumn}} {{#if fullBanner}} {{#with content}}

{{top_title}}

{{{description}}} {{/with}} {{/if}} {{#if view}} {{{content}}} {{/if}} {{/with}} {{#if hasFourthColumn}} {{#with fourthColumn}}

{{title}}

{{{description}}} {{/with}} {{/if}} {{/if}} {{{description}}}
Oct 11 2013
Oct 11

On the first day, Appnovation assigns each new developer a mentor. The mentor is dedicated to resolve any questions the new co-op student has regarding intermediate and advanced Drupal development. For training, the new co-op students are required to develop a new annotate module on Drupal.

To complete the annotate module, beginner knowledge of Drupal fundamentals are necessary. The module requires the student to understand and utilize the contributed modules from the Drupal community, such as the Features and Views modules. Also, the assignment tests the students’ knowledge on PHP. If you are new to PHP, in order to quickly and sufficiently grasp PHP, go through w3schools PHP online examples.

If modules are the backbone of the Drupal development, then Drupal hooks are the bone cells used to create them. Two basic hook fundamentals to development are the menu hook and theme hook. They are almost always used when developing a new Drupal website.

At the core, Appnovation distributes websites; therefore, developers need to comprehend HTML, JavaScript, CSS and PHP syntax. To quickly summarize, the HTML is used to display content, JavaScript is used to trigger actions on the webpage, CSS used to theme the website and PHP is used to develop on the Drupal platform. Git is used as the version control system to collaborate on projects.

After grasping PHP, HTML and CSS, a great book to read is Drupal 7 Module Development written by Butcher, Dunlap, Farina, Garfield, Rickard and Wilkens. This book provides the theory and the examples necessary to enhance Drupal development skills.

Appnovation cares about their employees. Even though the majority of the training is self-taught, the assigned mentor is a great resource. In addition, the current staff is inclined to answer any questions and solve problems together.

Sep 05 2013
Sep 05

alfresco, openwem, webinar

We have a great webinar coming up on October 17th with our Partner Alfresco on combining Acquia's OpenWEM with Alfresco. Learn about how integrating Drupal's powerful OpenWEM personalization and web content management tools with Alfresco can provide a full suite of tools for digital mareketiners. The presenters for the live webcast are Appnovation's Senior Developer, Bart Majerski and Alfresco Developer Mederic Fermi. The webinar is geared toward all those interested in learning more about OpenWEM, Alfresco and combining these to technologies together.

Live Webinar: OpenWEM & Alfresco - Combining to Create Outstanding Experiences for ALL Users. Thursday, October 17th @ 1PM Eastern Standard Time.

REGISTER HERE

Open Web Experience Management (OpenWEM) is an Acquia initiative for delivering amazing yet simple digital experiences across a unified platform for content, community, and commerce on the Open Web. It creates immersive digital content and campaigns, socialize them across multiple communities and channels, and deliver the ultimate shopping experiences along the customer journey.

Alfresco is an open source enterprise class rich document repository system with powerful out of the box features around collaboration, document management and workflow. It also affords great backend records management capabilities and a Lucene (“Google like”) search document indexer.

Alfresco development compliments WEM and Drupal development by providing a feature rich UI for managing document assets that are exposed inside a Drupal Environment. This integration allows digital marketers to take advantage of all the tools of both these platforms to deliver a compelling user experience.

Join us for this live webinar where we will talk about and show how combining these two user conscious technologies allows you to:

  • Automatically personalize content based on a user’s stated personal attributes (their interests, skills, etc.)
  • Create a transformative, content-rich shopping experience for the end user and the ability to add user-generated content and share that content to popular social media sites
  • Make it easy for non-technical users to author, review and publish content
  • Expose Alfresco’s document repository into the Drupal environment
  • Much much more
Aug 29 2013
Aug 29

With osCaddie, we try to continuously improve the Drupal - Alfresco integration.

Traditionally, Alfresco is used as a back-end document repository, and Drupal as the front-end.

Drupal is a flexible CMS, and this is a very good tool for creating a nice, dynamic and ergonomic user interface. On the other side, Alfresco is a very powerful document management system, but it’s not trivial to deeply tweak the UI.

The classic osCaddie integration is based on the CMIS standard : Alfresco is used as a CMIS server, while Drupal is set as a CMIS browser. This provides a way to manage documents stored in Alfresco, from Drupal.

In an attempt to push the integration further, we wanted to create an integration at the UI level : We wanted to integrate a custom Alfresco document view inside a iframe, on the Drupal side. We thought it would greatly improve the user experience, as it would allow users to manage documents the same way they would do from Alfresco Share, without having to connect to another webapp. They would be able to trigger actions from Alfresco Share & Drupal from the same page.

In order to do that, we first needed to create a custom Alfresco Share page. This is an easy task, and the Alfresco wiki is well documented about that :
http://wiki.alfresco.com/wiki/Share_Custom_Pages
We needed to create a new “Page definition”, “template instance” and “template”. Since we just wanted to simplify the “document-details” page, we copied those 3 files for this page, renamed them and removed the unnecessary parts, to create our “custom-document-details” page.

This custom page only had to include those 3 elements from the original document details page :

  • Preview
  • Actions
  • Versions

The “Preview” and “Versions” parts of the page didn’t need any customization, as we wanted the exact same details as in the original document page, but for the “Actions” part, we wanted to restrict them to a selected subset, to expose only few actions on this custom page. Alfresco 4.x makes it flexible to declare a new custom set of action (action group). Here are the different needed steps :

  • Passing the “view” argument to the “Actions” component of the page, in the “template-instance” page. This parameter should match the “action group” name. As the original “document-details” page uses the “document-details” action group name, we chose to create a new “document-customdetails” action group name.
  • Create a new DoclistActionGroupResolver (Java Class) by overriding the DefaultDoclistActionGroupResolver, and declare it as “resolver.doclib.customActionGroup” in the spring context. This new CustomDoclistActionGroupResolver is responsible to give the “action-group” name as an output from the node details and the “view” argument received as input. In our case, we want to return “document-customdetails” when input string “view” equals “customdetails”.
  • Edit the share-custom-config.xml to :
    • Use that new CustomDoclistActionGroupResolver, instead of the DefaultDoclistActionGroupResolver
    • Set the different actions available in that custom action group “document-customdetails”

    Here are the code added to the share-custom-config for that part :

    <config evaluator="string-compare" condition="DocLibActions">
    <actionGroupResolver>resolver.doclib.customActionGroup>/actionGroupResolver>
    <actionGroups>
    <actionGroup id="document-customdetails">
    <action index="100" id="document-download" />
    <action index="110" id="document-view-content" />
    </actionGroup>
    </actionGroups>
    </config>

The next challenge was to set a single-sign-on between Drupal and Alfresco. We chose to use the Jasig CAS authentication server. That way, as soon as we are logged into Drupal, we are logged into Alfresco as well, and we don’t need to re-type the credentials again inside the iframe.

Please find attached a snapshot of the resulting page.

The advantage of this integration is the flexibility it provides.
From there, we can create other new custom pages if we want to access some other actions from Drupal (Manage a workflow, Add category/tag, ...).
That way, we have the possibility of directly integrating a functionality from Alfresco to Drupal at the UI level without having to re-create the UI in Drupal and the custom web-scripts needed in Alfresco.

Aug 09 2013
Aug 09

iron chef kitchen

In past years, I really enjoyed watching the show Iron Chef. One, because I love food. And two, because I loved the challenge that each of the Iron Chefs faced-- having to serve up mouthwatering dishes of various sizes and flavours to an array of people, while keeping central the one main ingredient.

At this point you’re probably thinking, “Okay, cool. Other than the fact that now I’m hungry, what does this have to do with website development?” As it turns out, everything.

According to PewInternet, 34% of Americans over the age of 18 own a tablet computer. Comparatively, this is almost double the 18% who owned tablets a year ago. And Go-Gulf reports that 91.4 million Americans own smartphones, with 89% of these owners using their smartphones throughout the day.

And so, it is becoming apparent that to become truly successful in the world of the internet, you must be able to build cross-platform websites, providing an enjoyable service for your end users. Like Iron Chef, developers need to serve up the website; the main ingredient, to various end users of different environments, while upholding top quality across all “dishes”. Luckily, Iron Chefs must never traverse the challenge alone, and Drupal serves as an excellent sous-chef.

Alongside Drupal, the challenge can be tackled via either of the following:

Varied Taste: Optimized Site 

This option optimizes your site based on the form and the usage needs. Though the main ingredient is the same, the “flavour” of your site will change, dependent on what platform is being used. Contributed modules such as Mobile Plugin allow you to provide a mobile optimized view to your Drupal site.

Varied Portion: Responsive Design

Responsive design, on the contrary, allows your site’s flavour to remain consistent among all platforms, however, its portion size changes, as it responds to its environment. Grid layout systems, such as Foundation, or Twitter Bootstrap work fluently with Drupal to achieve this.

The ingredient and challenge have both been served. Do you have what it takes to be an Iron Chef?

Aug 09 2013
Aug 09

iron chef kitchen

In past years, I really enjoyed watching the show Iron Chef. One, because I love food. And two, because I loved the challenge that each of the Iron Chefs faced-- having to serve up mouthwatering dishes of various sizes and flavours to an array of people, while keeping central the one main ingredient.

At this point you’re probably thinking, “Okay, cool. Other than the fact that now I’m hungry, what does this have to do with website development?” As it turns out, everything.

According to PewInternet, 34% of Americans over the age of 18 own a tablet computer. Comparatively, this is almost double the 18% who owned tablets a year ago. And Go-Gulf reports that 91.4 million Americans own smartphones, with 89% of these owners using their smartphones throughout the day.

And so, it is becoming apparent that to become truly successful in the world of the internet, you must be able to build cross-platform websites, providing an enjoyable service for your end users. Like Iron Chef, developers need to serve up the website; the main ingredient, to various end users of different environments, while upholding top quality across all “dishes”. Luckily, Iron Chefs must never traverse the challenge alone, and Drupal serves as an excellent sous-chef.

Alongside Drupal development, the challenge can be tackled via either of the following:

Varied Taste: Optimized Site 

This option optimizes your site based on the form and the usage needs. Though the main ingredient is the same, the “flavour” of your site will change, dependent on what platform is being used. Contributed modules such as Mobile Plugin allow you to provide a mobile optimized view to your Drupal site.

Varied Portion: Responsive Design

Responsive design, on the contrary, allows your site’s flavour to remain consistent among all platforms, however, its portion size changes, as it responds to its environment. Grid layout systems, such as Foundation, or Twitter Bootstrap work fluently with Drupal to achieve this.

The ingredient and challenge have both been served. Do you have what it takes to be an Iron Chef?

Jul 22 2013
Jul 22
{{#if useSimpleSecondCol}} {{#if useSecondColThin}} {{else}} {{/if}} {{#with secondColumn}} {{#if simpleList}} {{/if}} {{#if complexList}} {{/if}} {{/with}} {{else}} {{#with secondColumn}} {{/with}} {{#with thirdColumn}} {{#with content}}

{{title}}

{{#each images}} {{/each}} {{/with}} {{/with}} {{/if}} {{#with thirdColumn}} {{#if fullBanner}} {{#with content}}

{{top_title}}

{{{description}}} {{/with}} {{/if}} {{#if view}} {{{content}}} {{/if}} {{/with}} {{#if hasFourthColumn}} {{#with fourthColumn}}

{{title}}

{{{description}}} {{/with}} {{/if}} {{/if}} {{{description}}}
Jul 11 2013
Jul 11

Using the Canopy Initiative, Alfresco is able to create a stable Drupal integration, based on the Content Mapping and SSO. The integration introduces web service interface for Alfresco to import all the desired content types from all linked Drupal sites into the repository as dynamic data model.

Once these content types are imported into Alfresco, other Drupal sites under Canopy could easily map them from Alfresco into their own space. For the companies with multiple Drupal sites, when syncing is needed between these sites, Canopy would be the perfect answer. With this integration, the functionalities like Versioning, Workflow within Alfresco would be shared with Drupal. Another shining spot of the integration is SSO.

For companies with multiple Drupal & Alfresco sites, it’s quite common and useful to use centralized authentication system, especially when a company has a unique identification management system such as Active Directory, OpenLDAP, etc. Canopy introduces the JASIG CAS for its SSO solution. Canopy SSO would protect the desired web pages within Drupal and Alfresco sites. The end user needs to type user id and password one time, and access all the sites. Also, the end user clicks logout one time to sign out from all the sites.

If a company needs to leverage Alfresco for Drupal, Canopy would be the great solution.

Jul 11 2013
Jul 11

Using osCaddie, Alfresco is able to create a stable Drupal integration, based on the Content Mapping and SSO. The integration introduces web service interface for Alfresco to import all the desired content types from all linked Drupal sites into the repository as dynamic data model.

Once these content types are imported into Alfresco, other Drupal sites under osCaddie could easily map them from Alfresco into their own space. For the companies with multiple Drupal sites, when syncing is needed between these sites, osCaddie would be the perfect answer. With this integration, the functionalities like Versioning, Workflow within Alfresco would be shared with Drupal development. Another shining spot of the integration is SSO.

For companies with multiple Drupal & Alfresco sites, it’s quite common and useful to use centralized authentication system, especially when a company has a unique identification management system such as Active Directory, OpenLDAP, etc. osCaddie introduces the JASIG CAS for its SSO solution. osCaddie SSO would protect the desired web pages within Drupal and Alfresco sites. The end user needs to type user id and password one time, and access all the sites. Also, the end user clicks logout one time to sign out from all the sites.

If a company needs to leverage Alfresco development for Drupal, osCaddie would be the great solution.

Find out more about our osCaddie by registering for our webinar on July 16th.

Jul 08 2013
kso
Jul 08

For the past year, I have been working with multiple healthcare organizations and the one area that is always is a concern is security. One example is to secure the connection between the Drupal and Alfresco integration and to do that the first step is to secure the Alfresco instance.

In this example, we are working with only one Drupal and one Alfresco instance, in most cases there will be more than one instance to account for disaster recovery and replication.

Assumptions:

We are assuming that we already have Drupal and Alfresco installed.

Other assumptions:

Ubuntu Server 13.10

Alfresco 4.1.4 (compatible version from 4.x)

Apache 2.2.22 (compatible version from 2.x)

  1. Install Alfresco

  2. Configure CSRF for Alfresco Share
    $ sudo vim /opt/alfresco/tomcat/shared/classes/alfresco/web-extension/share-config-custom.xml

<config evaluator="string-compare" condition="CSRFPolicy" replace="true">

<!--

Will be used and exposed to the client side code in Alfresco.contants.CSRF_POLICY.

Use the Alfresco.util.CSRFPolicy.getHeader() or Alfresco.util.CSRFPolicy.getParameter() with Alfresco.util.CSRFPolicy.getToken()

to set the token in custom 3rd party code.

-->

<client>

<cookie>Alfresco-CSRFToken</cookie>

<header>Alfresco-CSRFToken</header>

<parameter>Alfresco-CSRFToken</parameter>

</client>

<!-- The first rule with a matching request will get its action invoked, the remaining rules will be ignored. -->

<filter>

<!--

Certain Surf POST requests form the WebScript console must be allowed to pass without a token since

the Surf WebScript console code can't be dependent on a Share specific filter.

-->

<rule>

<request>

<method>POST</method>

<path>\/page\/caches\/dependency\/clear|\/page\/index|\/page\/surfBugStatus|\/page\/modules\/deploy|\/page\/modules\/module|\/page\/api\/javascript\/debugger</path>

</request>

<action name="assertReferer">

<param name="always">false</param>

<param name="referer">https://alfresco.mysite.com:8080/.*</param>

</action>

<action name="assertOrigin">

<param name="always">false</param>

<param name="origin">https://alfresco.mysite.com:8080</param>

</action>

</rule>

<!-- Certain Share POST requests does NOT require a token -->

<rule>

<request>

<method>POST</method>

<path>/page/dologin.*|\/page/site\/[^\/]+\/start-workflow|^\/page/start-workflow</path>

</request>

<action name="assertReferer">

<param name="always">false</param>

<param name="referer">https://alfresco.mysite.com:8080/.*</param>

</action>

<action name="assertOrigin">

<param name="always">false</param>

<param name="origin">https://alfresco.mysite.com:8080</param>

</action>

</rule>

<!-- Clear the token when logging out -->

<rule>

<request>

<method>GET</method>

<path>^/page/dologout.*</path>

</request>

<action name="clearToken">

<param name="session">Alfresco-CSRFToken</param>

<param name="cookie">Alfresco-CSRFToken</param>

</action>

</rule>

<!-- Make sure the first token is generated -->

<rule>

<request>

<session>

<attribute name="_alf_USER_ID">.*</attribute>

<attribute name="Alfresco-CSRFToken"/>

<!-- empty attribute element indicates null -->

</session>

</request>

<action name="generateToken">

<param name="session">Alfresco-CSRFToken</param>

<param name="cookie">Alfresco-CSRFToken</param>

</action>

</rule>

<!-- Refresh token on new "page" visit when a user is logged in -->

<rule>

<request>

<method>GET</method>

<path>^/page/.*</path>

<session>

<attribute name="_alf_USER_ID">.*</attribute>

<attribute name="Alfresco-CSRFToken">.*</attribute>

</session>

</request>

<action name="generateToken">

<param name="session">Alfresco-CSRFToken</param>

<param name="cookie">Alfresco-CSRFToken</param>

</action>

</rule>

<!-- Verify multipart requests contains the token as a parameter and also correct referer & origin header if available -->

<rule>

<request>

<method>POST</method>

<header name="Content-Type">^multipart/.*</header>

<session>

<attribute name="_alf_USER_ID">.*</attribute>

</session>

</request>

<action name="assertToken">

<param name="session">Alfresco-CSRFToken</param>

<param name="parameter">Alfresco-CSRFToken</param>

</action>

<action name="assertReferer">

<param name="always">false</param>

<param name="referer">https://alfresco.mysite.com:8080/.*</param>

</action>

<action name="assertOrigin">

<param name="always">false</param>

<param name="origin">https://alfresco.mysite.com:8080</param>

</action>

</rule>

<!--

Verify there is a token in the header for remaining state changing requests and also correct

referer & origin headers if available. We "catch" all content types since just setting it to

"application/json.*" since a webscript that doesn't require a json request body otherwise would be

successfully executed using i.e. "text/plain".

-->

<rule>

<request>

<method>POST|PUT|DELETE</method>

<session>

<attribute name="_alf_USER_ID">.*</attribute>

</session>

</request>

<action name="assertToken">

<param name="session">Alfresco-CSRFToken</param>

<param name="header">Alfresco-CSRFToken</param>

</action>

<action name="assertReferer">

<param name="always">false</param>

<param name="referer">https://alfresco.mysite.com:8080/.*</param>

</action>

<action name="assertOrigin">

<param name="always">false</param>

<param name="origin">https://alfresco.mysite.com:8080</param>

</action>

</rule>

</filter>

</config>

  1. Restart Alfresco
    $ sudo /opt/alfresco_ent414/alfresco.sh stop
    $ sudo /opt/alfresco_ent414/alfresco.sh start

  1. Install Apache webserver.
    $ sudo apt-get install apache2

  2. Install Apache modules mod_jk, mod_ssl and enable the modules.
    $ sudo apt-get install libapache2-mod-jk
    $ sudo a2enmod jk ssl

  3. Create cert/key file.
    $ cd /etc/apache2
    $ mkdir cert key
    $ openssl req -new -x509 -days 365 -keyout key/mysite.key -out cert/mysite.crt -nodes -subj '/O=mysite Technology/OU=Alfresco Department/CN=alfresco.mysite.com'

  4. Create a workers properties file to define the load balancing.
    $ sudo vim /etc/libapache2-mod-jk/workers.propertiesworkers.properties:
    workers.tomcat_home=<TOMCAT_HOME/ALF_HOME>
    workers.java_home=<JAVA_HOME>
    worker.list=<WORKER_ID>

    worker.<WORKER_ID>.port=8009
    worker.<WORKER_ID>.host=localhost
    worker.<WORKER_ID>.type=ajp13
    worker.<WORKER_ID>.lbfactor=1

    For example:
    workers.tomcat_home=/opt/alfresco_ent414
    workers.java_home=/opt/alfresco_ent414/java
    worker.list=ajp13_worker
    worker.ajp13_worker.port=8009
    worker.ajp13_worker.host=localhost
    worker.ajp13_worker.type=ajp13
    worker.ajp13_worker.lbfactor=1

  5. Define a virtual host configuration. (This will depend on your system setup)

<VirtualHost *:443>

ServerName alfresco.appno.com

SSLEngine On

SSLCertificateFile cert/mysite.crt

SSLCertificateKeyFile key/mysite.key

SSLVerifyClient optional

SSLVerifyDepth 1

SSLOptions +StdEnvVars +StrictRequire

# Send everything for context / to worker named worker1 via ajp13

JkMount /alfresco ajp13_worker

JkMount /alfresco/* ajp13_worker

JkMount /share ajp13_worker

JkMount /share/* ajp13_worker

ErrorLog ${APACHE_LOG_DIR}/error.log

# Possible values include: debug, info, notice, warn, error, crit,

# alert, emerg.

LogLevel warn

CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>

  1. Restart Apache webserver
    $ sudo service apache restart

Jul 08 2013
kso
Jul 08

For the past year, I have been working with multiple healthcare organizations and the one area that is always is a concern is security. One example is to secure the connection between the Drupal and Alfresco integration and to do that the first step is to secure the Alfresco instance.

In this example, we are working with only one Drupal development and one Alfresco development instance, in most cases there will be more than one instance to account for disaster recovery and replication.

Assumptions:
We are assuming that we already have Drupal and Alfresco installed.

Other assumptions:
Ubuntu Server 13.10
Alfresco 4.1.4 (compatible version from 4.x)
Apache 2.2.22 (compatible version from 2.x)
Install Alfresco (version 4.1.4)

  • Install Alfresco
  • Configure CSRF for Alfresco Share
$ sudo vim /opt/alfresco/tomcat/shared/classes/alfresco/web-extension/share-config-custom.xml

Alfresco-CSRFToken
Alfresco-CSRFToken
Alfresco-CSRFToken

POST\/page\/caches\/dependency\/clear|\/page\/index|\/page\/surfBugStatus|\/page\/modules\/deploy|\/page\/modules\/module|\/page\/api\/javascript\/debuggerfalsehttps://alfresco.mysite.com:8080/.*falsehttps://alfresco.mysite.com:8080

POST/page/dologin.*|\/page/site\/[^\/]+\/start-workflow|^\/page/start-workflowfalsehttps://alfresco.mysite.com:8080/.*falsehttps://alfresco.mysite.com:8080

GET^/page/dologout.*Alfresco-CSRFTokenAlfresco-CSRFToken

.*

Alfresco-CSRFTokenAlfresco-CSRFToken

GET^/page/.*.*.*Alfresco-CSRFTokenAlfresco-CSRFToken

POST^multipart/.*.*Alfresco-CSRFTokenAlfresco-CSRFTokenfalsehttps://alfresco.mysite.com:8080/.*falsehttps://alfresco.mysite.com:8080

POST|PUT|DELETE.*Alfresco-CSRFTokenAlfresco-CSRFTokenfalsehttps://alfresco.mysite.com:8080/.*falsehttps://alfresco.mysite.com:8080
  • Restart Alfresco
$ sudo /opt/alfresco_ent414/alfresco.sh stop
$ sudo /opt/alfresco_ent414/alfresco.sh start


Install HTTPS over Apache Webserver (Ubuntu)

  • Install Apache webserver
$ sudo apt-get install apache2
  • Install Apache modules mod_jk, mod_ssl and enable the modules.
$ sudo apt-get install libapache2-mod-jk
$ sudo a2enmod jk ssl
  • Create cert/key file.
$ cd /etc/apache2
$ mkdir cert key
$ openssl req -new -x509 -days 365 -keyout key/mysite.key -out cert/mysite.crt -nodes -subj '/O=mysite Technology/OU=Alfresco Department/CN=alfresco.mysite.com'
  • Create a workers properties file to define the load balancing.
$ sudo vim /etc/libapache2-mod-jk/workers.properties

workers.properties:
workers.tomcat_home=<tomcat_home alf_home="">
workers.java_home=<java_home>
worker.list=<worker_id>

worker.<worker_id>.port=8009
worker.<worker_id>.host=localhost
worker.<worker_id>.type=ajp13
worker.<worker_id>.lbfactor=1

For example:
workers.tomcat_home=/opt/alfresco_ent414
workers.java_home=/opt/alfresco_ent414/java
worker.list=ajp13_worker
worker.ajp13_worker.port=8009
worker.ajp13_worker.host=localhost
worker.ajp13_worker.type=ajp13
worker.ajp13_worker.lbfactor=1 
  • Define a virtual host configuration. (This will depend on your system setup)
ServerName alfresco.appno.com

SSLEngine On

SSLCertificateFile cert/mysite.crt

SSLCertificateKeyFile key/mysite.key

SSLVerifyClient optional

SSLVerifyDepth 1

SSLOptions +StdEnvVars +StrictRequire


# Send everything for context / to worker named worker1 via ajp13

JkMount /alfresco ajp13_worker

JkMount /alfresco/* ajp13_worker

JkMount /share ajp13_worker

JkMount /share/* ajp13_worker

 

ErrorLog ${APACHE_LOG_DIR}/error.log


# Possible values include: debug, info, notice, warn, error, crit,

# alert, emerg.

LogLevel warn


CustomLog ${APACHE_LOG_DIR}/access.log combined
  • Restart Apache webserver
$ sudo service apache restart

If everything went well, you should now be able to visit your site at alfresco.mysite.com/alfresco and alfresco.mysite.com/share.

For a similar installation under centOS/Redhat see a related post here.

May 02 2013
rmo
May 02

Thank you for attending my webinar - Building Rich Internet Apps with Drupal & HTML5. I really appreciate the support and the amount of interest in this topic that you guys have shown! This blog post is dedicated to answering the questions that were asked during the webinar; unfortunately I couldn't get to all the questions but please feel free to leave any more in the comments and perhaps there will be a Part 2 of this Q&A.

Building Rich Internet Apps with Drupal & HTML5

Learn the power of combining Drupal + HTML5 + CSS3 + JS

Q1: What type of applications would you recommend to develop using these technologies together?

Applications like the one I’ve shown in the demo are the perfect example. And for good reason, I have shown a reader app, not because I want to promote Kobo, but to demonstrate the effectiveness of HTML5, CSS3, and JavaScript (which is what Sproutcore is about) in creating a web-app. A reader app ties in with the concept of Hybrid Model perfectly. The Kobo server not only serves data for this HTML5 Reader app but for their native iOS, and Android app, which follows our model – the server-side is separated from the client-side.

Facebook apps are good candidates to use these technologies. Facebook gives you a Canvas to work with, which essentially loads your website into an iframe, however, performance is not that great when working with traditional-style websites. For every page request, Facebook has to load the webpage first, and then show it to the user. Facebook is acting as a middle-man. So if you can eliminate the need for Facebook to fetch pages then your app will perform so much better.

In a nutshell, if you foresee that your application is going to have a content repository with workflows and needs to be highly interactive then a JavaScript HTML5 UI coupled with Drupal is best choice.

Q2: How could we introduce and streamline this hybrid model into a development environment?

As mentioned before the Hybrid Model demands a deeper consideration in deciding on how to separate business logics or requirements for client-side and server-side. It‘s architecture that is not too well adopted for websites, but for web applications it’s second nature. To start off, Business Analyst will need to gather as many requirements as possible so that the Solution Architect or Lead Developer can draw the line between what business requirements can be accomplished on client-side and what on server-side. Once that is established, we should focus our attention to designing the JSON REST API. Front-end and Back-end developers must agree upon the API before any work can begin. In this case, both front-end and back-end can work in parallel.

Q3: What do we do with the themes and templates on Drupal and is the UI going to be on the same server or somewhere else?

Since external users are not interacting with Drupal directly, we don’t need Drupal to do any themes and templates. Now our JavaScript HTML5 UI is external to Drupal, meaning it is not a Drupal theme. We may view the UI as a standalone app that talks to Drupal. So the UI doesn’t need to be living on the same server, in fact, performance-wise, the UI would ideally be hosted somewhere like on a CDN (Content Delivery Network). However, it can be on the same server with Drupal just not within the Drupal directory.

Q4: Can you please define assets briefly?

In our context, “assets” refer to anything that enriches the UI, or adds “life” to it. These are, but not limited to: images, video and audio files, Flash (SWF) objects, CSS, and JavaScripts.

Q5: This might get answered later on... but I thought one of the great strengths of Drupal was its theming! If Drupal becomes SaaS, where is the theming motor going to come from?

I agree that one of the great strengths of Drupal, besides content managing, is the theming/template engine. When we drop that part from Drupal and attach our external UI crafted from the HTML5 and JavaScript, the template motor is coming from the JavaScript framework that we are using. I highly recommend using a strong framework such as Backbone.JS, Sproutcore, or Ext JS. For the theme, you may want to combine the templates with a CSS framework like Compass and/or Foundation 4.

Q6: It seems like "thickening" the client is a good choice for sites that are frequently used. What are some best practices for sites that may be visited infrequently and aren't likely to create app interest in users/viewers?

As you’ve termed it “thickening” the client is good for sites that are frequently used, but that’s not all. Websites that want to respond well to users, say, the user clicks a button or a menu pops up or the page would flip and content is already there, and with no wait time between the interactions, thickening the client is a reasonable thing to do.

Now for sites that are infrequently visited, the best practices for deciding whether or not to go the web-app route:

  1. If your current websites are mainly displaying static content, don’t require a lot of user interaction and it’s fine to have users waiting for page load, then stick with traditional websites.
  2. Benchmark your website; find out what is your general audience. Some users have no problem with plain-old websites, but some users love fancy and quick-n-snappy UI in websites.
  3. If you foresee or plan for your current website to have increased functionalities and it’s going to become like an application, this is the great opportunity to “thicken” the client.

 

Q7: What happened to "don't store state" in the browser? Is this old-fashioned advice that's not needed anymore?

The statement, “don’t store state” in the browser, is typically referring to the stateless model that the World Wide Web and the HTTP protocol is based upon. Because state is not preserved in the underlying protocol, it would make sense to not have the browser remember the state. Now that we are moving toward web-apps and HTML5 is meant to accelerate the process, stateless design is becoming outdated. If you look closely at the HTML5 features list, we have Local Storage, WebSQL, IndexedDB, and Application Cache, these essentially break the stateless design pattern. Now, let’s take a step back and look at how we implement a website before HTML5, we use cookies/sessions and URL to allow the browser to be state-full. In a sense, we’ve already broken the stateless design pattern. One thing to remember is that the HTTP protocol is always stateless, so we are always communicating in a stateless world. What we’ve done is altered how the app behaves but not the communication.

Q8: Drupal seems to be using Backbone.JS how does this compare with Sproutcore?

In a nutshell, Sproutcore and Backbone work in the same way. Sproutcore is heavily on the client-side MVC structure while Backbone is a bit more relaxed. Backbone is super light weight in comparison to Sproutcore. One reason that Sproutcore is more suited for web-app is the Statechart feature which only not organizes views but also drives the application. Statecharts can be seen as the Finite State Machine in Computer Science. Backbone.JS and Underscore.JS are being added to core because they need to provide the foundation for the inline editing feature in the coming release of Drupal 8, and because Drupal 8 is headed toward SaaS, Backbone.JS would really benefit Drupal.

Q9: Is there a recommended IDE for Sproutcore?

Any IDE that can keep track of JavaScript functions and files is great. Sublime Text 2 is a good choice because you will run into cases where you must search through files to look for function names. I personally use Komodo just because I do PHP and JavaScript.

Q10: How much PHP programming is involved in your Hybrid Solution based on Drupal? Can you implement serverside business logic in JavaScript? Can Sproutcore be used server-side?

PHP programming would be the same amount as it is when creating your own modules. It really depends on the business logics you planned to implement on the server. However, if all the business logics can be achieved with contributed modules, then no code writing is needed.

Implementing server-side business logic in JavaScript is not a good idea because of security issues. Keep in mind that JavaScript is not safe; anyone can download the script and look at it. So it is not wise to implement server-side logic there. So in the Hybrid Model, I advised that the client-side only implement that logic which is closely related to display, for that reason.

Can Sproutcore be used on server-side? No. Sproutcore is for the client, if you want server-side JS, use Node.JS instead.

Q11: How can you access the MySQL DB in Drupal? Do you need PHP to do so or can JavaScript on the server be used for this?

Drupal database abstraction layer provides the API to read/write to the MySQL DB. Your JavaScript client will call to the JSON REST services Drupal provides to get data, and Drupal using the DB abstraction layer will handle getting data from the DB.

Q12: What is the preferred IDE for PHP/Drupal?

I use Komodo personally.

Q13: Using the hybrid model, how does one configure the Drupal appearance / theme aspects? What are the ways in which I have to tailor Drupal so that it acts as a content repository and not a UI driver?

In the Hybrid Model, we have dropped the appearance/theme portion in Drupal for external users, meaning visitors will interact with the JavaScript HTML5 UI instead, and only administers would log into Drupal directly. Essentially, if you do a fresh install of Drupal it is already a content repository. The remaining piece is to provide a JSON REST API for the UI to connect to Drupal. Say, we have 'example.com/' pointing to your UI, and 'admin.example.com/' is your Drupal instance, you can create a landing page to allow Admin to login.

Q14: What type of app is good for HTML5 only?

This is a very open-ended question as any app can benefit from HTML5. There's not really an app that is only good for HTML5. So if your app utilized at least 2 or 3 HTML5 components then it is a good app for HTML5. Games, for example, use the Canvas component and WebGL (on Chrome) to render graphics. Reader applications, like Kobo, use Local Storage, Application Cache, History, and IndexedDB.

Q15: Do I have to develop the web-app from start to finish in Drupal to be able to use all of the Drupal features or can I just incorporate it into my existing website?

Honestly, it is best to design the web-app from start to finish in Drupal and in JavaScript UI, because it’s much better to layout where client-side and server-side business logic would belong in the beginning. But you can start anywhere in between, all you have to do is build that JSON API and make sure that API hooks into all the Drupal features you need, so when the UI calls, everything is there.

Q16: Also, Is it a must to use PHP MVC or framework to be able to use it?

No, the Hybrid Model is really an architectural layout to structure your application. You don’t need to limit yourself to MVC frameworks on server-side and client-side. In fact, Drupal is not a MVC framework, it is still a PAC, and yet I recommend using Drupal for server-side.

Q17: If a web-app/website has some interactive content as well as some more static content, can Drupal serve up static pages while the client-side JS serves up dynamic content? (a hybrid-hybrid model?)

Yes. You can do that, as long as you have set aside which URL points to the web-app and Drupal, they can work simultaneously. For example, Drupal site only serves static node pages, and all your Views are outputting JSON instead. Calling those Views will split out JSON and not the actual page.

Q18: It looks like SproutCore uses Ruby and RubyGems somehow - can you please explain how that fits with JavaScript?

Sproutcore is JavaScript. Sproutcore uses Ruby and RubyGems to build and compile your JavaScripts into an app package.

Q19: How would you benefit from Drupal-HTML5-CSS3-JS vs.Node.JS-HTML5-CSS3-JS? i.e. What is the benefit of doing server side Drupal versus 100% JS using Node.JS?

Drupal gives you the benefits of having a CMS, and Node.JS doesn’t. It only gives you the structure to build an application. The question is why build a CMS yourself when you already have it, and all you really need to do is add the JSON REST API component. There is no real benefit in the underlying technology, in terms of, mixture of PHP with JS and pure 100% JS. Even if you implement 100% JS on both sides, you still need to build REST component for the client and server to communicate.

Thanks for reading along; I hope this Q&A has proved helpful! 

Apr 18 2013
Apr 18

You’ve likely heard of Batman and Robin, Simon and Garfunkel, Henrik and Daniel. But today, I’d like to pay tribute to a dynamic duo that deserves to be recognized with the likes of the aforementioned: Drupal and HTML5.

Like most dynamic duos, Drupal development and HTML5 development are great standalones. But together? Potential for magic.


Drupal, for starters, is a powerful engine. Its very thin client architecture allows performance to be isolated to the server and contains everything within its structure. Almost everything lives server side, and therefore the server does most of the work. However, every time the page loads, the client must then make a request to the server for each new set of HTML, forcing the server to repeat the same process over and over.

Contrastingly, HTML5 builds and runs everything client side, going back to the server only when necessary. This significantly reduces the lag from the server. And in a world now dominated by smartphones and tablets and their varying development platforms and languages; the case for HTML5, supported by almost all of these devices, just grows stronger. However, HTML5 still requires an engine to drive all this power.

And so, as seen in demonstrations of physics but also with love, opposites attract, and perhaps that’s why Drupal and HTML5 appear to be made to collaborate with each other. Hybrid solutions marrying the two allow Drupal to manage typical server side content management requirements, while providing HTML5 the capabilities to distribute and push off a lot of the logic to the clients, running on mobile devices in a fashion akin to native apps. Using HTML5 JavaScript frameworks such as Sproutcore alongside Drupal offer many benefits, including the MVC design pattern, content bindings, and sparse arrays.

Perhaps recognizing dynamic duo Drupal and HTML5 and what they are capable of together is the first step in leading your team to victory.

drupal html5 team

Apr 15 2013
Apr 15

Single Sign On (SSO) is a key part for enterprise applications. Under Canopy architecture, we have integration on Drupal and Alfresco; it is a good practice to introduce SSO into the integration on Drupal and Alfresco. For security, Single Sign Out is also a mandatory function. Since different organizations might have different authentication systems, the solution would set up a separated authentication center, which is a CAS contributed by JASIG. JASIG CAS can connect to multiple identity management sources, such as LDAP. In the SSO solution for Drupal and Alfresco, OpenLDAP is used as the user repository.

The server side for JASIG CAS is easy to set up: install tomcat, copy the war file and change the xml file to enable LDAP. On the other hand, it is challenging to achieve CAS client on Drupal and Alfresco. On the Drupal side, the native admin user account would be needed to manage Canopy and other functionalities. When setting up the CAS module for Drupal, the login page for admin should be set as an exemption from SSO. When the user clicks logout within Drupal, he will be redirected to the logout page within CAS to do Single Sign Out.

To enable SSO on Alfresco, the java client from JASIG CAS would be added into Alfresco instance. Since CAS only provides authentication, to get the user profile, Alfresco should enable ‘mute’ LDAP sub system with authentication disabled. When the user logs in from CAS, Alfresco would know the user id from SSO, then Alfresco would pick up the user profile through its native LDAP authentication subsystem according to the user id. The tricky part is to Single Sign Out from Alfresco.

There are two applications with Alfresco: Explorer and Share. To Single Sign Out from Alfresco Explorer, the relogin.jsp would be a good point to redirect to CAS logout page. For Share, there is no such JSP file at all! Without any customization, it will do nothing when you click logout under SSO situation. A java class SlingshotLogoutController implements the logout function. In the solution, a new class CanopyShareLogoutController is introduced to override the native logout logic: forcibly signing out from Alfresco, then redirecting to CAS logout page. With Canopy SSO, the end user can visit any pages within Drupal and Alfresco with one login, and then logout securely from Drupal and Alfresco with just one click.

Apr 15 2013
Apr 15

Single Sign On (SSO) is a key part for enterprise applications. Under osCaddie architecture, we have integration on Drupal and Alfresco; it is a good practice to introduce SSO into the integration on Drupal and Alfresco. For security, Single Sign Out is also a mandatory function. Since different organizations might have different authentication systems, the solution would set up a separated authentication center, which is a CAS contributed by JASIG. JASIG CAS can connect to multiple identity management sources, such as LDAP. In the SSO solution for Drupal and Alfresco, OpenLDAP is used as the user repository.

The server side for JASIG CAS is easy to set up: install tomcat, copy the war file and change the xml file to enable LDAP. On the other hand, it is challenging to achieve CAS client on Drupal and Alfresco. On the Drupal side, the native admin user account would be needed to manage osCaddie and other functionalities. When setting up the CAS module for Drupal, the login page for admin should be set as an exemption from SSO. When the user clicks logout within Drupal, he will be redirected to the logout page within CAS to do Single Sign Out.

To enable SSO on Alfresco, the java client from JASIG CAS would be added into Alfresco instance. Since CAS only provides authentication, to get the user profile, Alfresco should enable ‘mute’ LDAP sub system with authentication disabled. When the user logs in from CAS, Alfresco would know the user id from SSO, then Alfresco would pick up the user profile through its native LDAP authentication subsystem according to the user id. The tricky part is to Single Sign Out from Alfresco.

There are two applications with Alfresco: Explorer and Share. To Single Sign Out from Alfresco Explorer, the relogin.jsp would be a good point to redirect to CAS logout page. For Share, there is no such JSP file at all! Without any customization, it will do nothing when you click logout under SSO situation. A java class SlingshotLogoutController implements the logout function. In the solution, a new class osCaddieShareLogoutController is introduced to override the native logout logic: forcibly signing out from Alfresco, then redirecting to CAS logout page. With osCaddie SSO, the end user can visit any pages within Drupal and Alfresco with one login, and then logout securely from Drupal and Alfresco with just one click.

Apr 05 2013
Apr 05

So your website is currently 5 years old and really hasn't ever been updated. It likely still has the standard layout of the time, left and right sidebars with a long scrolling content region in the middle, solid color background and text throughout. If your site feels dated and doesn't get much traffic anymore, maybe it's time to consider a refresh.

The great thing about being in the technology industry is that your source material is constantly evolving. New platforms are introduced all the time and older ones are getting improved on. If you are considering a site update then there are few standard changes that should be addressed regardless of the site functionality.

1. Responsive Theming – If you were to build a site from scratch then a main consideration for the design/theming budget would be to implement a responsive theme. This would ensure that your site would render and perform favorably when accessed through a smartphone, tablet, small netbook and everything in between. According to web-trends as of 2012, the percentage of web traffic coming from mobile is increasing at an exponential rate and in some countries, surpassed desktop web traffic. This figure doesn’t look to be slowing down either as we see more and more manufacturers churning out tablets and devices all of different sizes that access the web. Your site has to be dynamic enough to cater to this wide range of screen sizes and that is why a responsive site is crucial in order to engage every user and provide the best experience no matter the platform.

2. Social Media Integration – Facebook, Twitter, Instagram, LinkedIn, Google+ have become part of everyday life and culture. It's how we stay connected with one another these days; an evolution from face to face visits and handshakes to a world of “like”-ing and “Retweeting”. Almost every modern website you come across these days has some form of social media integration that allows users to post the site to their profile or share something on the site with their social network. It's turned into the most powerful marketing method to reach potential customers and what drives traffic to the website. The best part about it is its free. Any new site should leverage the networks of their users to help spread the word and generate site hits. All of the big social networks provide developer api plugins that let webmasters communicate with the networks servers.

3. New Caching Methods - For Drupal specifically, there are caching engines (Memcache,Varnish) that are now supported which increase performance and allow websites to support heavier traffic. If you expect your site to be successful, then it has to be able to serve content to multiple users without down time or reduced speed. It is important that your refresh take advantage of new caching methodologies to lessen your server load on high traffic spike times.

4. SEO and Analytics - Your current site might already be employing SEO (search engine optimization) techniques but it never hurts to update in the interest of more hits. Meta-tagging content is an art and at best a moving target because it is really based on trends and what people are “searching” for on the web at the given time. The keyword might get you the result this week, but next week it could totally change. There are companies out there that provide SEO as a service and that is all they do, which speaks to the depth in complexity of how to drive traffic to your site via web searching. Analytics has also become so sophisticated that these engines can now tell you the physical location of users on your site, which pages and which order those pages were viewed in, and even which device was used to access the site. This type of information is important for companies to be able to target a specific market, or know which pages need to be updated to become more engaging to users.

5. Live Chat - Ok so out of all of the things on the list, this might be just a “nice to have”. This functionality is enabling real-time interaction between a visitor to a site and a site administrator. There are 3rd party providers that you would subscribe to (ie Olark) which provides the infrastructure to have live support on your site. It’s a new trend these days which provides instant feedback and responses to questions that any visitor might have.

Apr 05 2013
Apr 05

So your website is currently 5 years old and really hasn't ever been updated. It likely still has the standard layout of the time, left and right sidebars with a long scrolling content region in the middle, solid color background and text throughout. If your site feels dated and doesn't get much traffic anymore, maybe it's time to consider a refresh.

The great thing about being in the technology industry is that your source material is constantly evolving. New platforms are introduced all the time and older ones are getting improved on. If you are considering a site update then there are few standard changes that should be addressed regardless of the site functionality.

1. Responsive Theming – If you were to build a site from scratch then a main consideration for the design/theming budget would be to implement a responsive theme. This would ensure that your site would render and perform favorably when accessed through a smartphone, tablet, small netbook and everything in between. According to web-trends as of 2012, the percentage of web traffic coming from mobile is increasing at an exponential rate and in some countries, surpassed desktop web traffic. This figure doesn’t look to be slowing down either as we see more and more manufacturers churning out tablets and devices all of different sizes that access the web. Your site has to be dynamic enough to cater to this wide range of screen sizes and that is why a responsive design is crucial in order to engage every user and provide the best experience no matter the platform.

2. Social Media Integration – Facebook, Twitter, Instagram, LinkedIn, Google+ have become part of everyday life and culture. It's how we stay connected with one another these days; an evolution from face to face visits and handshakes to a world of “like”-ing and “Retweeting”. Almost every modern website you come across these days has some form of social media integration that allows users to post the site to their profile or share something on the site with their social network. It's turned into the most powerful marketing method to reach potential customers and what drives traffic to the website. The best part about it is its free. Any new site should leverage the networks of their users to help spread the word and generate site hits. All of the big social networks provide developer api plugins that let webmasters communicate with the networks servers.

3. New Caching Methods - For Drupal specifically, there are caching engines (Memcache,Varnish) that are now supported which increase performance and allow websites to support heavier traffic. If you expect your site to be successful, then it has to be able to serve content to multiple users without down time or reduced speed. It is important that your refresh take advantage of new caching methodologies to lessen your server load on high traffic spike times.

4. SEO and Analytics - Your current site might already be employing SEO (search engine optimization) techniques but it never hurts to update in the interest of more hits. Meta-tagging content is an art and at best a moving target because it is really based on trends and what people are “searching” for on the web at the given time. The keyword might get you the result this week, but next week it could totally change. There are companies out there that provide SEO as a service and that is all they do, which speaks to the depth in complexity of how to drive traffic to your site via web searching. Analytics has also become so sophisticated that these engines can now tell you the physical location of users on your site, which pages and which order those pages were viewed in, and even which device was used to access the site. This type of information is important for companies to be able to target a specific market, or know which pages need to be updated to become more engaging to users.

5. Live Chat - Ok so out of all of the things on the list, this might be just a “nice to have”. This functionality is enabling real-time interaction between a visitor to a site and a site administrator. There are 3rd party providers that you would subscribe to (ie Olark) which provides the infrastructure to have live support on your site. It’s a new trend these days which provides instant feedback and responses to questions that any visitor might have.

Mar 28 2013
Mar 28

Developer

What better way to start a lazy Easter weekend than finding a few efficiency modules.

Genova & MultiStep Forms & Now! Genova Entity

Similar to the well known Drupal Module Builder used to help developers quickly provide the scaffolding for their custom modules. Or the module Form builder with its cool ajax drag and drop functionality.

Genova and Multistep Forms are aimed at getting developers up and going fast. Genova in its own words "is a Drush utility targeted on Drupal developers who regularly create custom Drupal modules" Just like Drupal Module Builder, Genova was designed to "automate routine code writing such as schema, hook implementations, drupal arrays etc".

To use Genova simply download, enable, and run the Drush commands.

drush gen-mc mycoolnewmodule*

* You need to have Drush installed. Don't know drush ? Click the drush link above.

A couple of prompts later and you have yourself a shiny new module ready for your coding magic*

* Patiently waiting for you in the 'scaffolding' directory.

Genova provides automated structure for Drupal module hooks: menu, theme, permission, install/uninstall, schema ,sources: css, js, PHP classes file and external modules: mforms, sdb

Not impressed?

Just like Drupal, Genova was designed to be extended and makes use of 'components'. The same author has created the MultiStep Forms module designed to extend Genova and provide a drush utility to quickly automate the scaffolding to write a custom multi-step from module.

To use Multi-Step Forms simply download and enable the module.

drush gen-cc YOUR_MODULE PATH/TO/mforms and you will be taken through several command line prompts to create the fields and pages of your form.

Multi-step forms promise "robustness, flexibility and extensibility".

Here are two great video tutorials to help you get up and running on Genova and Mforms:

Want more?

Have a look at Genova Entity *(currently in development) to provide yet another component to speed up your custom entity development.

Still not impressed!?

Fine then! Write your own component. Components are classes that extend the GenComponent Class. Want to Automate some repetitive Drupal task, crack open the code, unwrap another chocolate egg, and the sky is the limit.

Site Builder - Layout

Love em or hate em...panels are here to stay. I'm not quite ready to endure the wrath of "contextians" on this post so I'll save expounding the virtues of panels for another post. However....

One interesting approach when working with a panels based project is the use of Panels Everywhere! penned by the Wizard of Wonder himself. This provides a wrapper that eliminates Drupal's block system and page.tpl.php.

Why would I want to do that?

Panels everywhere provides a default 'Site Template' that can be used as a wrapper to provide a header, footer, sidebar, what have you 'around' your other panel layouts.

Who cares?

This gives you a contextually aware site template. Meaning your site template can provide different layouts depending on the different criteria (eg, User Role, Paid status) and inside your site template your content can also be displayed differently based on the same or a completely different set of criteria.....like Russian dolls.

You can watch a talk about Panels Everywhere by the wizard himself.

While bumbling around D.O. I also happened to stumble across Panels Extra Styles. This little beauty provides some HTML5 wrappers and promises to 'Simplify and beautify Panels markup'.

Don't like it?

This module reminds us that it's super easy to write your own panels plugins and styles. Panels is incredibly extensible. Control your html output with custom layouts, css extras with styles, or create complex functionality in your own custom panels plugins.

Webapps!

After seeing this awesome talk Webapps with Drupal at the Pacific Northwest Drupal Summit by @setvik I was very interested in the creation of this Drupal module AngularJS which in its own words 'provides a bridge between Drupal and the AngularJS framework'

Angular is Google's "Superheroic JavaScript MVW Framework" those of you familiar with SproutCore or BackboneJS will understand the power of blending a modern Javascript framework with Drupal's content management capabilities.

With the Superheroic support of Google, I would expect Angular to gain in popularity, not to mention it's already awesome!

Setvik's talk is a great starting place, beyond the Angular Module download is another great module RESTful Web Services, appropriately named. This module is a fantastically simple tool to hook into your Drupal resources via JSON or XML.

Also checkout Angular's awesome tutorials section. This stuff is so organized and great. Note the gituhub integration that allows you to step through tutorials via git branches.

Mar 22 2013
Mar 22

There are no magic bullets for Search Engine Optimization (SEO). Even in Drupal there are no quick fixes to get your site to the top. However, Drupal is open source and there are many people out there with the same problem. That means there are people out there working to make Drupal accessible and helpful for SEO. That also means there are people at Appnovation working to ensure the best delivery to clients as possible.

Before I get into too many details, let's just quickly review the three major steps for SEO and marketing.

  1. Set up site to be crawled by search engines
  2. ???
  3. Profit

If you're new to SEO, you might think that's funny. If you're a veteran to SEO, you know that is the truth. We don't know exactly how the algorithm works for Google or Bing. But we can make an educated guess with their respective Webmaster tools.

Neither Google nor Bing are trying to make it difficult to implement good SEO practices. They have provided guides and tools to help. Here are some examples:

Having that in mind, let's get back to Drupal and SEO Tools. What does Drupal have to offer to help SEO from being open source? Quite simply, four great modules being shared that help to accomplish step 1.

Let's start off with SEO Checklist. To get started with SEO, you'll need a site that can be crawled. There are many configurations and many practices that need to be followed to maximize the potential of the site being crawled. That's where SEO Checklist comes in. It tries to offer the most comprehensive list of tasks that needs to be accomplished so that the site can be crawled by Google or Bing. That checklist includes setting up accounts with Google and Bing's Webmaster Tools, getting analytics setup, ensuring the submission of sitemap to Google and Bing, creating meta tags for pages, and having proper friendly links. Accomplishing the list really opens up the site so that SEO can happen.

SEO Checklist also mentions other great modules to accomplish the list. The first and basic one is Meta Tags. A page is created. When a crawler gets to the page it needs to determine what that page is about. Having a module like Meta Tags helps ensure that there is a place to include all of the relevant information such as: description, keywords, original source, copyright, canoncical URL, etc. and other configurations.

When a page is created, Drupal typically creates a /node/1732 as a URL for a page. We can also set an alias to be /contact. That works for humans, but for a crawler that can lead to some confusion. Now there's two links to the same page. Sometimes they'll see two links and think it's the same page even though it's not. We can't be certain if a crawler will get through the site correctly. That's why URLs needs to be normalized: identify duplicate links, follow a pattern to URL generation, and properly redirect pages. That's what Pathauto attempts to achieve. Following good practices for URLs with Pathauto removes these problematic scenarios.

With the pages created with meta tags, and urls normalized so it's easily navigated, the site should now be easy to crawl, right? Perhaps, but for new sites and even existing sites, the more help that is given to the search engine, the better the site can be crawled. Both Google and Bing conform to the sitemaps.org specification xml so it can know exactly how to crawl through the site. All we need to do is generate an appropriate one to submit. XML sitemap helps to do just that. With the SEO Checklist reminding you to create the appropriate webmaster account and uploading the files, it should make crawling the site much easier.

We've just touched the surface. There are other things like 301 redirects (permanently moved pages), 404 pages (Page not found), and robot.txt files (what to exclude from being crawled, like gateways). Then there's step 2 which includes backlink content, fresh content, keywords, keyword density, RSS feeds, social media, external linking, crossing linking, analytics, and many more activities. SEO is endless in practices and engagement. Appnovation is always learning, being flexible and ensuring that the best practice is in place. That way we can offer the best solutions we possibly can.

Mar 15 2013
Mar 15

Here are some great out-of-the-box themes to use for e-commerce. They are all highly customizable, look great and are fitted with Drupal Commerce in mind!

1. Acquia Prosper 

Acquia Prosper is a classic free ecommerce Drupal theme created by TopNotchThemes. With a monochromatic look and clean lines, it is designed as an Ubercart e-commerce theme that is easy to customize, but is also extremely flexible for any type of website. Acquia Prosper is compatible with Drupal 6 & 7.

2. AT-Commerce 

AT Commerce is a Drupal theme created specifically for Ecommerce sites with built in support for the Drupal Commerce module and Ubercart. It has a responsive design which means that it will work well on most mobile devices without any additional effort. This Drupal Ecommerce theme has support for 26 regions, color module, custom login block and a superfish menu. AT-Commerce also supports a slideshow, slide-down top draw and Google fonts. There are options for changing the settings of the image field alignment, menu bullet and background texture overlay and it also supports Calendar and Quicktabs.

3. Storefront 

Storefront is a Drupal Ecommerce theme that was designed to work along with the Drupal Commerce module. Storefront has features like Commerce specific templates, responsive techniques using media queries, cleaning up of form elements specific to cart and checkout panes, 960 proportioned fluid width with option for setting fixed width and theme settings for setting colors layout options, site framing and home grids.

4. Metropolis 

Metropolis is a tableless Drupal theme which supports a 1 or 2 column layout. with 10 collapsible block regions. It has a superfish drop down menu and an image slideshow plus it provides an option for custom login and logout. Metropolis can be used with Ecommerce websites as well as personal and corporate websites.

5. Velvet Sky 

Velvet Sky has been specifically built for Drupal Ecommerce sites. It has been ported from Wordpress and is based on the Lightweight Drupal theme.

I hope this list helps the next person looking to fit Drupal Commerce with an awesome theme! Feel free to post your Drupal Commerce themes in the comments.

Pages

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web