recipe-examples: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
No edit summary
Line 116: Line 116:
** Number of servings  (<code>&lt;h5&gt;</code>)
** Number of servings  (<code>&lt;h5&gt;</code>)
** Ingredients list  (in a definition list; quantities and units not marked up separately; some ingredients link to an explanatory page)
** 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.  
** "Chef's notes". Explanatory notes offering advice and alternatives.
 
=== A Moroccan-ish Casserole ===
[http://www.simonwheatley.co.uk/2006/03/26/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


== Next Steps ==
== Next Steps ==

Revision as of 18:50, 30 March 2006

Recipe Examples

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

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

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>)

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)

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.

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.

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>.

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.

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

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 solves the 80/20 of examples