recipe-examples: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
Line 73: Line 73:
** preparation steps
** preparation steps
** left-over preservation instructions
** left-over preservation instructions
==== Perfect Flank Steak ====
[http://www.dvorak.org/blog/?p=6283 John C. "CSS is a series of tubes" Dvorak]
* Composed of
** title of recipe
** description
** ingredients
** preparation steps
** suggested accompaniments


=== Services ===
=== Services ===

Revision as of 14:08, 24 July 2006

Recipe Examples

Per the microformats process this is an examples page documenting existing real world examples of actual tasty recipes published on the Web.

Contributors

Recipe Lists

  • Steve and Aytek's recipes. Note that they are simply using XOXO for the lists. It doesn't appear that anything more is necessary for a list of recipes.
  • ...
  • ...

Recipes Examples

Individuals

Lentil Stew

Neriman’s Mercimek - Yummy Lentils

  • Appears to be a simple BBEdit 5.0 conversion of a plain text file into HTML 3.2
  • Uses <br><br> to delimit sections
  • Composed of:
    • author of recipe
    • title of recipe, with English translation
    • top level structure of time/instructions, with ingredients noted as necessary for each step
    • serving suggestion(s) (serve with ...)

Mocha Brownie Cake

Mocha Brownie Cake

  • Composed of
    • title of recipe / food item (looks like a heading)
    • sequence of larger tasks (separated by subheadings), each of which has
      • list of ingredients (uses <ul>) for a particular component of the dish
      • preparation instructions for those ingredients
      • OR a instructions for assembling components of the dish
    • contributing baker - perhaps someone who has modified the recipe?
    • source - citation of where recipe originally came from

A Moroccan-ish Casserole

Simon Wheatley

  • Structured semantic XHTML based, as well as possible, on hcard/review type principles
  • Composed of:
    • title
    • description
    • number of servings (quantity)
    • prep time
    • cooking time
    • approval rating (from hreview)
    • ingredients
    • preparation steps

May expand to include: variation suggestions

Fruit Salad

fruit salad (Mark Pilgrim)

Extremely detailed instructions.

  • Composed of (at least)
    • title of recipe
    • description
    • number of servings (quantity)
    • shopping instructions
    • ingredients
    • ingredients to avoid
    • preparation steps
    • left-over preservation instructions


Perfect Flank Steak

John C. "CSS is a series of tubes" Dvorak

  • Composed of
    • title of recipe
    • description
    • ingredients
    • preparation steps
    • suggested accompaniments

Services

allrecipes.com - Sachertorte

Sachertorte (allrecipes.com)

  • Composed of
    • title of recipe (as a heading)
    • name of the submitter
    • description of the food item (e.g: "Elegant chocolate cake.")
    • optional photo
    • servings count
    • sequence of ingredients (uses <ul>)
    • sequence of preperation instructions (uses <ol>)


BBC Food - Marzipanned fruit cake

Marzipanned fruit cake BBC Food Recipes

  • Composed of (all B&BR markup)
    • title of recipe
    • name of submitter/source
    • servings count/quanity
    • preparation time
    • cooking time
    • image
    • suitable for vegetarians icon
    • description of recipe
    • ingredients list
    • method steps
    • notes

cooking.com - Jamaican Chicken Stew Recipe

Jamaican Chicken Stew Recipe (cooking.com)

  • Consists of
    • Recipe Title (<font><b> used for header)
      • Source (Magazine, book, title, etc. with a link.)
      • Serving Size
    • Photo area
      • Recipe Email, Save, Print options
      • Photo
    • Recipe Ingredients (heading uses <b> <br>, each ingredient in separate <td>, ingredient keywords linked to a glossary)
    • Recipe Method (no <p> used, uses <td>, <font> and <br>)
      • Copyright reprint info appears at end of prep info.
    • Nutrition Facts (<font><b> used for header)
      • Serving size info repeated
      • Nutritional elements per serving (each item and value are in separate <td>)

Notes: No meaningful markup used. Recipes use <table> for all layout/presentation. <b>, <br>, and nested <font> used throughout. Line images separate sections of recipe.

cuzza.com - Chicken Jalfrezi Recipe

Chicken Jalfrezi Recipe (cuzza.com)

  • Consists of
    • Recipe Title (<h2>)
      • Subheading/summary description (<h3>)
      • Teaser text with photo (<div class="teaser"><div class="mainImg">)
    • Method steps (each step in a <div class="step"> with an image and text)
    • Number of servings (<h5>)
    • Ingredients list (in a definition list; quantities and units not marked up separately; some ingredients link to an explanatory page)
    • "Chef's notes". Explanatory notes offering advice and alternatives.

epicurious.com - Moroccan Braised Beef

Moroccan Braised Beef (epicurious.com)

  • Composed of
    • Recipe Intro Area
      • Photo (uses <p>)
      • Recipe Title (uses <h1>)
      • Quick intro description (No <p>)
    • Ingredients * (uses <br>)
    • Preparation *
      • Preparation instructions (some recipes offer Cooks' notes: - surrounded by *b* tagset, and uses <br> )
      • Serving size
      • Origin (span class = source, magazine title)
      • Copyright info (span class = copyright: publication date and location if available)
    • Your notes * (user/visitor may add/submit notes to appear on their printed copy)
    • Reviews * (fork ratings, 1-4)

Notes: Images are the secondary headings * (class = hdr) , no sub heading markup. Recipes do not use use <li> and use <br> instead of <p> often.

extratasty.com - Cuba Libre

Cuba Libre (extratasty.com)

  • Composed of
    • title of recipe
    • name of the submitter
    • sequence of ingredients
    • preperation instructions (continuous text)
    • Recipe rating (US school grad system)


recipesource.com - Cranberry Cherry Relish

CRANBERRY CHERRY RELISH (recipesource.com)

  • Consists of
    • Exported info (if from mastercook, mealmaster)
    • Title (in uppercase)
    • Recipe by: (source, author info)
    • Serving size: Preparation Time:
    • Categories:
    • Ingredients ( displayed in columns: Amount : Measure : Ingredient -- Preparation Method )
    • Cooking Instructions

Note: Recipe is in text format using <pre> inside a <td>.

Next Steps

  1. Add more examples and analysis of their markup and implied schemas
  2. Research existing recipe-formats (Mealmaster, RecipeML, ...)
  3. recipe-brainstorming on a minimal recipe schema that represents the 80/20 of common properties of the examples and reuses terms from existing widely implemented recipe formats.