Link
Editing the Cass Homepage
The homepage was built based on the accordion style but based entirely on metadata.
Asset #150984 is the Home page asset.
That has an inner folder called sections. This is the folder that has all the different widgets of the home page.
Sections folder include the following:
- Carousel
- Resources
- Business Services
- and Case studies.
I will explain each one below.
Carousel
The Carousel can have n elements but we stick to 5 at the moment.
Each page has carousel (154928) metadata schema attached to it.
There are two areas on the carousel page, the left where you will have to change the metadata fields such as:
- Headline.text, e.g Cass Business School – The Intellectual heart of business
- headline.link , e.g The link for the above text
- and carousel middle (the red area), e.g the text displaying for the 10 – anniversary
The area on the right, it is displayed based on 8 different display types of templates those are the following:
- Template with 3 videos
- Template with 2 videos
- Template with 1 image and 1 video
- Template with 1 image
- Template with 1 image and 2 videos
- Template with 2 images
- Template with 1 video
- Template with 2 images and 1 video
The user can select them from the drop down list and then edit the respective part of metadata.
Each template has its own fields to display different to the others.
For example template with 1 image and 2 videos you will have to fill in those fields
<!– Template with 1 image and 2 videos //–>
- carousel.6.image1.heading
- carousel.6.image1.heading.link
- carousel.6.image1.id (the matrix id of that image)
- carousel.6.image1.text (the caption for the image)
- carousel.6.video1.heading (the heading for the video)
- carousel.6.video1.heading.link
- carousel.6.video1.thumb.id
- carousel.6.video1.id
- carousel.6.video2.heading
- carousel.6.video2.heading.link
- carousel.6.video2.thumb.id (the thumb id in matrix)
- carousel.6.video2.id
Resources
For the resources we use the metadata schema of resources so changes need to take place on those fields. The thumnails are the thumbnail of the relative standard page inside that folder.
Business Services
Exactly the same way as the resources above.
Case study
This is a standard page located a the end of the Section’s folder. For the case study choose “Edit Contents”.
Time with the web team – A PP Students post
What could be better than a good job placement? Good colleagues to share it with! I am about 5 months into my Professional Pathway placement with the University Web Team and have decided to blog about my current experiences. For a short summary of this post I have bullet pointed the bad points of the position:
- |
Pretty bare? That’s because there have been no bad points! So read on to learn about my time here…
I am currently a first year PP student looking for opportunities and positions that will allow me to advance into the second year. My experience on this scheme has allowed me learn and earn, with hopefully still plenty more to come. For my first placement I am working with the Web Team at the University, a charming team of experienced and energetic people who help deliver most of the content that you use daily when on the site. As they are they are crucial to the performance and delivery of content for the University. This is of course important for me as I want to end my placement knowing that it was worthwhile and as beneficial to my future as can be. Which of course would give prospective employers the best chance of understanding what I am capable of.
While working for and as part of the City University Web Team, whom are themselves part of Information Services, my learning both professionally and technically have advanced faster than as a pure University student. With the support of the Web Team I have developed many of the skills that modern enterprises want from developed students and have learned so many other new skills that I lost count. To name a few: JQuery, SCSS and PHP, with just as many personal skills gained: team-communication, planning and management.
My most recent project with the Web Team involved the integration and adoption of our new planning service. All our new projects are now submitted to a web service called ‘Trello‘ which is a modern planning tool which provides a simple, easy to use interface that allows the core working objectives to be viewed and updated based on the level of progress for projects.
Along with adopting this new planning technique, I wrote a script capable of taking a Form Assembly form’s development request and converting it onto the Trello boards so that work requests are automatically filed to the team. This meant writing an PHP connector script which took a Form Assembly HTTP input and outputted it to a REST url. A project which was successfully completed.
My future project is my big challenge… designing, building and testing a new system that can be used by students as a webapp. With the support, knowledge and the experience that the web team holds I believe that I can bring a product which the University both wants and needs. Even though they may not know it yet.
Funnelback-powered widgets: how they work
On www.city.ac.uk many pages have a sidebar which can be populated with various “widgets” in the editing environment. Editors can add widgets from a list of options:
- News
- Events
- Testimonials
- Map
- Free text
- Free text (2)
- Flickr
- Call to action
- Courses
- RSS
- Contact
The widgets are built behind the scenes in different ways, the ones in italics above are all similar in that they use Funnelback (our search engine) queries to generate the list of items (news, events, courses, etc.)
Configuration
When you add one of these widgets to a page you will have options to determine which items should be included in the widget.
Options available for the News widget
The news and events widgets share the same search criteria options, while the course widget is slightly different. The options available in the first group are:
- School
- Department
- Related Courses
- Keywords
- This Course
All the criteria are in respect to the current pages’ metadata, so choosing school will search for (for example) news items which have the same school metadata value as the current page. A page which is given the value School of Arts in it’s school metadata field with an events widget set up to match on school will bring back any events which also have a value of School of Arts in their metadata.
The same direct matching of metadata applies to the other options, apart from This Course, which only makes sense on a course page. When this is used for a widget on a course page it will bring back any (again, for example) news items which have been setup with the course page as a related course.
Options available for the course widget
The course widget has fewer options, but they work in exactly the same way as above. The courses explicitly related option will only bring back the courses that have been chosen as the related courses of the page on which the widget is being added.
Combining options
It gets a bit more complicated when you choose more than one search criteria. And again the course widget works slightly differently in this regard.
When you choose more than one option for the news or events widget any of the chosen criteria is used to match an item (logical OR for the geeks). This means if you choose school and related courses together then any (e.g.) news items which have the same school will be returned along with any that have any the related courses in their list of related courses regardless of the school metadata.
With the course widget the options can’t be combined, the widget will only allow one criteria choice.
Development Tools for Windows
For many web developers, Windows is perceived to be a hostile environment in which to develop. But you don’t always get to choose your OS, so over the years the Web Team have adopted a number of tools and services to speed up workflow in a predominately Windows world.
In the interests of posterity I’m sharing them here. Not all of them are exclusive to Windows and it’s not an exhaustive list (please add your favourites in the comments). If you care about what your are building, you should care about your tools.
Development
- Editor – Sublime Text 2, the editor of choice for us Windows users in the Web Team. Steve (running Debian) favours Emacs and Amanda (running Ubuntu) is a NetBeans gal.
- HTTP Debugging – Fiddler. An absolutely invaluable tool for debugging live code – and also not something you’ll find on OS X – I’m yet to discover a Mac based alternative with all the features of Fiddler. Probably my favourite development tool after Sublime Text.
- Filezilla, FTP done.
- Putty. For me, the biggest problem when it comes to developing on a Windows machine is the lack of a *NIX terminal. Hence the need for Putty for SSHing to Unix servers.
- AutoHotKey - incredibly useful for seemingly simple stuff like pasting into the Command Line.
- Console 2 - a better command line.
- Browsers - Chrome is pretty much the development browser of choice here, but it goes without saying that IE, Firefox, Safari, Opera are all required installs.
- And of course, the dev tools that go with them: Chrome Dev Tools, Firebug, Opera DragonFly, IE Developer Tools (ughh)
- IE Tester - slightly buggy when it comes to JavaScript implementation, but still a useful tool for checking out your creations in old IEs
- BrowserStack - the “holy grail” of cross browser testing
- Wamp – Apache, PHP, MySql on Windows
- WinMerge - compare/synchronisation tool
- Tortoise SVN - SVN GUI
- Totiose Git – and here’s a GUI for Git
- Compass - we have been using the CSS Processor Sass for a couple of years now and it has really improved our code maintenance and reduced the time we spend writing CSS. Sass wouldn’t be the same without Compass. You’ll also be needing Ruby.
- CLCL - Clipboard management is pretty lame in Windows. Improve it!
Design/Prototyping
- Photoshop, Illustrator. Goes without saying.
- We use a number of services to help out with writing CSS3, such as CSS3 Please! Colorzilla and Compass Mixins.
- Wireframing – Rik is a recent convert to Axure. He can also be found using such old school stalwarts as post-it notes, pens and paper.
Project/Product Management
- We use JIRA and Greenhopper for managing our sprints.
Productivity
- Launchy.- I love launchy, saves me at least 3 minutes a day.
- Dropbox. Can you remember what life was like before Dropbox? No, neither can I.
- Time tracking – we don’t have a consensus on the best time tracking app. I use Klok, but Grindstone is also worth a look.
- Password Safe. Keep it secret. Keep it safe.
- Skype – being a geographically disperse team we do a fair bit of video conferencing and instant messaging. I’m not a huge fan of Skype but it does the job for us.
- LastPass - free the space in your brain reserved for hundreds of web passwords and use it for more interesting thoughts.
- Grooveshark - for those plugged in times.
So those are some of our favourite development tools, what about yours?
PHPNW12
Recently I attended the PHPNW12 conference in Manchester, run by the PHPNW community group. Here are some reflections.
Zend Framework 2 looks great
I spent the whole of Friday in Rob Allen and Evan Coury‘s tutorial on ZF2. I love the idea behind the new reusable modules, and the efforts so far toward a set of trusted modules covering common ground in ZfcCommons.
The concepts that the framework are built around seem complex at first, and getting to know the language feels difficult (what’s the difference between the Service Manager and Dependency Injection Instance Manager ?). It was good to get an overview of the key ideas and how to use them. I think it will take me a while to get into the event driven approach to putting the framework together (particularly as I’ve spent quite a bit of time in JavaScript recently).
I’m really looking forward to getting stuck in and using the framework when a suitable project comes our way.
Everyone loves Composer
I lost count of the amount of times a speaker mentioned or used Composer. It seems us PHP people are quite excited about an easy dependency manager.
Maybe we’ve lagged behind Ruby’s Gems and Bundler?
Symfony vs. Zend Framework
This was also an often visited topic, even if a bit cheekily. Perhaps because Sensio Labs had a stand at the conference.
I was left with the impression Symfony was the hip young upstart to Zend Framework’s business-like serious approach. Never having tried Symfony I can’t comment on whether that impression is warranted.
I should take the SPL more seriously
Patrick Allaert‘s talk about data structures in PHP was pretty hardcore. The take home for me was the SPL has been structured the way it has to overcome the performance problems of using arrays for everything, so I should use it when I can in future.
Transpennine trains
It seems to me the journey from York to Manchester takes far longer than it should, and is a rubbish service on a Sunday.
It was the first PHP conference I’ve been to, and I wasn’t sure what to expect. On the whole I thought it was pretty good. The variety of topics covered means that inevitably some resonated with me more than others, and I think I would probably check the programme carefully before choosing the next conference to go to.
Responsive Navigation
The Web Team have recently launched two responsive websites: a resource for New Students packed with useful information about the induction process and a micro-site celebrating Cass’s Ten Year Anniversary.
One of the biggest challenges in developing these sites was tackling navigation. For better or worse, City’s website has a complex navigation system and shrinking this down to fit into the limited real-estate of a mobile phone screen threw up a number of IA, design and coding challenges.
Given that responsive design is a relatively new phenomenon, a number of design patterns have emerged to deal with navigation on small screen devices. After prototyping and testing a number of different options, we settled on a hybrid approach that prioritises search and gradually reveals layers of navigation when users click a “toggle” button.
Here’s an example from the Cass website:
Mobile navigable - collapsed and expanded
Desktop Navigation
These screenshots illustrate how on smaller screens the global navigation is collapsed and hidden. When users click the menu icon, the navigation then slides down. This emerging “toggling navigation” pattern has sparked an interesting debate amongst the web design community about which icon best represents a hidden menu. We went with the three horizontal lines approach as this appears to be emerging as the most popular pattern and has been adopted by major sites such as Facebook, Twitter and Google. Also, when we tested the design with users it didn’t cause any confusion – it appears to be a design pattern that many users instinctively understand.
To aid user’s understanding of the icon we included the label “menu”. Again, there is debate over the best label: “navigation”, “navigation menu” etc. but “menu” appears to be emerging as the most widely used. In time I suspect that enough users will understand what the three horizontal lines means that the label can be dropped altogether.
The global navigation differs between the Cass and City website but we have adopted a very similar pattern to keep some consistency between the two.
Here the navigation works in exactly the same way except that the sub levels have been removed to simplify the experience, and we retain the “Cross domain” navigation above the global navigation.
These sites are still very much our first forays into responsive design and we will continue to test and refine these patterns as we “responsivise” more of City’s websites.
New student section and responsive design
Just in time for the start of the year, we released a responsive version of the design for the new student section.
It’s a first step into switching the entire site to a responsive design and over the next few months, we’ll look into rolling it out to other sections. We will also be improving the design and functionality as we go along.
CSS media queries target different screen sizes and adapt the design to the size of the user’s screen. We opted for an approach favouring fluid transitions: rather than using fixed breakpoints set by specific hardware device sizes, the elements are rearranged to fit any screen size.
We introduced Bootstrap with the release of this new design, to handle the grid, scaffolding and responsive functionality. We also took this opportunity to switch this section to HTML5. A change that has previously been made elsewhere on the site and that we will continue to apply across different sections.
If you want to learn more about responsive design, A List Apart published an interesting article on this design process.
Unifying a University’s user experience
Following the launch of the new global navigation on our external website, we have rolled out the design pattern across three other online products: Moodle, the Student Intranet and Library.
The design is part of our drive to create a consistent experience across the range of City’s online products. We want users to enjoy complementary transitions between our most used online applications and websites and hope the new design will help users discover where they are within City’s digital landscape and be able to easily navigate across the breadth of our products.
Admittedly, creating a unified user experience is by no means an easy thing to achieve in a University environment – with a diverse (and constantly growing) range of online products, individual schools with their own brand considerations and priorities and separate teams responsible for each product.
However, by reaching out to teams and people across the University (big thank you to the Moodle team) we have made a small but important step in unifying the experience of City University London online.
Our New Developer: Gilles-Olivier Guegan
We recently recruited a new Front-end Web Developer, Gilles Guegan. Gilles has extensive experience with our CMS having previously worked with its vendor and at thetrainline.com.
In fine Web Team tradition Gilles was inducted, via the medium of sport, at the back of the Drysdale Building.
