The World of Dynamic Sites
What We’ll Cover
What is a Dynamic Site
What is a Dynamic Site

Why Build a Dynamic Site
What is a Dynamic Site

Why Build a Dynamic Site

Using a Content Management System
What is a Dynamic Site

Why Build a Dynamic Site

Using a Content Management System

Practical Uses For You
Junior at Springbrook
High School
Junior at Springbrook
High School

On SHS Web Team
Junior at Springbrook
High School

On SHS Web Team

Part of the SHS Web
Business Program
Junior at Springbrook
High School

On SHS Web Team

Part of the SHS Web
Business Program

Owner of Cotter
Interactive
Two Types of Sites
Static
Dynamic
Dynamic
Definition
Static
Pertaining to or Characterized by a Fixed or Stationary Condition
Example
Definition
Dynamic
Pertaining to or Characterized by Energy or Effective Action;
           Vigorously Active or Forceful; Energetic
Example
Static
Only way to update is by editing code
Dynamic
Provides an Interface to Work With for Easier Updates
Why Build a Dynamic Site?
Easier for the Client
Easier for the Client

Easier for You
Easier for the Client

Easier for You

More $$ For You
Easier for the Client

Easier for You

More $$ For You

Updating & Adding Content is no longer
your problem
Many Ways to Create a
    Dynamic Site
...But What is Most
      Practical?
CMS
Content Management System
CMS
Content Management System
Technical Definition
“A CMS, or Content Management System, is
an application designed to store, format,
reproduce and manage Web data. The
CMS ...
Content & Code
Content


Keep Them Separate
        &

            Code
How a Site is
Broken Down
Markup - HTML

Style - CSS

Content - Use of a CMS
<h1 style=“background: blue; color: white; margin: 20px;”>

Welcome to My Awesome Web Site!

</h1>
Markup               Style


<h1 style=“background: blue; color: white; margin: 20px;”>

Welcome to My Awesome Web Site!

...
<h1 class=“header”>

{title}

</h1>
Markup
                 CSS


<h1 class=“header”>

{title}
           CMS
</h1>
Markup
                 CSS


<h1 class=“header”>

{title}
           CMS
</h1>
Examples of a CMS
“WordPress is web software you can use to
create a beautiful website or blog. We like to
say that WordPress is both free a...
Why WordPress?
Installed and functional on your server in
less than 2 minutes
Installed and functional on your server in
less than 2 minutes

1000’s of FREE themes to use
Installed and functional on your server in
less than 2 minutes

1000’s of FREE themes to use

Using a CMS means more $$ an...
Example
Our Client
 Great Photographer
 Wants a Site Showcasing His Work
 Doesn’t Like Code
Doug
What Doug Wants
 Home Page
 About Page
 Gallery Page
 Contact Page
Step 1
Find Your Theme
If All Else Fails...
Search Google for Free WordPress Themes
Step 2
Setup WordPress
Step 3
Tweak to Your Needs
Setting Up Full Site in
1 Minute and 25 Seconds
Managing Content in
   WordPress
Finished Product
Great work! I love it. It’s
easy for me to update and
 change my collection on
       my own time.
What We Learned
Very Minimal Work Needed On Our End

You Can Charge $200 - $300

Happy Client = More Work
“Its flexibility allows you to build a website
that not only fulfills your needs and creative
vision today, but will grow an...
ExpressionEngine is a Great
  Learning Environment
“But the code is not going
  to make sense to me.”
ExpressionEngine’s
Syntax is Like English
Setting the Scene
Display 5 Blog Posts on Blog Page
Title

Blog Post

Author
You Tell ExpressionEngine What Each
  Field Should Be Referred To As
channel=“blog”
channel=“blog”


             {title}
channel=“blog”


             {title}




           {blog-post}
{exp:channel:entries channel=”blog” limit=”5”}

<h1 class=“blog-title”>

{title} - By: {author}

</h1>

{blog-post}

{/exp...
{exp:channel:entries channel=”blog” limit=”5”}

<h1 class=“blog-title”>

{title} - By: {author}

</h1>

{blog-post}

{/exp...
Markup      Style
{exp:channel:entries channel=”blog” limit=”5”}

<h1 class=“blog-title”>

{title} - By: {author}

</h1>  ...
Markup      Style
{exp:channel:entries channel=”blog” limit=”5”}

<h1 class=“blog-title”>

{title} - By: {author}

</h1>  ...
Bottom Line
You’re Setting Variables that Get Filled with what the
         User Types in the CMS Control Panel
What We Learned
Static vs. Dynamic
Static vs. Dynamic

Who Benefits From a Dynamic Site
Static vs. Dynamic

Who Benefits From a Dynamic Site

What a CMS is
Static vs. Dynamic

Who Benefits From a Dynamic Site

What a CMS is

Realistic Scenario Using WordPress
Static vs. Dynamic

Who Benefits From a Dynamic Site

What a CMS is

Realistic Scenario Using WordPress

Easy-to-Understand...
Thank You
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
The World of Dynamic Sites
Upcoming SlideShare
Loading in …5
×

The World of Dynamic Sites

484 views

Published on

Kyle goes over the difference between static and dynamic sites, how easy it is to use WordPress and ExpressionEngine, and goes over hypothetical situations.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
484
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The World of Dynamic Sites

  1. 1. The World of Dynamic Sites
  2. 2. What We’ll Cover
  3. 3. What is a Dynamic Site
  4. 4. What is a Dynamic Site Why Build a Dynamic Site
  5. 5. What is a Dynamic Site Why Build a Dynamic Site Using a Content Management System
  6. 6. What is a Dynamic Site Why Build a Dynamic Site Using a Content Management System Practical Uses For You
  7. 7. Junior at Springbrook High School
  8. 8. Junior at Springbrook High School On SHS Web Team
  9. 9. Junior at Springbrook High School On SHS Web Team Part of the SHS Web Business Program
  10. 10. Junior at Springbrook High School On SHS Web Team Part of the SHS Web Business Program Owner of Cotter Interactive
  11. 11. Two Types of Sites
  12. 12. Static
  13. 13. Dynamic
  14. 14. Dynamic
  15. 15. Definition
  16. 16. Static Pertaining to or Characterized by a Fixed or Stationary Condition
  17. 17. Example
  18. 18. Definition
  19. 19. Dynamic Pertaining to or Characterized by Energy or Effective Action; Vigorously Active or Forceful; Energetic
  20. 20. Example
  21. 21. Static Only way to update is by editing code
  22. 22. Dynamic Provides an Interface to Work With for Easier Updates
  23. 23. Why Build a Dynamic Site?
  24. 24. Easier for the Client
  25. 25. Easier for the Client Easier for You
  26. 26. Easier for the Client Easier for You More $$ For You
  27. 27. Easier for the Client Easier for You More $$ For You Updating & Adding Content is no longer your problem
  28. 28. Many Ways to Create a Dynamic Site
  29. 29. ...But What is Most Practical?
  30. 30. CMS Content Management System
  31. 31. CMS Content Management System
  32. 32. Technical Definition
  33. 33. “A CMS, or Content Management System, is an application designed to store, format, reproduce and manage Web data. The CMS usually uses a database to store the content and a server-side scripting language to recall and present the data.” -- Sitepoint.com
  34. 34. Content & Code
  35. 35. Content Keep Them Separate & Code
  36. 36. How a Site is Broken Down
  37. 37. Markup - HTML Style - CSS Content - Use of a CMS
  38. 38. <h1 style=“background: blue; color: white; margin: 20px;”> Welcome to My Awesome Web Site! </h1>
  39. 39. Markup Style <h1 style=“background: blue; color: white; margin: 20px;”> Welcome to My Awesome Web Site! </h1> Content
  40. 40. <h1 class=“header”> {title} </h1>
  41. 41. Markup CSS <h1 class=“header”> {title} CMS </h1>
  42. 42. Markup CSS <h1 class=“header”> {title} CMS </h1>
  43. 43. Examples of a CMS
  44. 44. “WordPress is web software you can use to create a beautiful website or blog. We like to say that WordPress is both free and priceless at the same time.” -- WordPress.org
  45. 45. Why WordPress?
  46. 46. Installed and functional on your server in less than 2 minutes
  47. 47. Installed and functional on your server in less than 2 minutes 1000’s of FREE themes to use
  48. 48. Installed and functional on your server in less than 2 minutes 1000’s of FREE themes to use Using a CMS means more $$ and less of your time
  49. 49. Example
  50. 50. Our Client Great Photographer Wants a Site Showcasing His Work Doesn’t Like Code
  51. 51. Doug
  52. 52. What Doug Wants Home Page About Page Gallery Page Contact Page
  53. 53. Step 1 Find Your Theme
  54. 54. If All Else Fails... Search Google for Free WordPress Themes
  55. 55. Step 2 Setup WordPress
  56. 56. Step 3 Tweak to Your Needs
  57. 57. Setting Up Full Site in 1 Minute and 25 Seconds
  58. 58. Managing Content in WordPress
  59. 59. Finished Product
  60. 60. Great work! I love it. It’s easy for me to update and change my collection on my own time.
  61. 61. What We Learned
  62. 62. Very Minimal Work Needed On Our End You Can Charge $200 - $300 Happy Client = More Work
  63. 63. “Its flexibility allows you to build a website that not only fulfills your needs and creative vision today, but will grow and scale as your business needs change in the future.” -- ExpressionEngine.com
  64. 64. ExpressionEngine is a Great Learning Environment
  65. 65. “But the code is not going to make sense to me.”
  66. 66. ExpressionEngine’s Syntax is Like English
  67. 67. Setting the Scene Display 5 Blog Posts on Blog Page
  68. 68. Title Blog Post Author
  69. 69. You Tell ExpressionEngine What Each Field Should Be Referred To As
  70. 70. channel=“blog”
  71. 71. channel=“blog” {title}
  72. 72. channel=“blog” {title} {blog-post}
  73. 73. {exp:channel:entries channel=”blog” limit=”5”} <h1 class=“blog-title”> {title} - By: {author} </h1> {blog-post} {/exp:channel:entries}
  74. 74. {exp:channel:entries channel=”blog” limit=”5”} <h1 class=“blog-title”> {title} - By: {author} </h1> {blog-post} {/exp:channel:entries}
  75. 75. Markup Style {exp:channel:entries channel=”blog” limit=”5”} <h1 class=“blog-title”> {title} - By: {author} </h1> CMS {blog-post} {/exp:channel:entries}
  76. 76. Markup Style {exp:channel:entries channel=”blog” limit=”5”} <h1 class=“blog-title”> {title} - By: {author} </h1> CMS {blog-post} {/exp:channel:entries}
  77. 77. Bottom Line You’re Setting Variables that Get Filled with what the User Types in the CMS Control Panel
  78. 78. What We Learned
  79. 79. Static vs. Dynamic
  80. 80. Static vs. Dynamic Who Benefits From a Dynamic Site
  81. 81. Static vs. Dynamic Who Benefits From a Dynamic Site What a CMS is
  82. 82. Static vs. Dynamic Who Benefits From a Dynamic Site What a CMS is Realistic Scenario Using WordPress
  83. 83. Static vs. Dynamic Who Benefits From a Dynamic Site What a CMS is Realistic Scenario Using WordPress Easy-to-Understand Code Using ExpressionEngine
  84. 84. Thank You

×