EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development

Using ExpressionEngine, Structure and some other tricks to build out a site super fast.

Transcript

1. From Design to Dynamic Rapid Development with ExpressionEngine
2. Hello My Name is Jonathan Longnecker @necker47 jon@fortysevenmedia.com
3. @47m http://fortysevenmedia.com
4. Overview What We’re Covering Today
5. The Problem EE Developers Are Too Awesome
6. The Problem 15+ Add-Ons for Each Site Using the Same Template Patterns Doing it Over and Over Again
7. The Solution EE Sandbox Templating Rapid Build Out Sweet T ricks
8. The Old Way How we used to do this
9. Find all Addons & Install Go to all the 3rd party developer sites, download install latest versions, configure to liking. The Old Way
10. Templates Manually create templates for each major page, use gobal embeds where possible. The Old Way
11. Image Placement Confusing mess using the file field plugin. Images had to be manually inserted in templates. The Old Way
12. EE Sandbox Get Your Shovels and Buckets
13. EE Sandbox Addons LG Addon Updater LG .htaccess Generator LG Add Sitename LG Replace LG TinyMCE SL Developer ImgSizr Word Limit Plus Category Checkboxes Freeform Field Frame nGEN File Structure Edit Dropdown
14. Leevi Graham The man EE Sandbox Addons
15. LG Addon Updater Let your 3rd party addons check home for updates EE Sandbox Addons
16. LG .htaccess Generator Remove index.php and much, much more EE Sandbox Addons
17. LG Add SiteName Enable CP admin page title replacements EE Sandbox Addons
18. LG Tiny MCE Turn off source formatting, spans and br’s Take out image upload, add blockquote EE Sandbox Addons
19. SL Developer Info Get to all your developer information quickly by keeping it in one place EE Sandbox Addons
20. Image Sizer Resizes, crops and thumbnails your images intelligently EE Sandbox Addons
21. Freeform Make forms using custom fields, create email templates EE Sandbox Addons
22. Field Frame Rethink the way you use custom fields EE Sandbox Addons
23. nGen File Field A fieldtype for the FieldFrame framework EE Sandbox Addons
24. Structure Radically change the way you handle content pages and navigation EE Sandbox Addons
25. Structure Manage content weblog with Structure Choose “content” template EE Sandbox Addons
26. Template Preferences Turn on revisions Save templates as files EE Sandbox Addons
27. Weblog Create a “content” weblog EE Sandbox Setup
28. Custom Fields Meta Keywords Meta Description Body (Tiny MCE) Images (FF Matrix) EE Sandbox Setup
29. File EE Sweet Trick Title Width Height Align AJ Penninga - http://www.prettysquares.com
30. ImgSizr Create “sized” directory in /images with appropriate permissions EE Sandbox Other Stuff SL Developer Create custom tab Extensions Create custom tab Client Member Group Setup new “editor” group with access to file upoads, Structure, weblogs
31. Global Variables HTML Opening HTML Closing jQuery Javascript RSS Links Stylesheets EE Sandbox Global Variables
32. EE Sandbox Global Variables <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="Shortcut Icon" href="/favicon.ico"/> <meta name="author" content="FortySeven Media" /> <meta name="copyright" content="©2009 Company Name" /> html_head
33. EE Sandbox Global Variables </head> html_head_end
34. EE Sandbox Global Variables <!--Blog Feeds--> <link rel="alternate" type="application/atom+xml" title="Blog Title Here" href="#" /> rss
35. Templates Footer Header Nav Sidebar Content EE Sandbox Templates
36. EE Sandbox Templates <h4>Navigation Here</h4> <ul> {exp:structure:nav_main include_ul="no" current_class="current"} </ul> nav
37. EE Sandbox Templates <h4>Sidebar Here</h4> {exp:structure:nav_sub css_id="sec-nav" show_overview_link="yes" start_from="/{segment_1}" show_depth="2" } sidebar
38. EE Sandbox Templates {html_head} {exp:weblog:entries weblog="content" disable="member_data| pagination|trackbacks"} <meta name="keywords" content="{keywords}" /> <meta name="description" content="{short-desc}" /> {/exp:weblog:entries} <title>{exp:structure:titletrail separator="|"}</title> {rss} {stylesheets} {js} {jquery} {html_head_end} content
40. EE Sweet Trick {exp:weblog:entries weblog="content" limit="1" disable="member_data|pagination|trackbacks"} {exp:lg_replace:haystack needles="{images backspace="1"}image_{row_count}|{/images}"} {body} {images} {exp:lg_replace:replacement needle="image_{row_count}"} {exp:imgsizer:size src="{img}" width="{img-width}" height="{img- height}" alt="{img-caption}" class="{img-align}"} {/exp:lg_replace:replacement} {/images} {/exp:lg_replace:haystack} {/exp:weblog:entries} Image Replacement Method
41. Entry List what we’ve installed and any special path changes when moving servers. EE Sandbox Install Log
42. Moving Servers Moving your sandbox is faster than installing
43. Export the Database Export from your sandbox install. Moving Servers
44. Import Database Create a new blank database and import. Moving Servers
45. Move Files Move all your files to the new server. Moving Servers
46. Check Permissions Check permissions against the installation instructions Moving Servers
47. Config File Update your new database info in the config.php file. Moving Servers
48. Check Paths Change paths all through CP (there’s a lot) Moving Servers
49. Chop it Up & Build it Out Live Demo Time
50. Thank You! Slides, links and assets available at fortysevenmedia.com