HTML document traversal & manipulation, event handling, animation, and Ajax are simpler by using the APIs in the jQuery library.
Designed to work across a multitude of browsers.
Document Object Model, or DOM
The DOM is a tree structure with the HTML document as the root object. The root can have several children, and those children can have several children. For example, a web page that contains a list would have a root object, with a child list object that contained several child list element objects.
The jQuery syntax is made for selecting HTML elements and performing some action on the element(s).
Basic syntax is: $(selector).action()
- $ sign to define and access jQuery
- (selector) to query or find the HTML element(s)
- action() to be performed on the HTML element(s)
- $(this).hide() – hides the current element
- $(“p”).hide() – hides all <p> elements
- $(“.test”).hide() – hides all elements with class=”test”
- $(“#test”).hide() – hides the element with id=”test”
- WordPress-Saratoga <- our Bay Area Meetup Group
- Automattic <- the company that manages WordPress.com
- Matt Mullenweg <- founder of WordPress
- WordPress.com <- easiest way to start blogging on internet
- WordPress.org <- source of WordPress GPL source code
- ZapMap.com <- WordPress.org installed on Apache at Hypersurf ISP
- ISP – Internet Service Provider
- FTP – File Transfer Protocol
- DNS – Domain Name System
- jpeg, gif, png, svg
- contact form
- social network
For the purpose of an example, look at how the four themes display their posts in different ways.
First, the order of the elements are different:
Do you think tapping into “advanced” WordPress functionality is only for developers?
Anyone can build a site that takes advantage of all that WordPress has to offer.
Learn about Templates, Custom Post Types, Custom Taxonomies, The Loop, Hooks, Actions & Filters and how power users and designers can use them to build a great site with custom functionality.
Tracy Levesque is a co-owner of YIKES, Inc., a Philadelphia web design and development shop.
She has been designing websites since 1996 and working with WordPress since 2006.
She spends her days building custom themes for WordPress and seeing how much functionality she can add without knowing PHP.
When not wrangling HTML and CSS, Tracy rides bikes, drinks coffee, eats sushi, chases her 6 year old daughter and takes pictures of abandoned buildings.
The search input type is a special kind of text input that conveys the additional semantic that the user will be entering search terms.
Numerous date and time inputs for specifying the date and time, a month, or a week.
Input types of tel, url, and email also represent special text inputs, but with different structures as well as semantics.
On an <input> element, the autofocus attribute indicates to the browser that this input should be focused upon loading the page, so the user can start typing without having to first activate that input.
The <output> element is used to perform some sort of computation or calculation based on input from the user.
The <details> element is for representing and presenting a piece of content that offers a summary label with further details provided through a progressive disclosure interface. The new <summary> element marks up the summary or label inside the <details> element.
The <meter> element can be used to display measurements such as a score, a rating, a countdown, or donations towards a goal. The new element comes with min and max attributes to set the bottom and top ends of the range, as well as a value attribute.
The <progress> element is for the special case of progress towards completion of a task; and also has max and value attributes.
- 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
iterate, iterate, iterate, etc., etc…
Shift your thinking from the requirements of the system & business to the experience of the user. ~Jared M. Spool
You’ve made the decision.
You’re taking the plunge.
It’s responsive or bust.
But what happens after the first bit of HTML and CSS is on the page?
What if plan A doesn’t work?
HTML/CSS can be fickle, so it’s important to know 2 (or even 3) ways to accomplish the task at hand.
This session will be a quick overview of the history of responsive web design, as well as uncovering a plan B, C, and maybe D for your responsive layout.
Josh is a front-end developer, user experience design lead, WordPress themer, and conference speaker.
During the day (and most nights, too), you’ll find him building responsive sites for VistaComm’s biggest clients and as the front-end developer of kidblog.org, where they’re re-imagining what an education-centric social network and blogging platform can do for teachers and students.
Theme Twentyfifteen only has the template for displaying link post formats. It is used for both single and index/archive/search. The styling in its CSS pertains to all of the formats:
Theme authors define what formats they support, and they should style those formats appropriately. Before version 3.1, categories were used in arbitrary ways to show different formats.
Some standardization by theme authors is expected. For instance, Asides should not display a title. Galleries should display a photo on the left hand side with the title shortened and to the right. Long format posts should have a double line underneath them.
If your theme takes advantage of these Post Formats, you will have any easy way to display each format with a unique style.
Geolocation API (http://www.w3.org/TR/geolocation-API). Allows a web page to ask the browser for geolocation information about where the user is.
HTML Device (http://dev.w3.org/html5/html-device). For accessing various hardware capabilities, such as built-in cameras or microphones.
Microdata (http://www.w3.org/TR/microdata). A way to annotate content in HTML with custom vocabularies.
Web Sockets API (http://www.w3.org/html5/websockets). Defines an API for two-way communication between web pages and servers.
Web SQL Database (http://www.w3.org/TR/webdatabase). Defines an API for storing data in a database in the web browser that can be queried using a variant of SQL.
Indexed Database API (http://www.w3.org/TR/IndexedDB). A non-SQL alternatives is the Indexed Database API, which defines a database of records holding simple values and hierarchical object records of key/value pairs.
Web Storage (http://www.w3.org/TR/webstorage). Simpler than a database, Web Storage defines an API for storing key/value pairs in the browser, a logical step forward from using cookies.
Web Messaging (http://dev.w3.org/html5/postmsg). Defines mechanisms for communicating between different browser windows, tabs, and iframes.
Too many people see Multisite as a silver bullet that can do everything they need, only to find out they’ve bitten off more than they can chew, and now they have a site that is too big, too complicated, and too much of a hassle.
Understanding what Multisite does out of the box, what it’s best at, and where it’s easily extendable will help you build the right site.
Mika Ariela Epstein is better known as Ipstenu, the Half-Elf Support Rogue.
Working for DreamHost, she solves any WordPress problem that comes up, and still finds time to slash unanswered WordPress.org forum threads by night and wrangle plugins by day.
A self-taught guru on Multisite and .htaccess, she has a passion for writing and technology and blogs about them
Twentyeleven gives you the option to place the navigation side-bar left or right:
What if you wanted to use the twentytwelve theme, and have the navigation on the left? And just to be different, let’s have it do that only when the screen width is greater than 800px.
One way to do it would be with a style.css file in a child theme having code like this:
To add some additional modification, make a new template file to change the footer. The child theme directory looks like this:
You’ve just built a great theme, but how can you get more people to use it?
All the steps you’ll need to follow to get your brand new theme internationalized and localized.
If gettext, Poedit, POT files GlotPress, all seem like a foreign language to you, this session will change that.
Prerequisites: Good knowledge of WordPress themes.
She builds beautiful, functional websites that her clients can update themselves and that are easy for search engines to find.
She supports things like making the web accessible for everyone, using open source software, helping organizations find greener more sustainable ways to operate through online technology and helping non-profits with online community organizing.
She’s also a sewist and mother of four.
TwentyFifteen (left) and TwentyTwelve (right), side by side:
Before clicking the link, look at what this code does.
- Line 27 & 29: What do the first two for loops do?
- Line 36: Within the third for loop, what happens if (zr * zr) + (zi * zi) never gets to be greater than 4?
- Line 37: Is z%17 even necessary in this example?
- Line 14: How much difference is there when depth is a smaller number compared to a larger one?
Here’s the link to a simple HTML page consisting of the above source code (please give it a few seconds to paint every pixel in the window):
The image is called the Mandelbrot Set.
Products start with people.
The Washington Post used a user-centered design philosophy to radically shift our development process to launch dozens of successful new blogs, platforms and tools in the past year.
This philosophy is the reason why we use WordPress.
In this talk, we’ll explore the importance of empathy, brainstorming, rapid prototyping, testing and iterating and how to incorporate these methods to build better products, faster.
Yuri Victor builds to make the world smile.
After working with hundreds of newspapers in almost every role, even rolling 600 pounds of paper around the pressroom, he landed as the director of user experience at The Washington Post.
His desk is covered in coffee, stickies and sharpies.
He ( secretly ) hearts you.
Is it the Year of the Sheep, Goat, or Ram?
The word 羊 (yáng) is a generic term, and can refer to a sheep (绵羊),
goat (山羊), ram/buck (公羊 male sheep or goat), or 羚羊 (antelope).
Unit testing changed the way I write, architect, and debug code.
In this session, I’ll tell you why I’ve fallen in love with unit testing, and hopefully inspire you to do the same.
Alison has been working with WordPress since 2007.
She did agency work for several years, building highly customized sites for businesses large and small.
She now works as a Code Wrangler at Automattic.
PUT • PROMOTE • PORTRAY
- Putting or arranging a website item in a particular place or way.
- Promoting a product, service, or business within a particular sector of the internet market. Hint: Be the First!
- Portraying someone as a particular type of wordpresser.
Positioning is a system for finding windows in the mind.
P2 from Automattic is an atypical theme that works for longer posts but really lends itself to quick updates, inline commenting, and real-time communication.
In this session, see how a P2-powered internal blog has improved staff communication and cohesion at UCSF resulting in a much better user experience for the researchers and students we support.
Michele Mizejewski is the Web Initiatives lead for the library at UC, San Francisco where she is an advocate for user experience.
She believes that software and web sites should be visually pleasing, simple, and fun to use.As a WordPress fan from the beginning, Michele has employed it to solve problems in a variety of situations including harnessing internal communications, augmenting online courses, building portfolios, and oh yeah, for a bunch of blogs too.
Michele has a penchant for the eclectic, and when not curating, creating, or consuming web content, she can be found drinking a cortado and seeking narratives.