Custom Tiles for Content Layout in Plone

Creating rich, interesting layouts for dynamic content through a web interface has recently been transformed in Plone by a product called Collective.Cover.  Content editors can now drag and drop content “tiles” into rows and columns, arranging things as they see fit in an intuitive process.  Screen Shot 2013-12-21 at 8.14.29 AM

While this makes for a nice experience and covers much of the content you might like to include in your layouts, it is possible to add your own custom “Tiles”.  The developer documentation for this process is currently being developed, but it’s not too difficult to create your own tiles from the basic tiles included in the package.

I created a package for a tile that queries courses from a the Talent LMS, listing courses a user is registered for and the current completion status.   Here’s what it looks like:

It incorporates the TalentLMS php API and uses Twitter Bootstrap components to generate the badges and progress bars.

The current best practice for creating plone products involves using templer.plone to generate the boilerplate structure.  The very short version of the creation process involves implementing the PersistentCoverTile interface from collective.cover.tiles.base and registering the new tile with the plone.app.tiles record in the plone registry.  The tile template calls a custom BrowserView that requests the course details using the currently authenticated user asynchronously.

For more details, please see the repository on Github (https://github.com/a-pasquale/cloudspring.lms) that implements this custom tile.

Front-End Frameworks

Front-End Frameworks are increasingly common in web development in the last few years.  They provide basic components for building a web presence in a standard way that can improve both the quality of experience of people’s interactions and the speed of development.  These are some projects that I’ve found useful.

Screen Shot 2013-11-21 at 10.38.32 AM

Foundation is probably the first front-end framework that supported building websites that were responsive to the device used to access them.  I used it in a project a few years ago and was very pleased with my experience.  Foundation 5 is planned for release imminently and continues to push the edge forward.  They offer, among other improvements, the ability to selectively include content based on media queries.

Screen Shot 2013-11-21 at 10.43.59 AMBootstrap is another great project that has really exploded in popularity.  Built by Twitter, this framework is ubiquitous across the web recently.  Bootstrap 3 offers an improved grid system and some semantic improvements.  I’ve built a number of projects using this framework and highly recommend it.

Screen Shot 2013-11-21 at 10.45.28 AMSemantic UI is another framework that has been gaining traction recently.  Semantic is structured around natural language conventions to make development more intuitive.  The code samples feel really intuitive and elegant.  This framework looks really promising and I’m excited to try it out in a project soon.

WordPressing “The Homesnewser”

Screen Shot 2013-02-04 at 10.43.46 AM

I built this site for the a homeschool newspaper publication that needed an online presence.

Screen Shot 2013-02-04 at 10.43.46 AM

It’s built with WordPress using a responsive design to accomodate everything from phones to tablets to desktop browsers.  There are a  few interesting plugins:

The Facebook Like Box allows visitors to share the articles with their friends on Facebook.  Getting the word out to friends and subscribers is one of the key use cases for this website.  A Google Analytics plugin allows staff to evaluate how successful social media campaigns have been in driving visitors to the site.

FlexPaper, a web-based document viewer, allows visitors to browse the PDF version of newspapers without leaving the current page they are viewing.

Screen Shot 2013-02-04 at 10.47.54 AM

GIS with GDAL and python

Mt. Tom

This project uses the the opensource Geospatial Data Abstraction Library (GDAL) to automate the production of spider-like feature layers extracted from a larger dataset. The GDAL libraries provide a single abstract data model for a large variety of data formats. It also comes with a variety of useful commandline utilities for data translation and processing.

I used the python bindings to develop this commandline tool. While this script is tied to this particular dataset and task, it should be easily modifiable to automate other similar tasks that would otherwise require significant repetitive input from a GIS analyst. These powerful tools are worth checking out.

Multiplication

multiplication

Multipication puzzleI built this simple web application to generate multiplication worksheets and puzzles for my kids who have been busy memorizing their multiplication tables.  I looked for something similar, but couldn’t find anything that quite fit what I was looking for.  There is a form that allows you select with numbers to use when producing the tables and two different worksheet options.

Anyway, I threw this together using ruby, the Sinatra web framework, and the haml templating language.  This is a pretty powerful toolset and I was very pleased at the ease with which everything came together.   It’s deployed on heroku using git. You can browse the source code on github if you are curious.

Blackjack

Screen shot 2011-04-02 at 9.12.11 AM

I created this blackjack game as part of a tutorial to teach a student some basics of ruby programming and web development.

UPDATE: Here’s a link to Sam’s version of the game. It’s a little more polished then my initial implementation. I think he’s still planning to add more features. Anyway, nice work!

It has an object-oriented model that can be reused in other card games. Inheritance is used to add blackjack-specific logic to the basic deck and hand objects and implement the scoring method.

The Sinatra web framework was used to provide the underlying scaffolding to create the web application. I’ve used Sinatra for a few projects recently and been really pleased with it. It is lightweight and makes it possible to create web applications quickly and easily without making a lot of assumptions about how you are going to use it.

Sinatra supports the haml templating language, which is such a pleasure to use compared to most of the other templating languages I’ve used. It has a great asthetic and is clear and easy to understand, resulting in some beautiful code. It even lets you use regular Ruby code in a simple way.

I chose redis to persist the game data. Mostly, this decision was because I wanted to try out a new noSQL database, but redis seems a decent fit because it allows data to be stored as a list associated with a key. This is similar to the internal structure implemented in Ruby and operations like pop and push to move the cards from the deck to the player’s hand just work the way they should.

The source code for this game is managed using git and deployed with heroku and redis to go. I’ve been impressed with the heroku deployment platform. It fits right into the workflow, is free for small projects like this, and seems easily scalable once more capacity is needed.

hamlRuby

A Community Plone Site

seminar.groundshift

I worked on this Plone site for a seminar entitled “Diversity and Innovation” at the Center for Institutional and Social Change at Columbia Law School.

This site showcases many of the capabilities on Plone as a intranet portal and community networking platform.  Unfortunately, access to the bulk of the site is restricted to students, so I’ll just have to describe some of the things going on behind the scenes.

The design and layout of the site is done in vanilla HTML/CSS and integrated with Plone using deliverance, a python-based tool designed to facilitate theming and integration of web applications.  Theming Plone has historically been somewhat challenging, but deliverance is a game-changing tool that revolutionizes theme development.  It also provides to capability to integrate different platforms in a seamless way.

The site features a rotating carousel highlighting important content.  Superfish,  a jQuery-based dropdown menu system, makes it easy to navigate the content in the site.  A helpdesk system, Zendesk, is integrated into the theme, allowing the students easy access to support staff.   A number of other useful plugins are installed to facilitate the generation of forms and surveys as well as a discussion board.

The aspect that I spent the most time on, and has become a core product in several other sites as well, is a community social networking area.  Each student has a profile and can post content to their own blog/wall.  The students can tag their content in various ways that allows it to be aggregated in other areas of the site using Plone’s most powerful content type system.