SlideShare a Scribd company logo
Web Design and Development:
Behind the Scenes
D. Keith Robinson & Jeff Croft, October 3 & 4, 2008




            Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Welcome to day two.
 We’re going to rock your world—again.




   Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
D. Keith Robinson




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
D. Keith Robinson
• Principle & Creative Director for Blue Flavor
• Based in Seattle, Washington
• Over 12 years designing for web, etc.
• Has worked internally for large companies (Boeing, Children’s Hospital
Seattle)
• Has worked as a consultant for companies large and small.
• Recent clients include New York Review of Books, thePlatform, PayPal
• Also done some time as Associate Editor of Lifehacker


              Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Jeff Cro




     Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Jeff Cro
• Designer and developer at Blue Flavor
• Calls Seattle home, but temporarily living close to family in Kansas City
• Been working on the web full-time since 1994.
• Has worked in-house at Universities and newspaper companies
• Worked at the birthplace of Django in Lawrence, KS
• Has co-authored two books: Pro CSS Techniques, and Web
Standards Creativity




               Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
One small leaf...




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Blue Flavor




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Blue Flavor
• Founded in Seattle, Washington in 2005.
• 7 employees at the moment.
• Focused on design, standards-based development and CMS dev/
deployment.
• Client list includes Boeing, Comcast, PayPal, New York Review of
Books, Mithun, Houston Chronicle and Skydeck.




              Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes
Day Two: Development and Implementation




            Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes
Day Two: Development and Implementation

• Choosing a CMS: buy it or build it?




             Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes
Day Two: Development and Implementation

• Choosing a CMS: buy it or build it?
• The power of frameworks




             Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes
Day Two: Development and Implementation

• Choosing a CMS: buy it or build it?
• The power of frameworks
• Django: The Web framework for perfectionists with deadlines.




             Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes
Day Two: Development and Implementation

• Choosing a CMS: buy it or build it?
• The power of frameworks
• Django: The Web framework for perfectionists with deadlines.
• Front-end frameworks: Blueprint and jQuery.




             Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
?
              Let ‘em fly.




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
CMS strategy.
                Buy it or build it?




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
?
How do you choose a CMS?




   Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Start with people.




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Content management is a
 people process, not a
  technology process.


  Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
But there is technology
     that can help.



 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Inventory your content types




    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
What sorts of content do you
         manage?



    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
How much structure
  do you need?



Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Structured versus
   unstructured data



Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Example: Birth listing in a newspaper




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Example: Birth listing in a newspaper
• What attributes does it have? Date. Mom’s name. Dad’s name. Baby’s
name. Hospital. Weight. Length. And so forth.
•In a structured data CMS, you’d have fields for each of these attributes.
•In a less structured CMS, you might have fields like “date”, “title”, and
“body.”




              Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Structured data advantages




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Structured data advantages
• More searchable, sortable, and linkable.
• More flexible for display in templates.




              Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Unstructured data advantages




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Unstructured data advantages
• Arguably simpler/faster data entry.
• Easier to build (this only matters if you’re building your own).




               Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Three main types of CMSes




   Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Lightweight, low-cost tools, generally
designed for blogging




       Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Lightweight, low-cost tools, generally
designed for blogging
• Examples: Wordpress, Moveable Type, ExpressionEngine (although EE
is growing its way out of this category)
• Good data structure, but only for blogging. As soon as you try to make
Wordpress a photo gallery, you’re now using a bad data structure for your
content.
• Well-tested, fast, lightweight, easy to install, supported on many hosts,
good support and communities.



               Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Niche products for a specific content
content type or industry




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Niche products for a specific content
content type or industry
• Examples: Learning Management Systems, Ellington (for newspapers)
• Generally provide very well-structured data models, as long as you’re
the target audience.
• Hit-or-miss in terms of support, community, and performance. Be sure
to shop around and do your research before choosing one.




              Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“Enterprise” CMSes




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“Enterprise” CMSes
• Who knows?
• Such a mixed bag, it’s hard to evaluate them as a group.
• Overkill for most organizations. If you can’t articulate why you need
“enterprise,” you probably don’t.




               Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
e fourth option: Build your own.




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
e fourth option: Build your own.
• Today, it’s easy. Thanks to tools like Rails, Django, Symfony, Cake, and
the like, it’s a lot more cost and time efficient to do this than before.
• You get exactly what you want. This is the holy grail. Exactly the data
models, exactly the URLs, exactly the everything that you always wanted.
• It does take work, especially when it comes to maintenance. You are
your own support (although choosing a platform like Django or Rails will
give you a good community to work within).




               Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Blue Flavor’s Goals




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Goal: Work with the resources
          we have.



    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Goal: Maintain complete control
       over our markup.



     Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Goal: Relaunch the site without
 slowing down on client work.



     Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Frameworks.
Making your life easier through reusability.




   Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
What is a framework?




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web frameworks for many languages




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web frameworks for many languages
• Server-side: Python (Django, TurboGears, Pylons), Ruby (Rails, Merb,
Camping), PHP (Cake, Symfony, CodeIgnighter), Java (Struts, Spring,
GWT), C# (.NET), etc.
• Client-side: JavaScript (jQuery, Prototype, YUI, MooTools), CSS
(Blueprint, Tripoli, YUI, Boilerplate, 960.gs)




                Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Common framework goals




     Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Common framework goals
• Handle the routine tasks for you—or at least make them really easy.
• Help keep you DRY.
• Encourage you to do things in an elegant way.
• Provide cross-browser compatibility out of the box.
• Make web development fun again!




              Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Why would you use one?




  Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Framework advantages




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Framework advantages
• Will almost always make your development process faster.
• Will help in team environments by keeping everyone on the same page
as far as coding styles and conventions.
• Very flexible and extensible. A good framework doesn’t force you to
work within it, but rather provides tools you can use or not use as your
discretion. You can always write your own pieces to use alongside the
framework.
• Well-tested by many people, and are updated all the time. Less bug-
fixing for you!
• Support and community.
                 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Are there downsides?




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Framework disadvantages




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Framework disadvantages
• You get more code than you probably need (some would say they can
be “bloated”).
• There is a learning curve.
• Some frameworks encourage you to learn the framework and not the
underlying language.




                 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
How do you choose one?




  Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Choosing a framework




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Choosing a framework
• Language first. Pick one in a language you’re comfortable with (unless
you’re specifically looking to learn a new language).
• Choose a framework that helps you learn the underlying language, not
one that makes you learn a “meta language.”
• Choose one that has good documentation and a good community.
• Look for a framework that has plenty of “hooks” for flexibility and one
that doesn’t mind you stepping outside of it.
• Choose one that “feels right” to you, especially in terms of just how
much stuff it provides “for free.”


               Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Django.
The Web framework for perfections with deadlines.




        Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“Django is a high-level Python web amework
   that encourages rapid development and
           clean, pragmatic design.”
                      http://djangoproject.com/




    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“high level Python web framework...”




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“high level Python web framework...”
• A web framework attempts to abstract routine development
tasks by providing shortcuts.
• Examples: dealing with    HTTP, connecting to a database, managing
users and groups, generating feeds, etc.
• You should always be able to “step down a level.”
• Django is built on Python, an established high-level language
used heavily at Google, Yahoo, CERN, and NASA.
• Django makes a point of not changing anything about the way
Python works. If you learn Django, you’re learning Python—and
vice-versa.
              Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“...encourages rapid development...”




       Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“...encourages rapid development...”
• Saving you time is one of Django’s primary goals.
• Django was created in the fast-paced news world, and was
designed around a real-world need to develop sites in a matter
of hours, not days or weeks.




              Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“...clean, pragmatic design.”




       Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“...clean, pragmatic design.”
• Django is opinionated software. It firmly believes there is a “right”
way to do many things.
• It tries to make it as easy as possible to do things the “right”
way. Django helps you subscribe to best practices by making
them simple.




               Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
A note about MVC




     Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
A note about MVC
• Django roughly follows the Model-View-Controller programming
paradigm. However, it does deviate from it slightly in a few ways,
where it makes sense.
• Django uses different terminology. The three main components
of Django are Models, Templates, and Views (MTV). Django’s URL
dispatcher is a smaller, fourth component.
• Don’t ask me why Django used different terminology. I don’t know. :)




              Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Brief history of Django




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Brief history of Django
• Created in 2003 at The World Company in Lawrence, KS, by Adrian
Holovaty and Simon Willison.
• Django was released as open source software in the summer of 2005.
• In 2007, there were 14 Django-powered sites among the finalists in 11
categories for the Digital Edge online journalism awards.
• Django 1.0 was released on September 2nd, 2008.
• Django is in use at major internet companies including Yahoo, Google,
and Digg/Pownce.
• Google has made Django the basis for its App Engine platform.

              Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Django projects and apps




  Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Projects in Django




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Projects in Django
• A project is a configuration for an instance of Django.
• It contains things like database settings, filesystem paths, and so forth.
It may also contain settings for applications (more on applications soon).
• It also contains a list of the applications your project will be using.
• Usually, a project is associated with a single website—each website
has a project that controls it.




               Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“Apps” in Django




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“Apps” in Django
• An “app” in Django is a collection of code that makes up some sort of
functionality for your website.
• A typical project will use several apps.
• Apps can be reused between projects: this is one of Django’s coolest
features.




               Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Let’s say you have three sites:




       Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Let’s say you have three sites:
• First, you have a personal site. It includes a blog with tags and
comments, a photo gallery, some “static” pages, and contact form.
• You also have a Digg-style social news site. It contains stories with tags
and comments, the ability for users to vote on stories, some “static”
pages, and a contact form.
• You also have a movie review site. It contains a database of movies
with tags, your reviews with tags and comments, the ability for users to
vote on movies, some “static” pages, and a contact form.




               Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
You only need nine reusable “apps”:




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
You only need nine reusable “apps”:
• Blog entries and archives
• Photo galleries
• User comments
• Tagging functionality
• News stories and archives
• Movie database
• Movie reviews and archives
• “Static” pages
• Contact form

             Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Most of these already exist:




       Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Most of these already exist:
• Django comes with a user comments app.
• Django also comes with an app for handling “static” pages.
• django-tagging allows you to add tags to any item in your database.
• django-voting allows users to vote on any item in your database.
• django-contact-form provides basic contact form functionality.
• There are several available blog and photo gallery applications.




              Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“Pluggable apps are Django’s killer app.”
                        –James Bennett




 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Django’s automatic admin




  Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
What is the Django admin?




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
What is the Django admin?
• The Django admin is a app that is distributed with Django itself.
• It provides a powerful, customizable, production-ready interface to
creating, updating, and deleting instances of your models.
• It includes data entry validation, user and group permissions, and a log
of user activity in the Admin.
• It is designed for regular users. It was built at a newspaper so that
editors and producers could enter and update content.




               Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Django’s template language is
   pure gold for designers.



    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
What are Django templates?




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
What are Django templates?
• While Django’s template language is most commonly used to generate
(X)HTML, it can actually be used to create any text-based file format (e-
mail, RSS, CSV, XML, YAML, etc.).
• Django’s template language was designed to be usable by designers
and HTML authors. It should not require a programmer to operate it.
•You have complete control over your markup. The same can not be
said about many off-the-shelf CMSes.




              Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Variables




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Variables
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;>
  <html lang=quot;enquot;>
  <head><title>People</title></head>
  <body>
    <h1>{{ person.first_name }} {{ person.last_name }}</h1>
    <p>{{ person.bio }}</p>
  </body>
</html>




           Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Filters




          Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Filters
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;>
  <html lang=quot;enquot;>
  <head><title>People</title></head>
  <body>
    <h1>People ({{ people_list|length }} total)</h1>
    <ul>
      {% for p in person_list %}
         <li>
           <a href=quot;{{ p.last_name }}/quot;>
              {{ p.first_name|capfirst }}{{ p.last_name|striptags }}
           </a>
         </li>
      {% endfor %}
    </ul>
  </body>
</html>

           Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Tags




       Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Tags
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;>
  <html lang=quot;enquot;>
  <head><title>People</title></head>
  <body>
    <h1>People ({{ people_list|length }} total)</h1>
    <ul>
      {% for p in person_list %}
         <li>
           <a href=quot;{{ p.last_name }}/quot;>
             {{ p.first_name }}{{ p.last_name }}
           </a>
         </li>
      {% endfor %}
    </ul>
  </body>
</html>

           Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Template inheritance




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Template inheritance
• Django’s template language includes an inheritance mechanism that is
both extremely powerful and sort of hard to get your head around at first.
• You might think of it as an updated (if backwards) take on “includes,”
which you may have used in the past (SSI, PHP includes, etc.)
• The core problem inheritance is trying to solve is one of repeated code.
Ideally, you Don’t Repeat Yourself (DRY), and any time you need to make
changes to template code, you only have to do it in one place.




              Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“Blocks”




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“Blocks”
• Django’s template inheritance centers around the idea of “blocks”. A
template can define “blocks”—essentially chunks another template can
override.
• A typical setup is to have a “base” template which provides a bunch of
empty blocks, and then “child” templates which fill them. In Django
parlance, child templates “extend” other templates.
• Extension doesn’t have to be only two level: you could have a “base”
template for your site, plus a template for a section of your site which
extends the base, plus a template that extends the section template. And
so on.
               Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
A base template (base.html)




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
A base template (base.html)
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;>
  <html lang=quot;enquot;>
  <head><title>{% block title %}{% endblock %}</title></
head>
  <body>
    <div id=”content”>
      {% block content %}
         <h1>Welcome to our site!</h1>
      {% endblock %}
    </div>
    <div id=”footer”>
      {% block footer %}
         <p>Copyright 2008 Jeff Croft</p>
      {% endblock %}
    </div>
  </body>
</html>
           Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
A child template (person.html)




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
A child template (person.html)
{% extends “base.html” %}

{% block title %}
  {{ person.first_name }}{{ person.last_name }}
{% endblock %}

{% block content %}
  <h1>About {{ person.first_name }}{{ person.last_name }}</h1>
{% endblock %}




           Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Django give you pretty URLs




    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
is is ugly!




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
is is ugly!
• page.php
• script.cgi?pageid=144
• StoryPage.aspx
• 0,2097,1-1-30-72-407-4752,00.html
• /stories/147/




            Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
URLs are a key part of your
     user interface.



   Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Django URLs might look like this:




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Django URLs might look like this:
• /stories/
• /stories/2008/apr/20/michelles-birthday/
• /categories/birthdays/

• Really, Django URLs can look any way you want them to—even the
ugly ways in the previous slide. But, this sort of scheme is typical. Django
uses regular expressions to map URLs. If you can write a regex for it, you
can use it for a URL.




               Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
What else is in Django?




 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Some of the things we didn’t cover:




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Some of the things we didn’t cover:
• Database ORM: Never write SQL again!
• Forms: Handles HTML form display, data processing (validation) and
redisplay.
• Caching: Flexible caching at any level, using memcached, database,
local memory, or filesystem caching.
• Internationalization: Full support for internationalization of text.
• Sessions: Full support for anonymous, cookie-based sessions.
• Testing: Full testing suite included.
• Middleware: a framework of hooks into Django’s request/response
processing.
              Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Front-end frameworks, too.
                Blueprint and jQuery.




    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Blueprint: a CSS quickstart




   Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Disclaimer: I’m biased (sort of )




       Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Disclaimer: I’m biased (sort of )
• Blueprint was originally based on a CSS framework I wrote (with the
help of my team) for internal use at the Lawrence Journal-World
• Originally, Blueprint was very similar to our internal framework, and I
loved it.
• Since then, Blueprint has made some changes, my preferences have
changed a bit, and I love it a lot less.
• But it’s still the canonical example of a CSS framework, and it still works
well for many people.




               Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Blueprint provides:




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Blueprint provides:
• Reset: resets default browser styles to give you a “blank slate.”
• Typography: A good, solid, baseline set of typographic rules that will get
you started on your way towards elegant web type.
• Forms: A set of baseline form styles.
• Grids: A set of styles that help you create grid-based layouts quickly
and easily.
• A few other things




              Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Grids: e best and worst part
of Blueprint




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Grids: e best and worst part
of Blueprint
• The grids component really does make creating grid-based layouts
remarkably easy.
• However, it uses a set of predefined class names that many consider
to be “unsemantic.” It also requires a lot of extraneous divs. These don’t
really cause real-world problems, but they do go against some well-
established best practices.
• Remember, you can use each part of Blueprint individually. If you don’t
like the grids component, you can still use the rest of it.


               Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Remember: these are baselines




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Remember: these are baselines
• You’re supposed to override many of the styles. A lot of people that
discount the idea of CSS frameworks don’t seem to understand this.
• The goal is to get you started quickly by providing some sensible
default, baseline styles that you can override throughout the development
process.




              Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Blueprint for blueflavor.com




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Blueprint for blueflavor.com
• We didn’t use the grid component
• The typography stuff came in handy for establishing a good
baseline grid.
• The reset was definitely useful




                 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Would we choose it again?




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Would we choose it again?
• Probably, but we may also investigate lighter-weight frameworks.
• We may just write our own. We’re CSS gurus anyway, so we could do
it quickly and have exactly what we want. Remember, frameworks don’t
have to be a public thing—they can be just for you or your team, too.




              Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
A brief word on JavaScript




   Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
blueflavor.com has very little of it.




       Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
blueflavor.com has very little of it.
• Because of the nature of the site, we just didn’t use JavaScript
hardly at all.
• Thus, there is no discussion of a JavaScript framework here.
• For the curious, we typically prefer jQuery when we need to do heavy
JavaScript lifting.




                 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
So How’d we do?




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008

Goal: Work with the resources
          we have.



    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008

Goal: Maintain control over
       our markup.



   Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008

Goal: Don’t let it get in the way
of the work that pays the bills.



     Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
anks!



Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
?
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development:
Behind the Scenes
D. Keith Robinson & Jeff Croft, October 3 & 4, 2008

http://www.blueflavor.com/
http://www.blueflavor.com/blog/
keith@blueflavor.com
jeff@blueflavor.com




              Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008

More Related Content

What's hot

Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
admecindia1
 
Difference between-web-designing-and-web-development
Difference between-web-designing-and-web-developmentDifference between-web-designing-and-web-development
Difference between-web-designing-and-web-development
Global Media Insight
 
Notes8
Notes8Notes8
Choosing the best front end framework for web development 2020
Choosing the best front end framework for web development 2020Choosing the best front end framework for web development 2020
Choosing the best front end framework for web development 2020
Katy Slemon
 
Responsive Design for SharePoint
Responsive Design for SharePointResponsive Design for SharePoint
Responsive Design for SharePoint
Cathy Dew
 
Learn digital marketing with mamajeed
Learn digital marketing with mamajeedLearn digital marketing with mamajeed
Learn digital marketing with mamajeed
Mohammed Abdul Majeed
 
Designing for the Office 365 Experience
Designing for the Office 365 ExperienceDesigning for the Office 365 Experience
Designing for the Office 365 Experience
Cathy Dew
 
Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5
Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5
Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5
Nathaniel Bagnell
 
The Art of Web Design, 101
The Art of Web Design, 101The Art of Web Design, 101
The Art of Web Design, 101
kellyhousholder
 
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
Cathy Dew
 
Web application development
Web application developmentWeb application development
Web application development
Jerry Willson
 
Website designing company in mumbai
Website designing company in mumbaiWebsite designing company in mumbai
Website designing company in mumbai
Css Founder
 
Affordable and very creative web designs
Affordable and very creative web designsAffordable and very creative web designs
Affordable and very creative web designs
mensusa1234
 
Developing branding solutions for 2013
Developing branding solutions for 2013Developing branding solutions for 2013
Developing branding solutions for 2013
Thomas Daly
 
Branding 101 extended
Branding 101 extendedBranding 101 extended
Branding 101 extended
D'arce Hess
 
Click here to download my CV in Word format.doc
Click here to download my CV in Word format.docClick here to download my CV in Word format.doc
Click here to download my CV in Word format.doc
butest
 
Enterprise Class WordPress
Enterprise Class WordPressEnterprise Class WordPress
Enterprise Class WordPress
Jake Goldman
 
Next Generation Web
Next Generation WebNext Generation Web
Next Generation Web
Jake Goldman
 
Website Planning 201 by Jen McKibben
Website Planning 201 by Jen McKibbenWebsite Planning 201 by Jen McKibben
Website Planning 201 by Jen McKibben
John Coonen
 
Pagebuilder Plugins – You’ve Come a Long Way Baby!
Pagebuilder Plugins – You’ve Come a Long Way Baby!Pagebuilder Plugins – You’ve Come a Long Way Baby!
Pagebuilder Plugins – You’ve Come a Long Way Baby!
Michele Mizejewski
 

What's hot (20)

Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
 
Difference between-web-designing-and-web-development
Difference between-web-designing-and-web-developmentDifference between-web-designing-and-web-development
Difference between-web-designing-and-web-development
 
Notes8
Notes8Notes8
Notes8
 
Choosing the best front end framework for web development 2020
Choosing the best front end framework for web development 2020Choosing the best front end framework for web development 2020
Choosing the best front end framework for web development 2020
 
Responsive Design for SharePoint
Responsive Design for SharePointResponsive Design for SharePoint
Responsive Design for SharePoint
 
Learn digital marketing with mamajeed
Learn digital marketing with mamajeedLearn digital marketing with mamajeed
Learn digital marketing with mamajeed
 
Designing for the Office 365 Experience
Designing for the Office 365 ExperienceDesigning for the Office 365 Experience
Designing for the Office 365 Experience
 
Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5
Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5
Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5
 
The Art of Web Design, 101
The Art of Web Design, 101The Art of Web Design, 101
The Art of Web Design, 101
 
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
 
Web application development
Web application developmentWeb application development
Web application development
 
Website designing company in mumbai
Website designing company in mumbaiWebsite designing company in mumbai
Website designing company in mumbai
 
Affordable and very creative web designs
Affordable and very creative web designsAffordable and very creative web designs
Affordable and very creative web designs
 
Developing branding solutions for 2013
Developing branding solutions for 2013Developing branding solutions for 2013
Developing branding solutions for 2013
 
Branding 101 extended
Branding 101 extendedBranding 101 extended
Branding 101 extended
 
Click here to download my CV in Word format.doc
Click here to download my CV in Word format.docClick here to download my CV in Word format.doc
Click here to download my CV in Word format.doc
 
Enterprise Class WordPress
Enterprise Class WordPressEnterprise Class WordPress
Enterprise Class WordPress
 
Next Generation Web
Next Generation WebNext Generation Web
Next Generation Web
 
Website Planning 201 by Jen McKibben
Website Planning 201 by Jen McKibbenWebsite Planning 201 by Jen McKibben
Website Planning 201 by Jen McKibben
 
Pagebuilder Plugins – You’ve Come a Long Way Baby!
Pagebuilder Plugins – You’ve Come a Long Way Baby!Pagebuilder Plugins – You’ve Come a Long Way Baby!
Pagebuilder Plugins – You’ve Come a Long Way Baby!
 

Similar to Webmaster Jam Session: Design and Development Behind the Scenes Day Two

Mindmeister Case Study En.Key
Mindmeister Case Study En.KeyMindmeister Case Study En.Key
Mindmeister Case Study En.Key
mindmeister
 
Web Design
Web DesignWeb Design
Web Design
nelsoniscool
 
Build your own website July 2017 LA
Build your own website July 2017 LABuild your own website July 2017 LA
Build your own website July 2017 LA
Thinkful
 
Ministry 2.0: User Centered Website Design | Matt Carlisle
Ministry 2.0: User Centered Website Design | Matt CarlisleMinistry 2.0: User Centered Website Design | Matt Carlisle
Ministry 2.0: User Centered Website Design | Matt Carlisle
Matt Carlisle
 
Fast and Easy Website Tune Ups
Fast and Easy Website Tune UpsFast and Easy Website Tune Ups
Fast and Easy Website Tune Ups
Jeff Wisniewski
 
Getting Started With Django
Getting Started With DjangoGetting Started With Django
Getting Started With Django
jeff_croft
 
WebFest 2011 WebMatrix Overview by Gavin Warrener
WebFest 2011 WebMatrix Overview by Gavin WarrenerWebFest 2011 WebMatrix Overview by Gavin Warrener
WebFest 2011 WebMatrix Overview by Gavin Warrener
Spiffy
 
Microsoft WebMatrix Platform Overview
Microsoft WebMatrix Platform OverviewMicrosoft WebMatrix Platform Overview
Microsoft WebMatrix Platform Overview
Spiffy
 
Build Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSBuild Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSS
Thinkful
 
Build Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSBuild Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSS
Thinkful
 
8 Ideas for Building Great Websites | Keyideas Infotech
8 Ideas for Building Great Websites | Keyideas Infotech8 Ideas for Building Great Websites | Keyideas Infotech
8 Ideas for Building Great Websites | Keyideas Infotech
Keyideas Infotech Private Limited
 
Business Website Basics | Greg Cross
Business Website Basics | Greg CrossBusiness Website Basics | Greg Cross
Business Website Basics | Greg Cross
Greg Cross
 
[GOCOP CONFAB2023] HOW TO GROW YOUR WEBSITE - THE FUNDAMENTALS by Remmy NWEK...
[GOCOP CONFAB2023] HOW TO GROW YOUR WEBSITE - THE FUNDAMENTALS  by Remmy NWEK...[GOCOP CONFAB2023] HOW TO GROW YOUR WEBSITE - THE FUNDAMENTALS  by Remmy NWEK...
[GOCOP CONFAB2023] HOW TO GROW YOUR WEBSITE - THE FUNDAMENTALS by Remmy NWEK...
Remmy Nweke, mNGE, mNUJ, mGOCOP
 
[GOCOP CONFAB2023] HOW TO GROW YOUR WEBSITE - THE FUNDAMENTALS by Remmy NWEK...
[GOCOP CONFAB2023] HOW TO GROW YOUR WEBSITE - THE FUNDAMENTALS  by Remmy NWEK...[GOCOP CONFAB2023] HOW TO GROW YOUR WEBSITE - THE FUNDAMENTALS  by Remmy NWEK...
[GOCOP CONFAB2023] HOW TO GROW YOUR WEBSITE - THE FUNDAMENTALS by Remmy NWEK...
Remmy Nweke, mNGE, mNUJ, mGOCOP
 
Requirements Gathering for Better Web Site Conversions
Requirements Gathering for Better Web Site ConversionsRequirements Gathering for Better Web Site Conversions
Requirements Gathering for Better Web Site Conversions
Kimberly Krause Berg
 
Internet marketing overview
Internet marketing overviewInternet marketing overview
Internet marketing overview
Tom Gray
 
Web Design Proposal Template PowerPoint Presentation Slides
Web Design Proposal Template PowerPoint Presentation SlidesWeb Design Proposal Template PowerPoint Presentation Slides
Web Design Proposal Template PowerPoint Presentation Slides
SlideTeam
 
Custom V CMS
Custom V CMSCustom V CMS
Custom V CMS
Diana Mounter
 
Build Your Own Website (Santa Monica, CA 06/20)
Build Your Own Website (Santa Monica, CA 06/20)Build Your Own Website (Santa Monica, CA 06/20)
Build Your Own Website (Santa Monica, CA 06/20)
Thinkful
 
Bits & Pieces: A Systems Approach to Web Design for Brands
Bits & Pieces: A Systems Approach to Web Design for BrandsBits & Pieces: A Systems Approach to Web Design for Brands
Bits & Pieces: A Systems Approach to Web Design for Brands
Indhira Rojas
 

Similar to Webmaster Jam Session: Design and Development Behind the Scenes Day Two (20)

Mindmeister Case Study En.Key
Mindmeister Case Study En.KeyMindmeister Case Study En.Key
Mindmeister Case Study En.Key
 
Web Design
Web DesignWeb Design
Web Design
 
Build your own website July 2017 LA
Build your own website July 2017 LABuild your own website July 2017 LA
Build your own website July 2017 LA
 
Ministry 2.0: User Centered Website Design | Matt Carlisle
Ministry 2.0: User Centered Website Design | Matt CarlisleMinistry 2.0: User Centered Website Design | Matt Carlisle
Ministry 2.0: User Centered Website Design | Matt Carlisle
 
Fast and Easy Website Tune Ups
Fast and Easy Website Tune UpsFast and Easy Website Tune Ups
Fast and Easy Website Tune Ups
 
Getting Started With Django
Getting Started With DjangoGetting Started With Django
Getting Started With Django
 
WebFest 2011 WebMatrix Overview by Gavin Warrener
WebFest 2011 WebMatrix Overview by Gavin WarrenerWebFest 2011 WebMatrix Overview by Gavin Warrener
WebFest 2011 WebMatrix Overview by Gavin Warrener
 
Microsoft WebMatrix Platform Overview
Microsoft WebMatrix Platform OverviewMicrosoft WebMatrix Platform Overview
Microsoft WebMatrix Platform Overview
 
Build Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSBuild Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSS
 
Build Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSBuild Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSS
 
8 Ideas for Building Great Websites | Keyideas Infotech
8 Ideas for Building Great Websites | Keyideas Infotech8 Ideas for Building Great Websites | Keyideas Infotech
8 Ideas for Building Great Websites | Keyideas Infotech
 
Business Website Basics | Greg Cross
Business Website Basics | Greg CrossBusiness Website Basics | Greg Cross
Business Website Basics | Greg Cross
 
[GOCOP CONFAB2023] HOW TO GROW YOUR WEBSITE - THE FUNDAMENTALS by Remmy NWEK...
[GOCOP CONFAB2023] HOW TO GROW YOUR WEBSITE - THE FUNDAMENTALS  by Remmy NWEK...[GOCOP CONFAB2023] HOW TO GROW YOUR WEBSITE - THE FUNDAMENTALS  by Remmy NWEK...
[GOCOP CONFAB2023] HOW TO GROW YOUR WEBSITE - THE FUNDAMENTALS by Remmy NWEK...
 
[GOCOP CONFAB2023] HOW TO GROW YOUR WEBSITE - THE FUNDAMENTALS by Remmy NWEK...
[GOCOP CONFAB2023] HOW TO GROW YOUR WEBSITE - THE FUNDAMENTALS  by Remmy NWEK...[GOCOP CONFAB2023] HOW TO GROW YOUR WEBSITE - THE FUNDAMENTALS  by Remmy NWEK...
[GOCOP CONFAB2023] HOW TO GROW YOUR WEBSITE - THE FUNDAMENTALS by Remmy NWEK...
 
Requirements Gathering for Better Web Site Conversions
Requirements Gathering for Better Web Site ConversionsRequirements Gathering for Better Web Site Conversions
Requirements Gathering for Better Web Site Conversions
 
Internet marketing overview
Internet marketing overviewInternet marketing overview
Internet marketing overview
 
Web Design Proposal Template PowerPoint Presentation Slides
Web Design Proposal Template PowerPoint Presentation SlidesWeb Design Proposal Template PowerPoint Presentation Slides
Web Design Proposal Template PowerPoint Presentation Slides
 
Custom V CMS
Custom V CMSCustom V CMS
Custom V CMS
 
Build Your Own Website (Santa Monica, CA 06/20)
Build Your Own Website (Santa Monica, CA 06/20)Build Your Own Website (Santa Monica, CA 06/20)
Build Your Own Website (Santa Monica, CA 06/20)
 
Bits & Pieces: A Systems Approach to Web Design for Brands
Bits & Pieces: A Systems Approach to Web Design for BrandsBits & Pieces: A Systems Approach to Web Design for Brands
Bits & Pieces: A Systems Approach to Web Design for Brands
 

Recently uploaded

Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
alexjohnson7307
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Jeffrey Haguewood
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
HarisZaheer8
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
fredae14
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 

Recently uploaded (20)

Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 

Webmaster Jam Session: Design and Development Behind the Scenes Day Two

  • 1. Web Design and Development: Behind the Scenes D. Keith Robinson & Jeff Croft, October 3 & 4, 2008 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 2. Welcome to day two. We’re going to rock your world—again. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 3. D. Keith Robinson Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 4. D. Keith Robinson • Principle & Creative Director for Blue Flavor • Based in Seattle, Washington • Over 12 years designing for web, etc. • Has worked internally for large companies (Boeing, Children’s Hospital Seattle) • Has worked as a consultant for companies large and small. • Recent clients include New York Review of Books, thePlatform, PayPal • Also done some time as Associate Editor of Lifehacker Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 5. Jeff Cro Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 6. Jeff Cro • Designer and developer at Blue Flavor • Calls Seattle home, but temporarily living close to family in Kansas City • Been working on the web full-time since 1994. • Has worked in-house at Universities and newspaper companies • Worked at the birthplace of Django in Lawrence, KS • Has co-authored two books: Pro CSS Techniques, and Web Standards Creativity Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 7. One small leaf... Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 8. Blue Flavor Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 9. Blue Flavor • Founded in Seattle, Washington in 2005. • 7 employees at the moment. • Focused on design, standards-based development and CMS dev/ deployment. • Client list includes Boeing, Comcast, PayPal, New York Review of Books, Mithun, Houston Chronicle and Skydeck. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 10. Web Design and Development: Behind the Scenes Day Two: Development and Implementation Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 11. Web Design and Development: Behind the Scenes Day Two: Development and Implementation • Choosing a CMS: buy it or build it? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 12. Web Design and Development: Behind the Scenes Day Two: Development and Implementation • Choosing a CMS: buy it or build it? • The power of frameworks Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 13. Web Design and Development: Behind the Scenes Day Two: Development and Implementation • Choosing a CMS: buy it or build it? • The power of frameworks • Django: The Web framework for perfectionists with deadlines. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 14. Web Design and Development: Behind the Scenes Day Two: Development and Implementation • Choosing a CMS: buy it or build it? • The power of frameworks • Django: The Web framework for perfectionists with deadlines. • Front-end frameworks: Blueprint and jQuery. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 15. ? Let ‘em fly. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 16. CMS strategy. Buy it or build it? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 17. ? How do you choose a CMS? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 18. Start with people. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 19. Content management is a people process, not a technology process. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 20. But there is technology that can help. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 21. Inventory your content types Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 22. What sorts of content do you manage? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 23. How much structure do you need? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 24. Structured versus unstructured data Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 25. Example: Birth listing in a newspaper Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 26. Example: Birth listing in a newspaper • What attributes does it have? Date. Mom’s name. Dad’s name. Baby’s name. Hospital. Weight. Length. And so forth. •In a structured data CMS, you’d have fields for each of these attributes. •In a less structured CMS, you might have fields like “date”, “title”, and “body.” Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 27. Structured data advantages Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 28. Structured data advantages • More searchable, sortable, and linkable. • More flexible for display in templates. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 29. Unstructured data advantages Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 30. Unstructured data advantages • Arguably simpler/faster data entry. • Easier to build (this only matters if you’re building your own). Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 31. Three main types of CMSes Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 32. Lightweight, low-cost tools, generally designed for blogging Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 33. Lightweight, low-cost tools, generally designed for blogging • Examples: Wordpress, Moveable Type, ExpressionEngine (although EE is growing its way out of this category) • Good data structure, but only for blogging. As soon as you try to make Wordpress a photo gallery, you’re now using a bad data structure for your content. • Well-tested, fast, lightweight, easy to install, supported on many hosts, good support and communities. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 34. Niche products for a specific content content type or industry Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 35. Niche products for a specific content content type or industry • Examples: Learning Management Systems, Ellington (for newspapers) • Generally provide very well-structured data models, as long as you’re the target audience. • Hit-or-miss in terms of support, community, and performance. Be sure to shop around and do your research before choosing one. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 36. “Enterprise” CMSes Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 37. “Enterprise” CMSes • Who knows? • Such a mixed bag, it’s hard to evaluate them as a group. • Overkill for most organizations. If you can’t articulate why you need “enterprise,” you probably don’t. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 38. e fourth option: Build your own. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 39. e fourth option: Build your own. • Today, it’s easy. Thanks to tools like Rails, Django, Symfony, Cake, and the like, it’s a lot more cost and time efficient to do this than before. • You get exactly what you want. This is the holy grail. Exactly the data models, exactly the URLs, exactly the everything that you always wanted. • It does take work, especially when it comes to maintenance. You are your own support (although choosing a platform like Django or Rails will give you a good community to work within). Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 40. Blue Flavor’s Goals Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 41. Goal: Work with the resources we have. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 42. Goal: Maintain complete control over our markup. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 43. Goal: Relaunch the site without slowing down on client work. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 44. Frameworks. Making your life easier through reusability. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 45. What is a framework? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 46. Web frameworks for many languages Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 47. Web frameworks for many languages • Server-side: Python (Django, TurboGears, Pylons), Ruby (Rails, Merb, Camping), PHP (Cake, Symfony, CodeIgnighter), Java (Struts, Spring, GWT), C# (.NET), etc. • Client-side: JavaScript (jQuery, Prototype, YUI, MooTools), CSS (Blueprint, Tripoli, YUI, Boilerplate, 960.gs) Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 48. Common framework goals Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 49. Common framework goals • Handle the routine tasks for you—or at least make them really easy. • Help keep you DRY. • Encourage you to do things in an elegant way. • Provide cross-browser compatibility out of the box. • Make web development fun again! Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 50. Why would you use one? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 51. Framework advantages Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 52. Framework advantages • Will almost always make your development process faster. • Will help in team environments by keeping everyone on the same page as far as coding styles and conventions. • Very flexible and extensible. A good framework doesn’t force you to work within it, but rather provides tools you can use or not use as your discretion. You can always write your own pieces to use alongside the framework. • Well-tested by many people, and are updated all the time. Less bug- fixing for you! • Support and community. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 53. Are there downsides? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 54. Framework disadvantages Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 55. Framework disadvantages • You get more code than you probably need (some would say they can be “bloated”). • There is a learning curve. • Some frameworks encourage you to learn the framework and not the underlying language. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 56. How do you choose one? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 57. Choosing a framework Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 58. Choosing a framework • Language first. Pick one in a language you’re comfortable with (unless you’re specifically looking to learn a new language). • Choose a framework that helps you learn the underlying language, not one that makes you learn a “meta language.” • Choose one that has good documentation and a good community. • Look for a framework that has plenty of “hooks” for flexibility and one that doesn’t mind you stepping outside of it. • Choose one that “feels right” to you, especially in terms of just how much stuff it provides “for free.” Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 59. Django. The Web framework for perfections with deadlines. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 60. “Django is a high-level Python web amework that encourages rapid development and clean, pragmatic design.” http://djangoproject.com/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 61. “high level Python web framework...” Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 62. “high level Python web framework...” • A web framework attempts to abstract routine development tasks by providing shortcuts. • Examples: dealing with HTTP, connecting to a database, managing users and groups, generating feeds, etc. • You should always be able to “step down a level.” • Django is built on Python, an established high-level language used heavily at Google, Yahoo, CERN, and NASA. • Django makes a point of not changing anything about the way Python works. If you learn Django, you’re learning Python—and vice-versa. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 63. “...encourages rapid development...” Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 64. “...encourages rapid development...” • Saving you time is one of Django’s primary goals. • Django was created in the fast-paced news world, and was designed around a real-world need to develop sites in a matter of hours, not days or weeks. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 65. “...clean, pragmatic design.” Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 66. “...clean, pragmatic design.” • Django is opinionated software. It firmly believes there is a “right” way to do many things. • It tries to make it as easy as possible to do things the “right” way. Django helps you subscribe to best practices by making them simple. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 67. A note about MVC Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 68. A note about MVC • Django roughly follows the Model-View-Controller programming paradigm. However, it does deviate from it slightly in a few ways, where it makes sense. • Django uses different terminology. The three main components of Django are Models, Templates, and Views (MTV). Django’s URL dispatcher is a smaller, fourth component. • Don’t ask me why Django used different terminology. I don’t know. :) Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 69. Brief history of Django Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 70. Brief history of Django • Created in 2003 at The World Company in Lawrence, KS, by Adrian Holovaty and Simon Willison. • Django was released as open source software in the summer of 2005. • In 2007, there were 14 Django-powered sites among the finalists in 11 categories for the Digital Edge online journalism awards. • Django 1.0 was released on September 2nd, 2008. • Django is in use at major internet companies including Yahoo, Google, and Digg/Pownce. • Google has made Django the basis for its App Engine platform. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 71. Django projects and apps Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 72. Projects in Django Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 73. Projects in Django • A project is a configuration for an instance of Django. • It contains things like database settings, filesystem paths, and so forth. It may also contain settings for applications (more on applications soon). • It also contains a list of the applications your project will be using. • Usually, a project is associated with a single website—each website has a project that controls it. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 74. “Apps” in Django Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 75. “Apps” in Django • An “app” in Django is a collection of code that makes up some sort of functionality for your website. • A typical project will use several apps. • Apps can be reused between projects: this is one of Django’s coolest features. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 76. Let’s say you have three sites: Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 77. Let’s say you have three sites: • First, you have a personal site. It includes a blog with tags and comments, a photo gallery, some “static” pages, and contact form. • You also have a Digg-style social news site. It contains stories with tags and comments, the ability for users to vote on stories, some “static” pages, and a contact form. • You also have a movie review site. It contains a database of movies with tags, your reviews with tags and comments, the ability for users to vote on movies, some “static” pages, and a contact form. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 78. You only need nine reusable “apps”: Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 79. You only need nine reusable “apps”: • Blog entries and archives • Photo galleries • User comments • Tagging functionality • News stories and archives • Movie database • Movie reviews and archives • “Static” pages • Contact form Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 80. Most of these already exist: Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 81. Most of these already exist: • Django comes with a user comments app. • Django also comes with an app for handling “static” pages. • django-tagging allows you to add tags to any item in your database. • django-voting allows users to vote on any item in your database. • django-contact-form provides basic contact form functionality. • There are several available blog and photo gallery applications. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 82. “Pluggable apps are Django’s killer app.” –James Bennett Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 83. Django’s automatic admin Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 84. What is the Django admin? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 85. What is the Django admin? • The Django admin is a app that is distributed with Django itself. • It provides a powerful, customizable, production-ready interface to creating, updating, and deleting instances of your models. • It includes data entry validation, user and group permissions, and a log of user activity in the Admin. • It is designed for regular users. It was built at a newspaper so that editors and producers could enter and update content. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 86. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 87. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 88. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 89. Django’s template language is pure gold for designers. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 90. What are Django templates? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 91. What are Django templates? • While Django’s template language is most commonly used to generate (X)HTML, it can actually be used to create any text-based file format (e- mail, RSS, CSV, XML, YAML, etc.). • Django’s template language was designed to be usable by designers and HTML authors. It should not require a programmer to operate it. •You have complete control over your markup. The same can not be said about many off-the-shelf CMSes. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 92. Variables Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 93. Variables <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;> <html lang=quot;enquot;> <head><title>People</title></head> <body> <h1>{{ person.first_name }} {{ person.last_name }}</h1> <p>{{ person.bio }}</p> </body> </html> Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 94. Filters Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 95. Filters <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;> <html lang=quot;enquot;> <head><title>People</title></head> <body> <h1>People ({{ people_list|length }} total)</h1> <ul> {% for p in person_list %} <li> <a href=quot;{{ p.last_name }}/quot;> {{ p.first_name|capfirst }}{{ p.last_name|striptags }} </a> </li> {% endfor %} </ul> </body> </html> Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 96. Tags Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 97. Tags <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;> <html lang=quot;enquot;> <head><title>People</title></head> <body> <h1>People ({{ people_list|length }} total)</h1> <ul> {% for p in person_list %} <li> <a href=quot;{{ p.last_name }}/quot;> {{ p.first_name }}{{ p.last_name }} </a> </li> {% endfor %} </ul> </body> </html> Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 98. Template inheritance Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 99. Template inheritance • Django’s template language includes an inheritance mechanism that is both extremely powerful and sort of hard to get your head around at first. • You might think of it as an updated (if backwards) take on “includes,” which you may have used in the past (SSI, PHP includes, etc.) • The core problem inheritance is trying to solve is one of repeated code. Ideally, you Don’t Repeat Yourself (DRY), and any time you need to make changes to template code, you only have to do it in one place. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 100. “Blocks” Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 101. “Blocks” • Django’s template inheritance centers around the idea of “blocks”. A template can define “blocks”—essentially chunks another template can override. • A typical setup is to have a “base” template which provides a bunch of empty blocks, and then “child” templates which fill them. In Django parlance, child templates “extend” other templates. • Extension doesn’t have to be only two level: you could have a “base” template for your site, plus a template for a section of your site which extends the base, plus a template that extends the section template. And so on. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 102. A base template (base.html) Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 103. A base template (base.html) <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;> <html lang=quot;enquot;> <head><title>{% block title %}{% endblock %}</title></ head> <body> <div id=”content”> {% block content %} <h1>Welcome to our site!</h1> {% endblock %} </div> <div id=”footer”> {% block footer %} <p>Copyright 2008 Jeff Croft</p> {% endblock %} </div> </body> </html> Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 104. A child template (person.html) Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 105. A child template (person.html) {% extends “base.html” %} {% block title %} {{ person.first_name }}{{ person.last_name }} {% endblock %} {% block content %} <h1>About {{ person.first_name }}{{ person.last_name }}</h1> {% endblock %} Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 106. Django give you pretty URLs Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 107. is is ugly! Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 108. is is ugly! • page.php • script.cgi?pageid=144 • StoryPage.aspx • 0,2097,1-1-30-72-407-4752,00.html • /stories/147/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 109. URLs are a key part of your user interface. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 110. Django URLs might look like this: Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 111. Django URLs might look like this: • /stories/ • /stories/2008/apr/20/michelles-birthday/ • /categories/birthdays/ • Really, Django URLs can look any way you want them to—even the ugly ways in the previous slide. But, this sort of scheme is typical. Django uses regular expressions to map URLs. If you can write a regex for it, you can use it for a URL. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 112. What else is in Django? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 113. Some of the things we didn’t cover: Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 114. Some of the things we didn’t cover: • Database ORM: Never write SQL again! • Forms: Handles HTML form display, data processing (validation) and redisplay. • Caching: Flexible caching at any level, using memcached, database, local memory, or filesystem caching. • Internationalization: Full support for internationalization of text. • Sessions: Full support for anonymous, cookie-based sessions. • Testing: Full testing suite included. • Middleware: a framework of hooks into Django’s request/response processing. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 115. Front-end frameworks, too. Blueprint and jQuery. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 116. Blueprint: a CSS quickstart Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 117. Disclaimer: I’m biased (sort of ) Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 118. Disclaimer: I’m biased (sort of ) • Blueprint was originally based on a CSS framework I wrote (with the help of my team) for internal use at the Lawrence Journal-World • Originally, Blueprint was very similar to our internal framework, and I loved it. • Since then, Blueprint has made some changes, my preferences have changed a bit, and I love it a lot less. • But it’s still the canonical example of a CSS framework, and it still works well for many people. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 119. Blueprint provides: Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 120. Blueprint provides: • Reset: resets default browser styles to give you a “blank slate.” • Typography: A good, solid, baseline set of typographic rules that will get you started on your way towards elegant web type. • Forms: A set of baseline form styles. • Grids: A set of styles that help you create grid-based layouts quickly and easily. • A few other things Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 121. Grids: e best and worst part of Blueprint Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 122. Grids: e best and worst part of Blueprint • The grids component really does make creating grid-based layouts remarkably easy. • However, it uses a set of predefined class names that many consider to be “unsemantic.” It also requires a lot of extraneous divs. These don’t really cause real-world problems, but they do go against some well- established best practices. • Remember, you can use each part of Blueprint individually. If you don’t like the grids component, you can still use the rest of it. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 123. Remember: these are baselines Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 124. Remember: these are baselines • You’re supposed to override many of the styles. A lot of people that discount the idea of CSS frameworks don’t seem to understand this. • The goal is to get you started quickly by providing some sensible default, baseline styles that you can override throughout the development process. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 125. Blueprint for blueflavor.com Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 126. Blueprint for blueflavor.com • We didn’t use the grid component • The typography stuff came in handy for establishing a good baseline grid. • The reset was definitely useful Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 127. Would we choose it again? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 128. Would we choose it again? • Probably, but we may also investigate lighter-weight frameworks. • We may just write our own. We’re CSS gurus anyway, so we could do it quickly and have exactly what we want. Remember, frameworks don’t have to be a public thing—they can be just for you or your team, too. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 129. A brief word on JavaScript Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 130. blueflavor.com has very little of it. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 131. blueflavor.com has very little of it. • Because of the nature of the site, we just didn’t use JavaScript hardly at all. • Thus, there is no discussion of a JavaScript framework here. • For the curious, we typically prefer jQuery when we need to do heavy JavaScript lifting. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 132. So How’d we do? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 133.  Goal: Work with the resources we have. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 134.  Goal: Maintain control over our markup. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 135.  Goal: Don’t let it get in the way of the work that pays the bills. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 136. anks! Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 137. ? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 138. Web Design and Development: Behind the Scenes D. Keith Robinson & Jeff Croft, October 3 & 4, 2008 http://www.blueflavor.com/ http://www.blueflavor.com/blog/ keith@blueflavor.com jeff@blueflavor.com Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008