Welcome to WordPress-Saratoga
- Attendance: / Sign-in Sheet / password
- Survey 1: Macintosh, Windows, Linux?
- Survey 2: Freelance, Startup Team Member, Corporate Employee?
- Survey 3: Beginner, Intermediate, Advanced User?
- Write & post, categorize & tag; fresh content, from time to time.
- Content consists of text, photos, and/or audio/visual media.
- Accept comments from visitors.
- Free Hosted Service, Themes, and Widgets (limited)
- Optimized Resource Utilization, Load Balancing
- Automatic Version Updating
- Host a CMS* website on server of own choosing.
- Unlimited Customization, Access to Code
- Maintenance is your own Responsibility!
- This Month’s Question?
- Introduce Yourself
- Name, Title, and Background
- Tell us about your experience with WordPress so far.
- Where do you plan to go with WordPress?
- Next Month’s Topic?
* Content Management System (CMS) is a computer program that allows publishing, editing and modifying content on a website as well as maintenance from a central interface. Such systems provide procedures to manage workflow in a collaborative environment.
Akismet, Appearance, Categories, Customize, Dashboard, Discussion, Documentation, Editor, Export, Feedback, General, Header, Home, Import, Library, Links, Media, Menus, Network Setup, Pages, Permalinks, Plugins, Posts, Profile, Reading, Settings, Style Sheet, Support Forums, Tags, Themes, Tools, Tools, Updates, Users, Widgets, WordPress.org, Writing
Microsoft Bing Maps API
Yahoo Maps API
Presenting a number of strategies for creating a meaningful site-visitor experience
beyond just usability.
- information architecture
- visual design
- user research and testing
This is brief – you don’t need to know everything (satisfice = satisfy + suffice):
- Don’t Make Me Think
- Muddling through the Web
- Billboard Design 101
- mindless choices
- needless words
- Home page
- Usability testing
iterate, iterate, iterate, etc., etc…
The first UX skill anyone learns is to shift their thinking from the requirements of the system and business to the experience of the user. ~Jared M. Spool
- marital status
- abandon a very slow website
- website froze or crashed
- purchase could not complete on first attempt
- tried to access a website that was down temporarily
- purchase, apparently completed, actually didn’t go through
This is a comparison of four default WordPress themes, twentyeleven, twentytwelve, twentythirteen, twentyfourteen – how they are different, and how they are surprisingly alike; followed by some talk about child themes.
CONTENTS (scroll down in the Themes category, or skip to the post)
01) Installed Files
02) Theme 2011
03) Theme 2012
04) Theme 2013
05) Theme 2014
06) Responsive Media
07) Four Home Pages
09) CSS Selectors
10) Post Styles
11) Child Themes
14) More Information
Note: All of the posts below this one refer to WordPress Version 3.7.1. The similarities are still strong, however; almost identical.
New Elements for better structure:
other new elements:
- ruby, rt, and rp
Input Element Type Attribute Values:
New Attributes to existing elements:
- abbr td and t
- align caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr.
- alink body
- archive object
- axis td and t
- background body
- bgcolor table, tr, td, th and body.
- border table and object.
- cellpadding table
- cellspacing table
- char col, colgroup, tbody, td, tfoot, th, thead and tr.
- charoff col, colgroup, tbody, td, tfoot, th, thead and tr.
- charset link and a
- classid object
- clear br
- codebase object
- codetype object
- compact dl, menu, ol and ul.
- compact dl, menu, ol and ul.
- coords a
- declare object
- frame table
- frame table
- frameborder iframe
- hspace img and object.
- link body
- longdesc img and iframe.
- marginheight iframe
- marginwidth iframe
- name img
- nohref area
- noshade hr
- nowrap td and th
- profile head
- rev link, a
- rules table
- scheme meta
- scope td
- scrolling iframe
- shape a
- size hr
- standby object
- target link
- text body
- type li, ol and ul.
- type param
- valign col, colgroup, tbody, td, tfoot, th, thead and tr
- valuetype param
- version html
- vlink body
- vspace img and object.
- width hr, table, td, th, col, colgroup and pre.
HTML5 Differences from HTML4: w3.org/TR/html5-diff
For years BuddyPress was tied to a specific theme and creating a custom theme had a steep learning curve.
Many just used the default theme not pushing the boundaries of what could be done.
BuddyPress now has theme independence and with this comes the chance to push ahead BuddyPress design.
Lets ban the bland and start thinking about how we can innovate not just about how we create a theme.
I’ll encourage in this talk to look beyond the default, to new UI’s, new possibilities, to design for the community not to the default.
I’ll also give some consideration to what the ‘new default’ should be that BuddyPress offers up when you load it.
Tammie Lister is a designer who specialises in creating communities using BuddyPress.
She’s passionate about community design and mixing in psychology with design and development to create these communities.
Over the years she’s been lucky enough to create varied projects with great clients under her own company at logicalbinary.com.
She is a contributor to BuddyPress and has written a soon to be published book on BuddyPress theme development.
Keen to explore new design possibilities, she has a sketchbook site exploring BuddyPress UI’s at buddydesignlabs.com.
- Document Object Model
- Change Style
- Function Parameters
- Get Elements
- Input ID
- Date & Hour
- Change Image
- Event Listener
- Array Loops
- Paint the Canvas
- Escape the Void!
- The Clock (to next page)
This presentation covers the following areas:
- Methods: getElementById, getElementsByTagName, getDate, getTime
- Image Property: src
- Style Property: color
- DOM Property: innerHTML
- Objects: Array(), Date()
- Events: onmouseover, onmouseout
- Popup Box: alert, prompt
Web Design (and internet marketing success) is tied to this idea:
Humans Love Convenience
- Elements on demand
- Specialized controls
- Shadows around modal windows
- Empty states that tell you what to do
- Pressed button states
- Sign-up page links from the log-in page
- Context-sensitive navigation
- More emphasis on key functions
- Embedded video
Latest installation of WordPress (Version 4.1.1) has a file structure not much different from previous versions. This is what you will see after unpacking the zip file.
Three themes are included, with twentyfifteen being activated as default. I later added another theme, twentyfifteen-child, for experimentation, and then twentyeleven and twentytwelve for comparison purposes.
Two plugins are included. Akismet does an excellent job of diverting spam, and hello.php is a simple demo plugin.
Several blank index.php files are used to prevent some servers from displaying the directory contents.
Plugins extend and add functionality & features.
- Download from WordPress.org Plugins Repository
- Upgrade Version
- Troubleshoot Problem
- Develop New/Own
Default Plugins included with fresh installation:
- Jan: New To WordPress?: Here’s How to Get Started
- Feb: Creating and Using Posts, Categories & Tags
- POSTS are timely and can be categorized & assigned tags
- Let’s talk about not just how to post, but also how the PHP makes it happen.
- And we’ll look at ways a theme influences the presentation of your posts.
- If you have yet to install Version 4.1 from WordPress.org onto your server, experts will be standing by to answer your questions.
- Mar: Creating and Using Pages & Templates
- PAGES are organized hierarchically and are constructed to present the relatively timeless information of your website.
- How to create pages and add links to them in the menu.
- Templates are the files which take information from the database and in combination arrange the HTML pages to be displayed in the browser.
- Apr: Using Themes
- May: Using Plugins
- Jun: Creating Child Themes
- Jul: Permalinks & Other Settings
- Sep: The MySQL Database: Overview & Details
- Oct: Blog Design and Layout
- Nov: Writing Plugins: All about the API and Resources
- Dec: Profit from Documentation & Development
Blog Design is the art & science of delivering a message and perhaps exchanging ideas with others via the internet.
The online world allows the narrowest interests to be shared with the broadest base of the world’s web users. And vice versa: there could be a few who have your wide range of interests, but their physical location is many timezones away.
In essence, a good blog design enhances communication, whereas a bad blog design could negate it completely.
Although there is value in good communication itself alone, if your purpose is to showcase a product or service that you wish to sell, then the better your blog captures the interests of potential customers, the more opportunity you will have to pursuade them of the value of making a purchase. This demands that you attract attention first, and that is where the visual (and perhaps audio) elements of your blog come into play.
If you choose the right colors (to set the mood) and the proper fonts (to let the meaning of your words flow through better) then landing on your blog becomes an increasingly comfortable experience for the reader. The next thing you know, updating your blog frequently with fresh posts becomes incentivised, i.e., all of your hard work begins to pay off.
Look at blog design from five different angles:
- The Purpose of your communication.
- The Content of your blog.
- Its Appearance in terms of arrangement & layout.
- Navigation: where you want the reader to go to next and from where.
- Aspects of Technology: what is done by the code to produce the web page and facilitate dynamic interaction.
You can use the acronym PCANT for Purpose, Content, Appearence, Navigation, and Technology.
These areas of concern intersect in varying degrees. For example, the appearence of the content should reflect the blog’s purpose, and navigation is most dependent on the technology of hypertext.
P - Purpose: For example, to promote your product or service; to spread the word about a just cause in order to attract advocates and/or contributors; to showcase your hobby; or simply to exercise your creative webdesign talents.
C - Content: Advertising, Blurbs, Charts, Comments, Diagrams, Drawings, Graphics, Icons, Images, Labels, Maps, Photos, Phrases, Pictures, Quotes, Sketches, Text, Titles, Words, etc.
A - Appearance: Alignment, Balance, Clutter, Color, Columns, Fonts, Footer, Header, Layout, Padding, Sidebar, Spacing, Weight, Whitespace, etc.
N - Navigation: From a menu, finding the link that takes you there; or use the search feature.
- HTML Version 2
- HTML3 (1995)
- HTML 3.2 (1997)
- HTML4 (1998)
- HTML 4.01 (1999) -> XHTML
- HTML5 (2014)
In 2004, at a two day workshop in San Jose, California on Web Applications and Compound Documents, the World Wide Web Consortium staff advocated replacing that stack with non-backward-compatible XHTML2 + XForms + SVG + MathML + RDFa.
However, a poll taken at the end of the workshop showed that browser makers unanimously favored an incremental approach based on evolving HTML4/ XHTML1 + CSS + DOM.
In 2005, the W3C began work on HTML5 to advance regular HTML, and in 2009 it acknowledged that HTML5 would be the only next-generation version of HTML, although it would include both XML and non-XML serializations.
- Fixes to HTML4
- Richer Semantic Markup
- New Forms Capabilities
- Native Multimedia
- Programmable Vector Graphics
- Powerful APIs
All browsers need two modes: quirks mode for the old rules, strict mode for the standard.
HTML is for Content
CSS is for Presentation
Examples of HTML events:
- When a user clicks the mouse
- When a web page has loaded
- When an image has been loaded
- When the mouse moves over an element
- When an input field is changed
- When an HTML form is submitted
- When a user strokes a key
- by id
- by tag name
- by class name
Design pages for scanning, not reading.
We’re in a hurry and don’t need to read everything.
Focus on words that match trigger words.
Take the first reasonable plan that comes to mind, do a quick mental test for problems, and then take action.
Title and subtitle in upper right.
There are links to all the pages in the menu bar. Home page defaults to the stack of the posts, most recent at top. Here, in our virgin installation, there is only the one.
Notice that there are two search boxes.
The number of comments shows in an iconic balloon, and in the string “Posted in Uncategorized | 1 Reply” below the post.
Navigation side-panel is to the right.
The string “Proudly powered by WordPress” is centered in the footer.
All of the text font is sans serif.
The header image rotates through a group of eight JPGs located at the end of this path: twentyeleven > images > headers
Log-in as Administrator, and you will see a bar with icon and text hot-links appear at the top. There is also an edit button to the lower right of each post.
The header image will shrink gradually as you narrow the page. At a certain width, the layout changes. Navigation goes from the side to below the posts.
Shrink the page width more and the admin bar shows only icons. Shrink more and the W icon disappears and next the font size decreases.
It’s been ten years since the first release of WordPress, and even longer since its predecessor, b2, caught the eye of a small group of bloggers.
Thousands of lines of code have been written, hundreds of hours have been spent in online discussions, and many, many itches have been scratched.
This presentation is the story of the itch.
It will travel back through time to trace the itch, from the very first scratcher, to the people who caught the itch, until it became contagious and hundreds of people were scratching furiously and somehow they solved a problem for millions of people all over the world.
Siobhan McKeown is a Word Ninja at Audrey Capital where she writes about WordPress, deals with documentation, and has nightmares about the Codex.
She’s currently working on an open source book about the history of WordPress.
She spends her days delving into the brains of its early developers and community members.
When she’s not worrying about the finer details of forking and the GPL, she’s helping out with the project’s future by wrangling WordPress’ documentation.
In her spare time, she writes and edits for Smashing Magazine, eats, reads, and creates huge amounts of mess and chaos.
Semantic Web: an evolutionary stage of the World Wide Web in which automated software can store, exchange, and use machine-readable information distributed throughout the Web, in turn enabling users to deal with the information with greater efficiency and certainty.
Convert unstructured web documents into a common framework that allows data to be shared and reused across application, enterprise, and community boundaries.
Object-oriented design; object (sky), attribute (color) and value (blue)
You’re a WordPress professional.
It’s time that your WordPress coding and deployment practices moved beyond manual backups and editing files on the server.
You need a workflow that is ordered towards minimizing and recovering from mistakes, rather than one that embarasses you and makes changes stressful.
This talk will examine the pitfalls of “winging it” when it comes to changing and deploying code, and will showcase multiple paths to the promised land of confident commits and delightful deploys.
Mark Jaquith has been working with and contributing to WordPress since 2004.
He is one of the lead developers of the WordPress core and offers freelance WordPress consulting services through Covered Web Services with a focus on scaling, security, and custom functionality.
Mark likes patches that have more red than green, and his favorite WordPress features are the ones that you’re not even aware of.
He eagerly looks forward to shooting down your feature suggestions with, “No, but it would make a great plugin!”
A header image is not part of the default layout, but can be added easily.
Did you notice that the title and subtitle are aligned center? (Although the footer , not visible here, is always aligned left.)
Also, the text string below the post is different, with the Edit link appended to it.
Widen the page and the W link reappears in the admin bar, the page menu bar expands out of its button, and the navigation goes to the side. Notice the footer beginning to show.
Full width is 1000px, beyond which the margins expand to fill the window.
Accessibility – Alt text provides a text description of an image
Starting with an empty style.css, there is no formatting.
Show on screen
- Featured Image
- Likes and Shares
- Send Trackbacks
- Writing Helper
- Number of Columns: 1 or 2
- Enable full-height editor and distraction-free functionality.
Directory of the plugin may contain a variety of file types.
- .php (one required)
- .gif, .jpg, .png
So often, we think the first steps in setting up a new WordPress site are to install WordPress, choose a theme, and start writing.
But the secret first step to a successful site is planning.
When you’ve mapped out the crucial 5 W’s and 1 H, you can focus on what’s important, avoid procrastination, and dodge mistakes that can be hard to recover from later on.
Learn how to get it right the first time by witnessing six examples of total wins and epic fails.
Natalie MacLees is a front-end web developer and UI designer and is founder + principal of the interactive agency, Purple Pen Productions.
In 2012 she published jQuery for Designers with Packt Publishing.
She makes her online home at nataliemac.com.
Theme twentythirteen uses a display area up to 1600px before it adds margins to the page.
The header displays in the default layout. Three images are included: circle, star, and diamond. (Curiously, each of these PNGs is 3200 pixels wide, but does not take much file space.)
The menu bar shows the pages, but not the home page which is accessed by clicking on the title.
Search is an icon aligned right on the menu bar, and the second search is in navigation which is always below the posts, above the footer.
Post title text is a serified font.
Narrow the window, and navigation goes from 4 columns to 3.
Two columns for navigation.
One column for navigation, and the list of pages in the menu bar can be seen by clicking the drop-down button.