DrupalCon – London

DrupalCon London 2011

What I thought/experienced/noted…

DrupalCon was really good, I participated on a great workshop and the sessions were in majority entertaining, informative and really good to learn new things or reinforce concepts already known. (Of course, in any conference there are a few exceptions… some boring sessions and some really bad presentations, but thankfully they were just a few.)

For my pleasant surprise and future reference, all the sessions were recorded, so you might also benefit checking each day tab at http://london2011.drupal.org/conference/schedule

QUICK UPDATE: The Drupal conference has around *60* videos here: http://tutr.tv/l4948 – thanks Peter Robinson!

Advanced views

Presented by Johan Falk

Link to conference schedule of this course.

Main screencast from NodeOne website (before the course): http://nodeone.se/blogg/learn-views-with-nodeone-part-1-overview
Read the following related to this course:

Blocks: you can click ‘show blocks’ and you can see them highlighted.

Interesting modules: token, transliteration, Pathauto, CTools, Views, Panels, References, Masquerade – be sure to read the description to know more!!!

Check: “display suite” for more panel and views configuration

Instructors: Johan Falk (Itangalo), Hagen Graf (hagen), Roel De Meester (demeester_roel).


Keynote – the state of Drupal

Presented by Dries Buytaert

Link to the keynote video

Drupal biggest opportunities: substituting legacy systems, IT cutting costs, mobile

Big vision: Flexibility, Scalability, Reach.

Competition: WordPress, Joomla, Sharepoint, TYPO3

The roll out of Drupal 8 from 7 will happen only if critical bugs are less than 15 and major bugs/tasks are less than 100. Trying to reduce thresholds to balance D7 and D8.

Drupal 8 initiative priorities: Native html5/css3, media/asset handling; usability ease of use; mobile support wysiwyg editor; better apis; configuration management; content import/export; content staging.

Dries Buytaert – @drieshttp://butayert.net


The Path to a Mobile Drupal: Techniques, Tools and Failure

Presented by John Albin Wilkins

Link to the session video and description

Other Links:

Mobile the traditional way:

Responsive Web Design (Hicksdesign)
Check Hicksdesign website and scale the browser to see it working… notice the different rendering of images/paragraphs/divs, etc.
A list apart article: responsive web design
1. flexible grids
2.flexible images
3. CSS3 media queries

Adapttive Design – developed in response to Responsive Design.
1. CSS3 media queries
2. fixed layout sizes

Flexible grids:
use perentages to set grid sizes
.content{width:62.5%;} //5 grids
.sidebar{width: 37.5%;} //3 grids
percentages allow grid to grow/shrink with the screen size
target/content=result
eg (5 grids)/(8 grids) = 62.5%
600px/960px=62.5%

Flexible images
use max-width to constrain images within the flexible grid.
img, embed, iframe, object, video{max-width:100%;}

CSS3 media queries
with css2 media types we could target different classes of devices: print, screen, handheld, all
with css3 media queries we target device capagilities
[type] and ([query])
all and (max-width: 768px)

.info Files (Drupal)
stylesheets[all][] = css/print.css — move your media types and queries inside your css files
@media all and (min-width:480px){
put all your style here;
}

Few (monica’s) links for inspiration:

Two types of breakpoints

device breakpoints (unnatural):
ex: 320px iphone in portrait mode, 480px iphone in landscape mode 768px ipad in portrait mode, 992px – small laptop (minus browser chorme) 1200px large desktop

design breakpoints (natural):
“Devices will change, follow your design”

Revenge of the Meta Tags (mobile device zooming)
check metas: ‘viewport’, ‘MobileOptimized’ content width, ‘HandhelFriendly’ content true

Browsers not supporting CSS3 Media Queries
IE6-8 – Respond.js (https://github.com/scottjehl/Respond) — insert inside IE conditional comments

Mobile First! – at least have one design outside media queries, the idea is to use mobile first.

Loosing 80% of the screen make you focus!!! just put what is really interesting/relevant/important first

Image Handling in Drupal

Zen 7.x-5.x
Responsive panels layouts, respond.js, sass (CSS preprocessing), html5
Check palantir.net and resize browser (it is in Drupal)

Speaker’s links:


Web Typography & Drupal: Putting Arial Out To Pasture

Presented by Jason Pamental

Link to this session video and description.

Didn’t go to this session but I wish I had gone… the next one I actually went was a bit boring… (probably because of my lack of knowledge, don’t blame the presenter!)

From: http://thinkinginpencil.com/
References related to the above:


Easy Drupal Hosting Lifecycle: Local Dev, Production Deploy, Cloud Scale, and Sleep Well

Presented by Barry Jaspan

Link to description and video of this session.

Barry Jaspan @bjaspan (barry.jaspan@acquia.com)

Acquia Dev Desktop also runs like xampp (??? this I didn’t get it, would check presentation later to understand or send him an email asking about)

Mostly saying about DevCloud, which is easier to push.

Said that Acquia is recruiting, check acquia.com/careers


Forensic Theming: Key Techniques to Building Effective Drupal Themes

Presented by Emma Jane Hogbin

Link to video and description of this session.

My first time at DrupalCon and I got a book Front End Drupal from her! (thanks Emma Jane!)

Links:

She will usually change one tpl.php ()

Tools: css editor, firequeries, webdeveloper, ie web developer, firebug, sweaver

Devel/Themer: overlay on top of page, “point, click, analyse”. Also give info about the template file you are working on.

Drupal (layout) Modules: context, display suite, panels, omega, tao

Emma Jane Hogbin is author of:


Theming API

Presented by Rolf van de Krol

Link to this session video and description.

He started talking about the theme function call.
Found slideshare for this session at: http://www.slideshare.net/rolfvandekrol/theme-api

Links – theme hook, it will give a list of links and will be themed as a list of links. On array is the list of links itself and with the titles on it.

On the node you can also find a path to the template.

Template will override the default from Drupal.

Preprocess and process functions
Get the variables in the pipeline and change them as necessary (???)
gets the variables array as parameter and change the variables array and you can extract the values more easily like the ‘title’ value.

Templates, then modules, then themes pre-processing (preprocess use for any template, preprocess_node only use for the node template).

Inside the node array instead of have a type theme, was found a ‘theme engine’, so the engine actually find the template files for you, you don’t have to specify them yourself. PHPtemplate – default template engine in Drupal.

Pattern: node– (dash,dash)

If engine find these templates on site: page.tpl.php, node.tpl.php and node–page.tpl.php (is a special case of node)

mythemes_lnks__comments (mythemes will be ignored, a function links__comments will be created, if you don’t define the function it will use the default from the core).

If you are really interested in this topic I recommend checking the video for this session and analysing the slides on slideshare since it went a bit fast to follow up everything.

Take Full Control of Your Site Layout with Display Suite for Drupal 7

Presented by Kristof De Jaeger and Jan-yves Vanhaverbeke

Link to this session description and video.

@swentel drupal user 107403
@janyves drupal user 591438

Maintainers of field_group, sweaver, imagecrop

Demo for this presentation http://dsd7.customsource.be

Philosophy of Display Suite
manage your site layout from one central place, bridge the gap between themers and developers, make template files unnecessary, no php code (reduce danger of exploits), focus on ease of use, portability and manageability; not a css tool!

Modules: Display Suite, Extras and Search Display

Really good for dragging and dropping your layout without having to mess with Css, where to put, etc. (the basic way, more specific layouts you can tweak with the style). Very nice to style some teasers with images, etc.

Display suite has other view modes. You can also go on Page: Row style options and use individual views for each item on your page.

Extras module: field templates, regions to block, contextual links, page title options, switching view modes, views displays (templates and fields) and more.

If you don’t use panels, the extras/display suite could be a good replacement for panels.

“A beautiful search”
override search result pages for Node and apache solr
search display allows to override the search display of the search.

Use page control with panels and content control with Display Suite.

Performance
always a concern, D7 was rewritten from ground up, views field API fields, install drupal.org/project/entitycache

References:


Keynote: The Future of Social Media – a historical perspective

by Tom Standage

Link to video of this session

Truly enjoyable talk, with some funny moments!

“The Roman used laptops and tablets”

Social network in Roman era (scribes – enabling the infrastructure, scrolls)

Romans writing on walls “Gnaeus Alleius posted on your wall” (messages, adverts, graffiti)
St Paul used social media, ‘open letters’ (know as epistoles)

‘Scroll the news’ like the old times…

“New blog post from Martin Luther” pamphlet distributed getting ideas against selling indulgences to get a piece in heaven. Traffic stats when something was reprinted and spread, difference between german and latin letters to reach clericals or general public.

Coffee houses in England inspired origins of the open source movement (environment allowed discussion, exchange of ideas, debate).


Multilingual Drupal Solutions: Use cases and modules

Link to the video: http://london2011.drupal.org/conference/sessions/multilingual-drupal-solutions-use-cases-and-modules
Presented by Florian Loretan and Jose Antonio Reyero del Prado

They have an international discussion going on, using hashtag #dci18n on twitter.

Why multilingual? focus on audience, but not easy because some things don’t translate well or have different meanings (cooking and baking -> cousine cousine (French))

Localisation is only associating a place to something.

  • Use case #1 simple multilingual blog: drupal.org/project/i18nblog (simple multilingual blog)
  • Use case #2 multilingual brochure site (wunderkraut)
    Publishing options > Multilingual support > enabled, with translation
    (check isomething sync module to check which parts will be translated or not – maybe an image don’t, don’t duplicate). Same, check permissions that maybe multiple users can translate the website, so need more people.
    Drupal automatic recognises which menu item belongs to which language and only show the correct menu when the language is selected.
  • Use case #3 multilingual community (Drupal documentation to be translated, for example)
    Different setup, get a term and translate each individual term and possibly the whole meaning still would stand.

Contact info:

Jose A. Reyero – reyero.net@josereyero

Florian Loretan – wunderkraut.com@floretan


Creating and measuring the user experience

Presented by Jeff Noyes

Video for this presentation: http://london2011.drupal.org/conference/sessions/creating-and-measuring-user-experience
PDF for this presentation.

He gave an example of bad user experience if you have a Microsoft Word interface with all toolbars turned ON, leaving only 20% of space for typing… and it should be the opposite, 80% focus on writing.

IDEO video – example of redesign of the shopping cart
“One conversation at the time”. “Wild ideas”
Focus caos… loads of posts with ideas, voting on the ideas that are cool but also doable.
“Fail often in order to succeed sooner”
Ideas: child safe, baskets to fast shop, scanner to add products, wheels that allow car go sideways, after check-out basket stays in the store and bags are hooked on the frame

IEEE study ‘why software fails’, lack of requirements, fixing error after something was manufactured (100x more cost after something was actually manufactured to fix a problem).

REMEMBER the audience!!! you have to remember who you are designing for, what are you designing, why? which problems they have.

To find the right solution (the “How”), we
need to prioritize the features we invest in
(the “What”). To determine our priorities, we
need to define the problem (the “Why”). To
define the problem, we need to identify the
intended audience (the “Who”).

– Whitney Hess, Happy Cog

How to know the audience and the problem (Who and Why):

  • contextual inquiry (field research in natural setting)
  • surveys
  • interviews with target users (check views3)
  • usability tests
  • analytics (Google Analytics, Crazyegg-have heatmaps and scrolling, also search criteria- etc)

What:

  • design principles
  • ideation
  • task flows

Some interesting online tools: http://www.lucidchart.com/ and http://www.mindmeister.com/

  • greyboxing (really leave as grey boxes, avoid divisions, number of items on titles, etc)
  • storyboards – sequence of events (views project, map general flow of the 80% use of the tool)
  • wireframes (not usually helpful from a user perspective)
  • prototypes (clicable version of your design, can be high/low fidelity)

Test / Validade

  • moderated test (someone guiding the user through tasks)
  • self-moderated test
  • static image, self moderated test (user will be presented an image and get feedback on what’s stand out, etc)
  • navigation tests (focused on the information architecture of your site)
  • diy testing (have to keep in mind: target audience, be unbiased, listen more than talk

http://flavors.me/jnoyes


Don’t Design Websites. Design web systems!

One of the best presentations in my opinion!

Presented by Todd Ross Nienkerk and Adam Snetman
Link to the session and video presentation
PDF of this session

Today’s websites are really websytems
Designers determine the site’s functionalities… (big responsibility!)

Cannot paint a house without building it… architecture is necessary first.

  • Define the site
  • Gather goasl and requirements
  • Create personas (audience)
  • What is the content and how would be organised? (content types and site map)
  • usability testing
  • choose your platform
  • translate everything into drupalspeak if you choose this platform (to map to its structure from wireframe)

Check Samantha Warren (and also check mood boards – collage and style tiles – elements of inspiration, sample colours)

Really liked the style tiles!!!

bit.ly/mood-boards
bit.ly/style-tiles

Example of the redesign of the logo, then site.
Check the goals, logo, typography, imagery, catch phrase, grid, experience.

Design on grid
960 grid, check the module, etc…

Stark theme is default, included in core.
understand the source code….

The trick to find the modules you need…

textformatter module, check! lullabot.com/ideas module monday blog series to check popular modules or reviews. drupal.org/project/modules sort by most popular for easiness

Minimize templates (design for change): less maintenance, consistent styling, specify the rules and all elements that we need functionality before implementation itself, remember architecture…

Check navigation levels, how many levels you can have?

‘the site you design today will change tomorrow’
The designers are the primary architects

check bit.ly/drupal-balsamiq


Drupal as base system for your iPhone, Android, iPad apps

Presented by Sumit Kataria
Video for this session
PDF of this session

This session is about building native iPhone/iPad/Android applications using opensource web based technologies (http://www.appcelerator.com) with Drupal as base system to manage content, users, views, permissions etc.

Some iPhone/Drupal stuff Sumit wrote in past: http://civicactions.com/blog/sumit

Slides: http://goo.gl/5xZmP

Tool they choose: Titanium http://appcelerator.com (major brands choose titanium)
Free framework which allows build apps for phones, apps, desktop (90% of code base) get native apps

drupal.org/project/services (services APIs gives the end-point to make request and get data out of it. Layers: services, serves, authentication layer).

Drupal will have data, users and services api, TI network api will gather that and then compile to the platform. (example: drupalize.me)

I thought that with Titanium you could actually develop for iPhone/iPad independently of platform but apparently you still need a Mac for that.. 🙁

However, good idea, you can use your Drupal site to contain all the information and structure of the application and you just make calls to the nodes and get the content. Storage of videos still on Drupal (is the app only streaming?)


Keynote: Designing the Sustainable Web

by The Web Standardistas

Link to video and description for this session

I thought it was worth it to include the session description here, since it was succinct enough and also very relevant to my interests:

The web is evolving. Fast. As designers and developers working in this volatile medium – one that is characterised by a relentless pace of change – we need to consider strategies that deliver a sustainable web that exists beyond the here and now.

This keynote will focus on how, by marrying fundamental web standards with timeless design principles, we can create beautifully designed user experiences that embrace the full range of emerging technologies at our disposal. HTML5 and CSS3 offer today’s designers and developers a platform on which to build sustainable web presences for tomorrow. In short, to create a sustainable web – one that exists across a growing number of devices – that is designed not with short term goals in mind, but that is built from the ground up with longevity as its driving force.

We discuss how a standards based approach that is forward looking, whilst embracing classic design principles, can ensure wonderful user experiences that exist outside of the latest trends and live on in our users’ imaginations.

We both believe great design and enhanced user experiences go hand in hand:

  1. Build a solid platform, embracing emerging standards, ensuring maintainability moving forward is pain free;
  2. Apply fundamental and timeless design principles to ensure wonderful user experiences, experiences that exist outside of the latest trends and ensure a longer shelf life; and
  3. Deliver efficiencies (via 1) and marketability (via 2) to satisfy the business people.

The Web Standardistas

In addition to their role as The Standardistas, Christopher Murphy and Nicklas Persson teach interactive design at the University of Ulster at Belfast, where they have been active in promoting a web standards-based curriculum.

As tweed-clad duo The Standardistas, they write regularly on standards-based web design and the importance of improving web design education. Their first book, which extols the virtues of A Web Standardistas’ Approach, has received widespread praise for its practical and hands-on modus operandi. In addition to this they have been invited to write for, amongst other publications: 24 Ways (http://j.mp/startonpaper), The Manual (http://j.mp/designingthemind), and .net magazine.

In addition to speaking regularly at conferences worldwide, they run workshops and masterclasses, teaching the principles of design, both on and off the screen.

My notes:

Design for multiple devices (desktop, tablets, mobiles)
Content shifting
Secret formula, not sprinkles, they can be used to add for flavour

Check: grids, ratios, typography, semantics
Remember of the 50/50 of the iceberg, design and code

Initial web was already responsive (no styling in the beginning), tables were used for styling instead of their original purpose.

Zen garden starting the show of content and design separation.

Seriously good resources below!

Jan Tschichold typography.
Check book: Grid systems in graphic design
hierarchy, composition, typography, semantics, device independence, openness.

Check Designing the invisible (a practical guide), also Josh Brewer website, Build conference. Check The Grid System website. Also check cognition.happycog.com (it is a responsive website) and Naomi Atkinson, Dan Rubin and Ryan Taylor.

Surveying the landscape, the secret formula, the markup and design timelines, a marriage made in heaven.

@standardistas

nicewebtype.com – rich typography – Tim Brown


Adaptive, Responsive, Mobile First and Drupal theming for the future with HTML5, CSS3 and Omega

by Jake Strawn

Link to video for this session

Really great presentation and some good resources (check link for session above).

This session will introduce you to Adaptive Design and Responsive Layouts and how you can implement designs and themes that will work on ANY device without the need for multiple versions of a site all with different themes and designs.

@himerus

Mobile first: it is the common (minimum) denominator.
One reason for mobile first: mobile is exploding!

Responsive web design: alistapart.com/articles/responsive-web-designs

www.zeldman.com/2011/07/06/responsive-design-i-dont-think-that-word-means-what-you-think-it-means

Theme for Drupal – Omega html5 – media queries for 3(?) different sizes 1200, 960 and ….


Of Constraints and Capabilities: applying systems thinking to design the ideal experience

by Dante Murphy and Angel Brown

Link to video and description of this session

PDF of presentation

“Design must convey the essence of a device’s operation”

Recommended books: The design of everyday things; The laws of simplicity book and website (John Maeda);

Idea of offline capabilities: tube system – longer distances, related system: buses for shorter terms. Walking signs (tourists/info).
Appearance: impacts how people perceive and also how they feel.
Constraints are good to be able to start and stop.

“Designs depends largely on constraints”

– Charles Eames

Theory/mental/psychology term FLOW (challenge activate your capabilities).

‘If you wait for ideal circumstances in which you have all the information you need (which is impossible)…

‘Not my problem’ self imposable contrains

@dantemurphy @angelbrownuk


Making your theme scale with your brand

by Maarten Verbaarschot and Terrence Kevin O’Leary

Link to video and description of this session

Reduce power of theming from editors/project managers and leave it to the themers/designers. Create and use personas (google it). The master theme document (chapter three website – http://www.chapterthree.com/)

Groups at Drupal: j.mp/markupguide

Sass compiles the code once you import the images with @import all (???? check)

Principle: save time, stay focused, do things properly

FOM 2011

Future of Mobile 2011

Future of Mobile

I couldn’t participate of Over-the-air ([tooltip text=”Over-the-Air”]OTA2011[/tooltip]) this year, but Adam Cohen-Rose blogged about it and I’m glad about it! So, to catch up with what happened check: http://blog.cohen-rose.org/search/label/ota11

Well, now back to FOM notes…

Instagram presentation

Dan Rubin avid user Instagram

How it started: with beta invites matching interests of product (in that case, designers, artists, influences, etc @jack – twitter founder). It generated enough interest so much that NYtimes also got interested on the instagram. The technology was kept simple and allowed scale.

Key decisions: internationalization early on (3rd week!!!), small team, single platform (iOS), minimum viable products each steop of the way (proof of concepts too), invest in community very early.

@brianleroux presentation (phoneGap)

Link to presentation at: http://www.slideshare.net/brianleroux/future-of-mobile-9281709

phoneGap was known as “the bridge”, “foreign interface” and “the hack”

The sad sample of HP webOS – it ended up bad…. finished.

Extensive documentation for phoneGap at: docs.phonegap.com

Interesting things: you can access devices features with phonegap too! works with jquery, jqtouch, etc. You can think of phonegap as a fancy browser!

We build your apps ‘in the cloud’

He suggests to choose a benchmark and stick with it. Monitor it and develop for it. (One example: performance)

Layouts favorites: flex-box, css media queries, meta tag with viewport, however he also mentioned that aesthetics can hurt performance…

Remember that the brand is cross platform!

Tip: “try to build an app without using a library if possible, if not, start using something that solves YOUR problem”

They used qUnit and Jasmine for testing.

For the backend design he said that every legacy system needs a proxy, RESTful JSON endpoints are fastest.

Code ghetto-photoshare and
demo at deep-flower-8321.herokuapp.com

Going offline, the solutions used were IndexedDB, SQLite

Phonegap build – also using responsive webdesign, yay! Continuous deployment, no SDKs required!!!!

debug.phonegap.com another useful tool, in your quest to overcome cross-platform mobile development.

If the “Demo gods are kind” it will work…

(he mentioned while trying to load demo… quite funny phrase in a way)

General interesting links gathered at the conference

http://www.webdesignerdepot.com/2011/08/characteristics-of-a-modern-portfolio-site/
http://docs.phonegap.com/
http://instagr.am/about/jobs/
http://brian.io/
http://developer.vodafone.com/
http://lightbox.com/
http://swipe.nokia.com/
http://www.steelyeye.com/
https://www.x.com/developers/paypal
http://www.abookapart.com/products/mobile-first
http://www.lukew.com/ff/entry.asp?933
http://www.magentocommerce.com/

Future trends: local, social, digital all via mobile (four megatrends shaping commerce)

x.commerce innovate
bmw design…
@nanwar

Cannot know what the future of mobile is but it is a 1 trillion opportunity!

Designing for different screen sizes

Think more than size, think about interactions and experiences

Not to use mobile as a word, more screens or devices…

1.the glance: sub-5 secs
2.data snack: sub-60 secs

Tablet vs mobile

Tablet: magazine (more public experience)
Mobile: private experience

iwatch concept, metawatch not a concept

Progression: classic web > web 2 > mobile first > touch first

Mobile games and html5

http://www.phoboslab.org/fom2011
@phoboslab
http://impactjs.com/documentation

Mobile game engines: unity, corona, cocos2d

Super mega browser farm 2 – social games played in browser

http://impactjs.com/

Observations:

  • scaling via css slow, via web-kit transform3d faster because triggers the hardware acceleration.
  • obfuscate your code with google closure compiler
  • “evented input” event to an element
  • button.onkeydown=… (in javascript)