All posts by admin

1) jQuery Explained

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.

JavaScript and jQuery enable you to interact directly with the DOM, reading each of the objects, changing those objects, and even removing and adding objects.

jQuery Syntax

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)

EXAMPLES

  • $(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”

SELECTORSselectorsw3schools.com/jquery/jquery_ref_selectors.asp

EFFECTSeffectsw3schools.com/jquery/jquery_ref_effects.asp

 

1) Outline Beginning

CONTENTS

  1. Outline Beginning
  2. Communication
  3. Terminology
  4. Files
  5. Client Server
  6. Happy New Year – 2015!

  • WordPress-Saratoga <- our Bay Area Meetup Group
  • Automattic <- the company that manages WordPress.com
  • 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
  • Installation
    • ISP – Internet Service Provider
    • FTP – File Transfer Protocol
    • DNS – Domain Name System
  • Content
    • Posts/Pages
    • Visual/Text
    • Categories/Tags
    • Graphics/Images
      • raster/vector
      • jpeg, gif, png, svg
  • Themes
    • Display/Navigation
    • Layout/Structure
      • Header
      • Footer
      • Sidebar
  • Plugins/Widgets
    • contact form
    • ecommerce
    • photography
    • social network

newspaper rock

10) Event Listener

Click Me!


clickalert


THESE ARE THE ALERTS FROM THREE DIFFERENT BROWSERS

chrome

safari

firefox

10) Post Styles

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:

sequence of post elements
sequence of post elements

And, the font styles are different:fourposts* To get the categories to show in 2014, it was necessary to add a new category. When all the posts are UNCATEGORIZED, no category will appear on any of the posts.

 

10) What You Don’t Know You Can Do: WordPress Development for Absolutely Everyone – Tracy Levesque

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.

wordpress.tv

Tracy Levesque

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.

11 – USER INTERFACE ELEMENTS

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.

details

Shopping List
  • avocado
  • broccoli
  • carrots
  • grapes
  • kale
  • spinach
  • tamales
  • tomatoes

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.

 

11) Array Loops

array.js

11) Purpose

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 on first attempt
  • tried to access a website that was down temporarily
  • purchase, apparently completed, actually didn’t go through

define, build, measure

iterate, iterate, iterate, etc., etc…

Shift your thinking from the requirements of the system & business to the experience of the user. ~Jared M. Spool

11) Sticks, Spit & Duct Tape: Advanced RWD Layout Techniques – Josh Broton

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 Broton

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.

When he can get away from work, he loves to spend time on WordPress, JavaScript, responsive design, his awesome family, and ranting on Twitter.

11) Theme Support for Formats

theme support

theme files twentytwelve

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:

2015 css
from style.css of theme twentyfifteen

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.

12 – FOR MORE INFORMATION

HTML5 differences from HTML4

HTML: The Markup Language

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 Workers (http://www.w3.org/TR/workers). Web Workers is an API for creating additional JavaScript threads that are able to run in the background.

Web Messaging (http://dev.w3.org/html5/postmsg). Defines mechanisms for communicating between different browser windows, tabs, and iframes.

12) Don’t Use WordPress Multisite – Mika Epstein

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 Epstein

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

12) Options

Twentyeleven gives you the option to place the navigation side-bar left or right:

themeoptions

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:

stylecode2

To add some additional modification, make a new template file to change the footer. The child theme directory looks like this:

childfiles

homecode
home.php
footercode
footer-thanks.php

That screenshot.png shows up in the Theme Details window:themedetails

 

 

13) Big in Japan: A Guide for Themes and Internationalization Shannon Smith

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.

Shannon Smith

Shannon Smith is the founder of Café Noir Design, a boutique Montreal web design studio specializing in multilingual web development.

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.

13) Escape the Void!

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?

 

void

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):

zapmap.com/programming/javascript/void4.html

The image is called the Mandelbrot Set.

 

13) Responsive Results

Using our sample child-theme, as the screen/media width goes from greater than 800px to less than, the layout changes:

800-600

Going from greater than 600px to less than, the page menu list turns into a button, and the side-bar goes below.

600-599

14) Why The Washington Post Uses WordPress – Yuri Victor

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.

wordpress.tv

Yuri Victor

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.

15) Lessons Learned in Unit Testing – Alison Barrett

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 Barrett

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.

16) POSITIONING

PUT • PROMOTE • PORTRAY

  1. Putting or arranging a website item in a particular place or way.
  2. Promoting a product, service, or business within a particular sector of the internet market. Hint: Be the First!inc-magazine-crowdfunding-infographic-june-2013_26652
  3. Portraying someone as a particular type of wordpresser.

9856231ed338e8b1dfa6916eb0c91f20

Positioning is a system for finding windows in the mind.

wikipedia.org/wiki/Positioning

16) Positive User Experience: The Power of P2 – Michele Mizejewski

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

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.