HTML CSS Theme

DrupalCon Keynote - Luke Wroblewski - Mobile First

LukewMobile First (Video) (Download PDF)

  1. Growth
  2. Constraints
  3. Capabilities

Other Presentations by Luke

Growth story

  • 371,000 babies born each day
  • 378,000 Iphone, IOS 562,000 devices per day
  • 700,000 Android 
  • 1.5 million devices activated each day

Dries Buytaert Keynote Drupalcon Denver 2012

DriesBWin the hearts and minds (Video)

Innovation examples, cat duster, baby duster, noodle hair shield.
Cool companies like Palm and others have failed to innovate, Drupal must innovate.
Drupal 7 grew 2.5 times faster than Drupal 6 to 100,000 sites, there are now more drupal 7 sites than drupal 6.
Kodak invented digital photography, but they were unwilling to move away from their core analog business.

Semantic Web and Resource Description Framework

Need defined

HTML can only say that the span of text "ID586172" is something that should be positioned near "Acme Gizmo" and "$199", etc. There is no way to say "this is a catalog" or even to establish that "Acme Gizmo" is a kind of title or that "$199" is a price. There is also no way to express that these pieces of information are bound together in describing a discrete item, distinct from other items perhaps listed on the page.

Semantic Web

Componets of Semetic web

The semantic web comprises the standards and tools of XML, XML Schema, RDF, RDF Schema and OWL that are organized in the Semantic Web Stack. The OWL Web Ontology Language Overview describes the function and relationship of each of these components of the semantic web:

CSS Tips and tricks

Images floating right or left

http://www.tizag.com/cssT/float.php

Descendant selectors

We address this case by supplementing the previous rules with a rule that sets the text color to blue whenever an EM occurs anywhere within an H1:

h1 { color: red }
em { color: red }
h1 em { color: blue }

The third rule will match the EM in the following fragment:

<H1>This <SPAN class="myclass">headline 
is <EM>very</EM> important</SPAN></H1>


Child selectors

A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">".

Example(s):

The following rule sets the style of all P elements that are children of BODY:

body > P { line-height: 1.3 }

Example(s):

The following example combines descendant selectors and child selectors:

Subject

Oraganizing your web site

A web site plan consists of planning for:

  1. Elements on a page
  2. lists of content
  3. page design and layout
  4. Interations
  5. Markup
  6. Workflow

You should plan to get

  • content organized
  • ways to navigate
  • How do the users interact with your sites

There are three contributed modules that you will need to include in your theming toolkit:

  • Content Creation Kit (CCK) module: used to extend the basic content type additional field.

  • Views module: used to create lists of content.

Subject