All posts by admin

– Posting –

  • 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 Miami Dolphins Jerseys makes it happen.
    • And we’ll look at ways a theme influences the presentation of KONKURS your posts.
    • If you have yet to install Version 4.1 from WordPress.org onto your server, experts will be standing Gyro by to answer your questions.
  • Mar: Creating and Using Pages & Templates
    • PAGES are organized hierarchically and are constructed to present Contents the relatively timeless information of your website.
    • How to From create pages and add links to cheap MLB jerseys them in the menu.
    • Templates are the files which take information from Time! the database and wholesale NBA jerseys in combination arrange the HTML pages to be displayed in the browser.

– UX for WP –

Presenting Posting a of number of strategies for creating a meaningful site-visitor experience
beyond just usability.

This is brief – you don’t need to Fotos know wholesale nfl jerseys everything (satisfice = Wholesale Seattle Seahawks Jerseys satisfy + suffice):

  1. Don’t Make Me Think
  2. Muddling through the Web
  3. Billboard Design 101
  4. mindless choices
  5. needless words
  6. Navigation
  7. Home page
  8. Arguments
  9. Usability testing

define, build, measure

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

Target Audience

  • Demographic
    • age
    • ethnicity
    • gender
    • income
    • location
    • marital status
  • Psychographic
    • attitudes
    • behaviors
    • hobbies
    • interests
    • lifestyle
    • values

BOUNCE RATE

  • abandon a very slow website
  • website froze or crashed
  • purchase could not complete of on for first attempt
  • tried cheap jerseys to access a website Pics that was down temporarily
  • purchase, apparently completed, actually didn’t go cheap nba jerseys through

 

– Welcome –

socialnetworks

Welcome to WordPress-Saratoga

  • Attendance: / Sign-in Sheet / password
  • Survey 1: Macintosh, Windows, Unix?
  • Survey 2: Freelance, Startup Team Member, Corporate Employee?
  • Survey 3: Beginner, Intermediate, Advanced User?
  • Fundamentals
    • Blogging
      • Write & post, categorize & tag; fresh content, from time to time.
      • Content consists of text, photos, and/or audio/visual media.
      • Accept comments from visitors.
    • WordPress.com
      • Free Hosted Service, Themes, and Widgets (limited)
      • Optimal Resource Utilization, Load Balancing
      • Automatic Version Updating
    • WordPress.org
      • 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?
  • Other Groups 

 <- Twitter Site

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


Pulse Check

#3 Map Links – Alternatives to Google

CloudMade

developers.cloudmade.com/projects

MapQuest

developer.mapquest.com/

Microsoft Bing Maps API

www.microsoft.com/maps/developers/

Mobile Maps

labs.ericsson.com/apis/mobile-maps/

OpenLayers

openlayers.org/

OpenStreetMap Android

wiki.openstreetmap.org/wiki/Android

OpenStreetMap API

wiki.openstreetmap.org/wiki/API_v0.6

Osmdroid

wiki.openstreetmap.org/wiki/Osmdroid

Route-Me

code.google.com/p/route-me/

TinyGeoCoder

tinygeocoder.com/blog/about/

Trimaps

trimaps.com/en/

Yahoo Maps API

developer.yahoo.com/maps/

 

00) Contents

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 

08) Theme Files for Home Pages 

09) CSS Selectors 

10) Post Styles 

11) Child Themes 

12) Options

13) Responsive Results 

14) More Information 

Themes (continued)

01 – INTRO TO HTML5

New Elements for better structure:
other new elements:
Unusual Elements/Tags:

2014
Style.css 2014

inline-block-2015
inline-block-2015

inline-block-2016
inline-block-2016

display-block-2015
display-block-2015

display-block-2016
display-block-2016

Input Element Type Attribute Values:
New Attributes to existing elements:
Deprecated Tags:
Deprecated Attributes:
HTML5 Differences from HTML4: w3.org/TR/html5-diff

01) Beyond the Default: Explorations and Experiments in BuddyPress – Tammie Lister

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

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.

01) Don’t Make Me Think

Web Design (and internet marketing success) is tied to this idea:

Humans Love Convenience

thinking

notthinking

Interface Techniques

  1. Elements on demand
  2. Specialized controls
  3. Shadows around modal windows
  4. Empty states that tell you what to do
  5. Pressed button states
  6. Sign-up page links from the log-in page
  7. Context-sensitive navigation
  8. More emphasis on key functions
  9. Embedded video

smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques

goodusability.co.uk/2009/01/12/easy-as-123

 

01) Installed Files

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.

411files

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.

01) Javascript Examples

  1. CONTENTS
  2. Document Object Model
  3. Change Style
  4. Function Parameters
  5. Get Elements
  6. Input ID
  7. Date & Hour
  8. Mouseover
  9. Change Image
  10. Event Listener
  11. Array Loops
  12. Escape the Void!
  13. jQuery Menu Button
  14. For More JS Information

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

01) Power of Javascript in WordPress Code

Learn how to link a Javascript file to the generated page at the right time according to its dependencies. There are two ways recommended for doing this, and we’ll examine them both plus explore the usefulness of Javascript in general.

JavaScript in Posts – Not all JavaScript may work; there could possibly be conflicts of one sort or another, such as with the automatic text formatting in the editor. There is a Text Control Plugin which allows you to control the automatic formatting features. If you choose No Formatting you will have to add paragraph tags and other HTML tags in order to format your page.

JavaScript in Template Files – The safe and recommended method of adding JavaScript to a WordPress generated page and WordPress Theme or Plugin is by using wp_enqueue_script(). This function includes the script if it hasn’t already been included, and safely handles dependencies.

01) Start Here

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:

  1. The Purpose of your communication.
  2. The Content of your blog.
  3. Its Appearance in terms of arrangement & layout.
  4. Navigation: where you want the reader to go to next and from where.
  5. 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.
T - Technology: Action, Attribute, Boolean, Class, CSS, Division, Element, Fieldset, Filter, Hook, HTML, Input, Function, Hypertext, Javascript, Loop, Method, MySQL, Parameter, Permalink, Permission, PHP, Selector, Slug, Tag, etc.

Codex Glossary

02 – HISTORY

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

02) The Document Object Model

HTML is for Content

CSS is for Presentation

JavaScript is for Interactivity


JavaScript is able to create dynamic HTML:

  • JavaScript can change all the HTML elements in the page
  • JavaScript can change all the HTML attributes in the page
  • JavaScript can change all the CSS styles in the page
  • JavaScript can react to all the events in the page

JavaScript can be executed whenever an event occurs.

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

JavaScript is able to manipulate HTML elements.

Here are the ways Javascript is able to find the HTML elements:

  • by id
  • by tag name
  • by class name

02) Theme 2011

window
Theme 2011

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.

window1
Theme 2011 edit

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.

window2
Theme 2011 (medium)

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.

window3
Theme 2011 (small)

 

02) WordPress and the Ten Year Itch – Siobhan McKeown

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.

wordpress.tv

Siobhan McKeown

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.

03 – SEMANTIC WEB

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)

03) Confident Commits, Delightful Deploys – Mark Jaquith

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.

Mistakes happen.

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.

wordpress.tv

Mark Jaquith

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!”

03) Theme 2012

Activating the next theme, twentytwelve, shows some javascript in action. The menu bar of pages is replaced by a button that will show the available pages when you click it. Compare this feature to that of twentyeleven which would wrap the string of page links to the next line if it didn’t fit the narrow width.

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.

window1
Theme 2012 (narrow)

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.

window2
Theme 2012 (medium)

Full width is 1000px, beyond which the margins expand to fill the window.

window3
Theme 2012 (wide)

 

04) Add New Post

1-2010
Add New Post in theme TwentyTen

Show on screen

  • Author
  • Categories
  • Comments
  • Discussion
  • Excerpt
  • Featured Image
  • Format
  • Likes and Shares
  • Revisions
  • Send Trackbacks
  • Slug
  • Tags
  • Writing Helper

Screen Layout

  • Number of Columns: 1 or 2
  • Enable full-height editor and distraction-free functionality.
2-2013
Add New Post in theme TwentyThirteen

04) mindless choices

It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice. -Steve Krug’s Second Law of Usability

wide site = fewer levels

navigation_tree

 

deep site = fewer options at each level

deep

04) Setting Up Your WordPress Site: Six Stories of Joy and Despair – Natalie MacLees

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

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 founded and runs the jQuery LA Users’ Group and together with Noel Saw she heads up theSouthern California WordPress User’s Group, organizing WordPress meetups, help sessions, and workshops.

She’s currently has two big events in the works: WordCamp Los Angeles 2013 and the first annual Website Weekend LA.

She makes her online home at nataliemac.com.