Training Notes

Take Photos Through the Lens of a Graphic Designer

Photography and Graphic Design, A Marriage of Cousins

Photography and Graphic Design are very interrelated fields and the skills and techniques that apply to one can also be applied to the other.  Both are visual forms of artistic expression.  Graphic Design’s goal is to convey information clearly and in a manner that is pleasant to the audience.  I’m sure you can see why those skills would be useful to a photographer.  So lets get started!

Lines In Design

The line is one of the most basic elements of visual communication, but it’s fundamental nature informs its ubiquity.  Line is a form that has width and length, but no depth.  In graphics design, lines are used to create edges or separations between elements.  You wouldn’t guess it, but simple lines can be used effectively to convey large amounts of information and emotion.

Horizontal lines are considered to be peaceful and meditative because they invoke images of a horizon.  Vertical lines, however, are more active and aggressive.  They denote size, strength, and prominence.  Diagonal lines indicate movement or action and have a dynamic feeling.  Curved lines have a sense of softness and smoothness and beauty.  Curved lines also have an interesting property in that they can be discontinuous without throwing off the design.  Studies show that the mind tries to complete curved lines and follows them even if there is a gap.

The form of shape of the line aren’t the only aspects that carry meaning.  The weight or thickness of the line denotes a sense of structure.  Thin, wavy lines are fun and whimsical while thick, heavy lines are resolute and static.  Tight, short, and scribbled lines denote chaos and energy.

Indicate, Don’t Illustrate

Lines convey so much information, in fact, that you can use the minimum lines to identify what is truly interesting about your design.  Creating the concept and core structure of your piece with minimal lines helps you understand how to capture the form of your subject in the most recognizable fashion.

Lines are a large part of layout.  Even if they are not expressly drawn, they are often indicated by the design structure.

Lines in Photography

We can apply these design principles to our photography.  If you want a calm, serene look, try to photograph long horizontal lines in both the foreground and the background.  This makes the scene look expansive and open.

If you want to project strength with your photo, try to compose it with less vertical lines and more horizontal.  This will make the subject taller and more prominent.

Diagonal lines denote movement. so if you are photographing something with movement, you need to compose for it.  For instance, if the photo is a surfer, try not to show the water horizon in the surfing show because the strong horizontal line will detract from the dynamic nature of the subject.  If you recompose to show the subject at more of an angle, you can capture the movement in a much more dynamic way.

Curves are a great way to denote softness and beauty.  Even subjects that don’t necessarily think of as soft and beautiful, like a spiral staircase, can be shown this way if composed correctly and accentuating the curves.

Rule of Thumb: When flummoxed, break subject down to lines, then decide what emotion you want to convey with the photo.  Your task then becomes to accentuate those lines in such a way to convey that emotion.

 

Training Notes

Launch Your Website Sky High with Propeller

Propeller is a new framework that encorporates the best practices of both Bootstrap and Material Design.  It is quickly gaining traction as more and more developers and designers understand the need for mobile-first web designs and appreciate the more nuanced graphical approach advocated by the Material Design specifications.  Lets learn how to leverage this new tool to create better responsive websites, faster.

Under The Hood

Since Propeller unifies Bootstrap and Material Design (with a jQuery backbone), we should first explore these code bases so we understand where we are going.  Lets dive right in!

Bootstrap

Bootstrap is a CSS and JS framework developed by Twitter to solve the issue browser responsiveness.  Sure, CSS already gives us media queries, but you would have to write hundreds of queries to directly target every device browser.  And these media queries would have to be updated constantly to keep up with new innovations and device drop-off.  I’m getting tired just thinking about such an undertaking.

Bootstrap simplifies things by providing styles that control your page responsiveness.  Instead of writing a media query, you just style up a class with the prefix of  .col-lg and that class will be called when  the browser has a large screen size.  Learn more about Bootstrap and how to use it here: http://getbootstrap.com/css/ .

Material Design

Material Design has a completely different focus, but the two frameworks dovetail nicely together.  Whereas Bootstrap solves  responsiveness issues by moving objects around the page, Material Design tries to provide a common graphical interface for interacting with said objects.  It provides the theory and principles upon which we can base the digital experiences we are crafting.  It’s also incredibly robust.  Learn more here: https://material.io/

And that robustness is probably the specifications downfall.  Attempting to encorporate all of Material Design best practices is a daunting task, forcing you to begin with material design in mind, or forego the directions entirely.  Propeller nicely bridges this gap and allows for an easy transition from your current Bootstrap website to Material Design specifications.

Getting Started

So, now you need to know how to get started with Propeller.  First, head to the official website at http://propeller.in/get-started/ .   There, choose your relevant download (I’m choosing the Propeller Kit download option) to grab the files to your computer.  From there, unzip the “pmd” folder to take a look at the resources.

The folder we will be working with for our purposes is the “dist” folder, but also take note of the assets folder which includes the CSS and JS files for Bootstrap  and jQuery. All thats left to do is add calls from your HTML document (that already uses bootstrap) to the propeller.css and propeller.js files, thus adding the Propeller framework to your website

Whats the Big Deal

Okay, now we have it installed, what’s changed?  For starters, Material Design uses a Roboto font from Google that is very pleasing and easy to read.  You will also get a different blocquote styling and the background will change.  Beyond that and a few minor display changes, everything should be as it was before Propeller was installed.  It is still a normal Bootstrap websites,  Lets take a look at some of the classes we can apply to change things up.

Navbar

navbar-inverse
For your navigation bar, use class=”navbar-inverse” to make the nav bar dark and the text light.
pmd-navbar
Add class=”pmd-navbar” to your navigation bar to encorparate material design specs, which will make the nav bar a bit larger than bootstrap and the font a bit more readable.
pmd-ripple-effect
Staying with the navbar, at a small width the menu changes to a hamburger button that collapses the items.   This button is used extensively in bootstrap websites.  Simply add class=”pmd-ripple-effect” to this button for a fun effect added to click events.   This ripple effect can be applied to any button or link that is styled as a block.
<span class=”caret”></span>
When you want to add a toggle to top-level drop-down menus to let the visitor know that there are more items beneath the top-level, simply add the bootstrap component of <span class=”caret”></span> next to the link text (inside the link) to add a little graphical toggle.  Can also apply ripple to the link that contains the caret.

Buttons

pmd-btn-raised
Add a small dropshadow to your buttons and clickable objects with class=”pmd-btn-raised”.
pmd-btn-flat
Remove the background from a button until hover with class=”pmd-btn-flat”.
pmd-btn-outline
Remove the background but keep a border of the same color with class=”pmd-btn-outline”.

Accordions (Bootstrap Panel-Group)

pmd-accordion
To add material design look to accordion menu, which is known as a panel group in Bootstrap, simply add class=”pmd-accordion” to the same div that contains the class=”panel-group”.
pmd-accordion-inbox
For a fun addition that makes the active accordion panel larger than the rest, use class=”pmd-accordion-inbox” on the panel-group div.  However, you also have to add data-expandable=”false” to the title links inside each panel (look for link with role=”button”).
pmd-accordion-nospace
To create an accordion without space between items, add class=”pmd-accordion-nospace” to the panel-group

Forms

pmd-textfield
To style up text fields to make them look much better and more intuitive, simply add class=”pmd-textfield” to the form-groups that contain text field elements.
pmd-textfield-floating-label
For a fun way to make the text field labels start inside the input, then reposition themselves above the input, add class=”pmd-textfield-floating-label” to the form-group
pmd-checkbox
For better checkbox styling, add class=”pmd-checkbox” to the label within which the input is located.
pmd-checkbox-ripple-effect
Add a little ripple effect to the checkboxes with this class added to the label which contains the checkbox element.

Wrapping It Up

There is so much more to learn and experiment with Propeller, we just didn’t have time!  Head over to http://propeller.in/get-started/ to review the components mentioned here and find out about some new ones.  The framework is constantly being updated, so keep checking to to stay up-to-date with the latest methods and components.  Thanks for stopping by!

Training Notes

20 Steps to A Secure WordPress

Web Security is Complicated. What an understatement.  Anything important is usually fairly complex, and web security is paramount.  So you can just imagine how complex it is! Fortunately, securing portions of the web can be done far more easily.  For today, lets talk about securing your WordPress Installations.

  1. Permissions – Set your server permissions so that all WordPress directories (folders) have 7-5-5 permissions, while all files have 6-4-4
  2. Use Random Characters for WordPress Inputs – Obfuscating the details of your installation is your first line of defense from brute-force hacking algorithms.  You want to use random names for most entities as a means of providing less data to hackers.For this, you can use plugins like LastPass or Roboform, or you can use a naming convention that only you understand.  Lastly, you can just push down on a bunch of keys at the same time, thus ensuring a random entity name.In particular, randomly rename these assets:
    1. Database Name
    2. Database User Name
    3. Table Prefix – This is the prefix WordPress uses to identify tables that belong to your installation.  Changing this adds another layer of obstruction.
    4. WordPress User Name – By all that is holy, don’t ever use the default “admin” as your username.  Hackers will need to find two pieces of data to break into your user, but having admin as the username, you’ve lost half the battle.
  3. Restrict User Privileges – Not for use with most installations, restricting the user privileges is one of the most powerful ways to secure your WordPress.  It is important to note that you will be removing necessary capabilities from your interactions between WordPress and your database, so problems will invariably arise.Only perform this action when your website is in production and you wont’ be messing around with the code any longer.  For more info, learn about Hardening WordPress.
  4. Strong Passwords – This goes without saying, but the strength of your password goes a long way towards determining the strength of your security.  From an IT perspective, the only reason that passwords are broken is because they are human-readable.  In order for us to remember our passwords, we use common conventions that can be easily understood.  We also use the same passwords in multiple places, with little variation, resulting in lax security.

    As a rule, if your password is random and of enough characters, you will never need to worry about it being cracked.

  5. Get New Salts (WordPress Secure Keys) Each Time You Install – WordPress secure keys are used to provide a layer of security to various portions of your installation.  Get new WordPress Secure Keys each time, from the link provided, to secure each of your installations.
  6. Move WP-Config File out of Root Installation – By default, your WP-Config file, which holds information for your website to communicate with your server, is placed in the root of your installation.  You can achieve an additional layer of security by moving this file out of your public_html folder and into the root of your domain.  WordPress should still be able to find the document, but there might be some instances and server setups that prevent this from working.
  7. Add HTACCESS File to Block WP-Config – We can block communication with our WP-Config but adding a custom HTACCESS file to the same level in the directory that WP-Config is located.  You will want to add this command to your .htaccess :
    <files wp-config.php>
    order allow,deny
    deny from all
    </files>
    

    There are many different ways and multiple steps depending on your operating system, but you can find directions here: Hardening WordPress WP-Config.

  8. Set Up SSL – Secure Socket Layers is an additional layer used to obfuscate traffic sent between the host server and the downloading computer.  It is a good idea to have one, and also a good idea to secure your entire WordPress with it.  Once secured, edit your general information to refer to the website as “https://” rather than “http://”
  9. (With SSL Applied) Force Logins and Admin Through SSL –
    Add

    define('FORCE_SSL_ADMIN', true);

    after the WP_DEBUG section to force all login attempts and administration sessions through SSL

  10. Change Path to Login Page – Brute-Force hackers need your login page in order to begin cracking your logins.  Hide your login page with the Rename WP Login plugin (or something equivalent).
  11. Limit Unsuccessful Logins – Brute-Force requires a large number or requests before they can crack your logins.  Limit Login Attempts to make this process much more difficult. Or look to WordFence.
  12. Add Captcha To Login Forms – Another great way to limit the effectiveness of brute-force algorithms is to use Login Page Captcha.
  13. Two-Factor Identification – Make it more difficult for everyone to sign in using your chose of Two-Factor Identification plugins.
  14. Hide Your Version of WordPress – Use a dedicated plugin or install WordFence to hide your version of WordPress from hackers. As WordPress is developed, vulnerabilities are found and resolved.  Each different iteration of WordPress, therefore, has different vulnerabilities that are solved by subsequent versions.  Hide your WordPress version to prevent hackers from knowing the specific vulnerabilities for your installation.
  15. Block Bad Queries – Query stings have the ability to interact with WordPress in different ways.  Prevent any malicious queries with the Block Bad Queries plugin. This works great with WordFence.
  16. Block Bad Behavior – To particularly watch for Spambots, also include the Bad Behavior plugin for your installation.
  17. Force HTTP calls to HTTPS – Sometimes plugin or theme developers will leave a HTTP call in their code, thus breaking your SSL and leaving a vulnerability.  Use Really Simple SSL to force all http links to https, thus removing this potential problem.
  18. Disable Admin File Editor –
    Add

    define('DISSALOW_FILE_EDIT', true);

    after the WP_DEBUG section to remove the option to edit files while in the admin portal.  You can still edit with FTP, but you have prevented the number one reason people hack WordPress, for control of the PHP files and the server they are delivered from.

    This, of course, means you cant edit them either.  For this reason, you will want to wait until the website is production ready.  Additionally, if you want to be able to edit your files again, simply comment out the line in wp-config.php, then uncomment it when you are done.

  19. Only Install Themes from Trusted Sources – Malicious code can be placed in your theme and you won’t even know.  Therefore, only add themes from the free theme store within WordPress or from trusted download sources.
  20. Use Yoast SEO for Search Engine Optimization and W3 Total Cache for Performance Optimization.
  21. Create a Maintenance Plan – It is impossible to be 100% secure in anything, especially web security.  To be as resilient as possible, monitor updates and update your websites regularly.  Also regularly back up your website to ensure that, should the unthinkable happen, you can get back up to business in no time.To keep on top of updates, use WP Update Notifier or regularly check into your WordPress installations to check for updates.

    For backups, you can use a plugin like Updraft Plus, or you can manually back up your installation.  You need to download the HTML files and the database separately, and store them on your local computer or somewhere secure.  Special note – when backing up the database through PHPMYADMIN, you will need to export the DB, when exporting, be sure to Output > Save Output to a File and select the zipped compression method.

 

 

Training Notes, Uncategorized

Color Correction

Color correction, an immense and deeply technical process, involves 3 main components:

  • Adjusting for Exposure
  • Adjusting for Saturation
  • White Balance

Goal is to neutralize clips and make exposure, saturation, and white balance look accurate.  Additionally, you are trying to make each clip blend in with the scene in which it is set.  Lets look at each component in depth:

Exposure

For exposure, you will be adjusting exposure in Shadows, Midtones, and Highlights (also called Lift, Gamma, and Gain).  To get things right, you might have to adjust each separately

Saturation

You want your colors to be accurately represented, so you will have to adjust saturation in the shadows, midtones, and highlights.

White Balance

Probably the idea you have when you think of color correction, this is balancing the color between clips.  You are adjusting so the white looks white, grey looks grey, black is black, and all other colors show accordingly.

Your film lights (and the filament type) can often color cast your scene, tinting the shades and making all other other colors appear off.  Color correction is also process of color cast normalization.

Color Correction Order of Operations

  1. Import
  2. Organize
  3. Trim Clips
  4. Assemble Rough Edit
  5. Refine Edit
  6. Mix Audio
  7. Color Correction
  8. Color Grade
  9. Finalize
  10. Export

When in the color correction phase of your project, try to perform the functions in this order:

  1. Exposure
  2. Saturation
  3. White Balance / Color Temperature

Most important point is to work on Exposure first, set your shadows, midtones, and highlights, then work from there.

A good guide for the color correction and color grading steps is as follows:

  1. Remove Artifacts
  2. Color Correction
    1. Exposure
    2. Saturation
    3. Color Temp
  3. Relight with Power Masks and Power Windows (Resolve)
  4. Add Gradients, Diffusions, or Lens Filters
  5. Vignettes
  6. Color Grading
  7. Film Stock (Film Noise)
  8. Resize and Sharpen

Scopes

Your two most useful color scopes inside of Premier Pro are the Parade (RGB) and the Vectorscope (YUV).

RGB Parade

The RGB Parade waveform displays the Red, Green, and Blue signals and shows the luminence in your shot.  Waveform shows from left to right the detail in each color channel.  Anything at the top of the Y-Axis (100% luminence) is flat white.  When flat white, there is no more detail that we can extract from that portion of the scene.  Inverse is true for 0% luminense and flat black.  If blacks don’t show as 0%, then there is color information there.  Not much, and might not be usable, but it is there nonetheless.

The scope also shows the relationships between color channels.  If we increase the exposure for the red channel (by moving the color temp towards orange), we see a resultant decrease in the luminance values for the green (slightly) and the blue (greatly).  If we increase tint towards the green channel, we see the green values shoot up while the red and blue values are diminished.

YUV VectorScope

The YUV VectorScope shows chromanance, which is color.  It shows the intensity of your colors on an RGB color wheel (fairly closely).  This scope shows you how much saturation there is and where that saturation occur.

Other Tools of the Trade

Lumetri Color

This is a Premier Pro effect that can be applied to clips.  It offers a simple and intuitive panel that pulls from Adobe Lightroom.  It also gives you access to curves and color wheels, so Lumetri Color can be your one-stop color correction plugin!

Three-Way Color Corrector (or Color Wheel)

Plugin that allows you to tint the shadows, midtones, and highlights individually.

Fast Color Corrector

One color wheel that can be applied to the entire shot, not by channel like the 3-way above.  Use this if the entire shot is casted.  It can change the hue as well as move the whites towards a color to correct casting.

RGB Curves

Plugin to re-expose all color channels with a curve graph.  The graph represents luminance values from bottom left being 0 to top right being 100.  To make that channel brighter, increase exposure at the top right of the graph.  To increase contrast, increase exposure for top and decrease for bottom, brightening brights and darkening darks.

Color Correction Techniques

Adjust Exposure

Expose adjustments are about changing blacks, mids, and whites.  Lumetri Color gives us an exposure control in the Tone control group.  Word of caution, though, when increasing exposure.  Because compression gives more data to light portions, re-exposing the dark portions of your scene can show some compression artifacts (noise) that were previously hidden.  This is especially noticeable in the darker regions of the scene.

You can also use the different exposure controls together to get the look you want.  If increasing master exposure gives unwanted artifacts in shadows, try lifting the master then lowering the shadow control, possibly highlighting what you wished while also darkening the shadows back to where they weren’t noticeable.

Want to do exposure first because as you change exposure you change the saturation of your colors, so get your black and white points dialed in before you work on color.

Adjust White Balance

This is what people usually think about when discussing color correction.  Easiest way is to use a color chart when shooting, so you just put the chart in your lighting and key your white balance directly from the chart.  Balance card is also used for this.

Another great technique is to focus on a small portion of the total scene (using the crop effect), then use the zoom checkbox on the effect to show your small portion over the entire viewfinder.  This allows you to look at the color with your scopes to get it exactly where you want the color to be.  Once completed, these changes are exported over the entire scene.

Check Skin Tones

Checking the skin tones is a similar process.  You want to crop on a portion that shows the skin in the most prevalent light source.  The crop usually comes from the forehead.  You then zoom on this crop and check your vector scope to see that the skin tone is on the mid-Y axis (for a caucasion).

Adjust Saturation

Lumetri offers a few different techniques for adjusting color saturation.  Aside from the RGB scopes, which informs you of the relative saturation between color bands, you can use the Creative panel which gives you access to both saturation and vibrance controls.

Vibrance is a saturation algorithm that minimizes clipping as colors approach full saturation.  This changes the saturation on all colors, but affects the lowly saturation ones more.  Additionally, vibrance protects skin tones from becoming over saturated.

The 3-Way Color Corrector also has saturation controls that separate the colors into luma bands.  This way, you can control saturation in the shadows independently from the mid-tones.  One use of this is to push master saturation, lower mid-tone saturation, then raise back the shadow saturation.  This creates an effect similar to vibrance, where colors that are most saturated are affected the least.

Additionally, in Lumetri, you have access to curves.  One of the curves is a hue/saturation curve, which allows you to saturate certain portions of the color wheel.  This is useful if you need to bump saturation, but you have an already saturated element in the scene.  You can boost the saturation curve around the element, so you don’t blow it out but you still add the saturation to the rest of the scene.

Secondary Color Correction

Within the three-way color corrector, you have access to secondary color correction.  Secondary color correction is useful when your initial color correction, while helping the scene in total, changed the color of another element and you need to get it back. These are tools that make selections on the image based on hue, saturation, and luminance.  While that sounds confusing, the color pickers make the job simple.

Use the left-most color picker to choose the color you want to correct.  Then, click the show mask toggle to show what you have selected.  If your selection doesn’t accurately reflect what you wanted, use the plus or minus color pickers to add or remove from your selection.

You can also use the hue, saturation, and luma controls to change the bands that you are selecting.  The sliders control how much and at what feather you want to select.  At the bottom, you have soften and edge thinning controls.  Soften will blur out the selection a bit while edge thinning is refine edge, you can grow or shink your selection at the edges.  It is usually a good idea to blur it a bit to soften the effect, and grow or shrink as needed.

Wrapping It Up

Color is the key by which you create you composition, and the colors you choose create the emotional context for your piece.  Just as choosing notes and progressions from a minor key creates a somber melody, choosing blues and violets can create a somber production.  But before you can make those artistic decisions, you need color correction to standardize and sanitize your clips, thus giving you a full palette to play with.

Training Notes

How to Design Great Forms

Forms are the primary ways in which our visitors will interact with our websites.  For this reason, creating user-friendly and easily understood forms is important to proving a great experience and getting usable data to make decisions upon.

Forms are conversations with users, not interrogations, ensure they have a pleasant experience with your form

There are many critical factors to understand when designing and implementing a good form.  But first, I want to have a quick discussion on form afforndances.

Form Affordances

An affordance is a possible method of interaction with an object.  For instance, a door know, with its round, smooth shape, affords the opportunity to turn it.  The shape and design of the object infer the method of interaction.

A good form also has these affordances.  Look for these main points when identifying the affornaces your form allows:

  • Active Buttons – Flat button designs are not good for forms because they blend in with the form fields and don’t provide clear calls to action
    • use color, shading, depth, shape, and contrast to alter the appearance of your buttons to make them stand out (rounded corners are great for buttons)
  • Button Descriptions – Make sure the button text is actionable and descriptive.  Use verbs to tell the user they are doing something.
  • Input Fields – Pay special attention to input fields as they are your primary means of obtaining data from users
    • Consider the data that will go in the fields.  DO NOT make the postal code and city fields the same size, as the postal code is usually shorter.
    • Use shading to differentiate the different form inputs
    • Bump contrast a bit to make sure everything stands out

This discussion actually takes me to a subject I didn’t think of covering, but I feel is just as important as anything else we will discuss today.  Lets talk about Button Design.

Button Design

Not to fall too far down the rabbit hole, lets identify a few key concepts when if comes to button design:

  • Fit For Purpose – Make sure your buttons match your branding.  The color, shape, and styling of your buttons should be informed by your brand style guidelines.
    • if the website has a flat design, a shiny button with gradients and drop shadows might look out of place
  • Contrast – Make sure your buttons have enough contrast and visual weight to stand out from the rest of your user interface
  • De-emphasize Other UI Elements – Reduce shading a bit for form inputs to make the buttons stand out in comparison.  You want your button to be the star of your form.
  • Borders/Stroke Law – Always give the button a border, with the color and shading of this border depending on the background the button is placed upon
    • is background is lighter than button, use a dark stroke that is close to the button color
    • if background is darker, use a dark stroke that is close to background color.
  • Shadow Law – Drop shadows work best when the element is lighter than the background on which it sits.
  • Iconography – Use icons to provide additional information about affordances with your button
    • for example, if moving to new page, use an arrow pointing right.  If moving down the page, use a arrow pointing down
  • Hierarchy – Design your buttons in a 3 level (or more) hierarchy.  Reserve the strongest, boldest colors and designs for primary buttons, drop off a bit of the saturation and styling for secondary, then remove most styling and make tertiary buttons smaller
  • Feedback – Buttons can provide feedback in the form of styling to let the user know what is happening.  Consider the following five feedback states to offer the user:
    1. Default – Full color and border, with subtle drop shadow
    2. Hover – Lighter color with border, same drop shadow
    3. Click – Darker color with border, no drop shadow (go for pressed look)
    4. Busy – Red or alert color, light border, use drop shadow
    5. Disabled – Greyed out color, very light border, no drop shadow

And finally, on to designing great forms

Great Form Design

There are a few general rules and guidelines you can follow to get the most out of your form design.  These include:

  • Organize Your Form – Properly group your related form fields. I.E. Break out personal information form fields from billing information form fields.
  • Hide Unnecessary Fields – Hide unnecessary fields until they are needed to reduce noise
  • Show Helper Text – Forms should be intuitive, but there are a few uses for helper text and tooltips.
    • Use helper text to explain how you will be using the data the user submits
    • Explain the field format that will be used to evaluate the entry
      • think passwords, which might have to be in certain configuration
    • For best practice, use an icon to allow user to bring up helper tip if they want
    • Use as few words as possible for the helper text
  • Always use Correct Input Type- We have access to many different input fields, so its important to choose the right one for the situation.
    • if a user must choose a single option from a list, use radio buttons
      • if there are more than 4 elements in your list, use a select box
    • if a user can choose multiple selections, use checkboxes
  • Always use Correct Input Length – When dealing with text boxes, we want the length to be informed by our expected data returns.  We talked about this before, don’t make the zip code box the same length as the address, the zip code will always be shorter.
    • Give users enough space to write clearly and read what they write.  Avoid tall and narrow text fields and super-wide but short text fields.
      • best practices state the text box should be about 50 or 60 characters wide and ten lines tall.
  • Provide Clear Labels for Each Field – The labels should communicate clearly what the field is for and how it will be used
    • Don’t put the labels inside the fields as placeholders because people might forget what data they are entering into the field
    • Use a maximum of two words per label
    • Put labels above field elements
      • if labels are to the left, vertical space is decreased but form completion time explodes
    • Always make which fields are required and which aren’t
      • use an asterisk next to the label with a tooltip explaining required fields at the bottom of the form
  • Clearly Describe Expected Input Format – When necessary, explain the format of data you expect when the user submits the field.
    • Do with tooltips
    • Only use with fields that require special formatting (date / phone number)
  • Giving Feedback – Used to tell user when they made a mistake or completed a milestone
    • Display the error message but also guide the user on how to fix the error
      • if empty field, then highlight field to let them know that it needs data
    • You can also offer feedback as the user enters information
      • use checkboxes to show when a piece of data is entered correctly
  • Mobile Form Design – Mobile devices have smaller screens, so we must plan accordingly
    • Ensure font size is atleast 14px and no smaller
    • Ensure fields are tall enough to allow for easy user focus (Apple recommends between 32px and 44px height)
  • Don’t Ask for Necessary Info – Nobody likes completing forms, so only ask for the information you need at that time.  Each additional question is noise and our goal is to reduce noise to boost conversion rates.
Training Notes

Relational Database Best Practices

Atomize Data
Use the smallest data points that you have and run calcuations upon them. Don’t ever use calculated data in fields
Name Tables in Plurals
Be sure to name your tables with plural names as they will be holding collections of data

 Database Normalization

First Normal Form

To get a table into first normal form, you will need the following features:

  • Primary Key – can never be null
    • Natural Key – Field inside table that can be marked as unique
    • Surrogate Key – Dummy piece of data that allows for unique keys
      • this will become an identity, which is a MS term for an auto-incrementing field
  • No multiple pieces of data in any one table cell or column

Never leave a database in first normal form, the only purpose for 1st normal is to move to 2nd normal

Second Normal Form

2nd Normal takes any repeating column fields and abstracts them to their own table.  These tables are then joined by foreign keys.

The problem with second normal form is that there are often transitive dependencies in the data.  This occurs because all pieces of data depend on the primary key, but sometimes pieces of data depend on eachother.  If they do:

a = b, b = c, so a = c

This means that your dependencies depend on eachother AND the primary key, creating a headache when changing in the future.

Third Normal Form

3rd normal form requires a process known as Decomposition.   You will identify the transitive dependencies, and abstract them by moving the pieces of data to a new table.  You will then create an associative ID (primary key on associative table) and use that as the foreign key for your first table.

Foreign Keys

Foreign keys are used to join tables together to enforce data integrity.  We are telling the tables which pieces of data correspond to the primary keys of other tables.  Additionally, with foreign keys installed, it becomes more difficult to enter incorrect records into your database, as all data must pass integrity rules before being recorded.

Relationships

One To Many

With databases, you are able to define the nature of the relationship.  One to many defines a relationship between table A and B, which I will substitute with real data for example purposes.  Imagine a table of all basketball players and another table of the 5 positions on the court at any one time.

  • At any one time, a player can have only one position
  • However, during that game alone, a position would have more than one player (2, in this case)

Talk it Out!  A lot of programming should make intuitive sense, so talk out the relationship and see if it makes sense.  In the above example, in a Cavs vs. Knicks game, Lebron James only has one position (record) on the court at a time (unless you count point-forward as a hybrid, which would break my database :) while the small forward position has 2 players (records) for Lebron James and Carmelo Anthony.  So a player only has one position, while a position has many players, creating a one-to-many relationship.

Said differently: if we had a table of all NBA players and we wanted to abstract their positions to a different table, each position would be applied to many different players.  This is a one-to-many relationship.

Many To Many Relationships

In real life, Lebron can play multiple positions at any given time.  He is routinely used as the PF is small ball and as the point guard during their Death Lineup, so a player can have many positions and a position can have many players.  This is a many-to-many relationship.

It sounds complicated, but many to many relationships are greatly simplified by the inclusion of a junction table.  This table holds keys for the relationships.  So we would have one record for the small forward position.  But we would have another record for the small forward who plays point forward.  And another one for the SF that moves up for small ball.

When you create the new table, use proper naming conventions.  For above example, the table would be PlayersPositions because we are defining many-to-many relationships between players and positions.  The table would have two columns, one for playerID and one for positionID.  We would then make primary keys out of both columns, to give us better structural integrity.  This also reduces the chance for duplicates.

Finally, create relationships so that the junction table is between the two tables you are joining.  In our case, the Players table and the Positions table.  The PlayersPositions table would have a one-to many relationship between the Players table and the Players position table and the Positions table would also have a one to many relationship with PlayerPositions.  Its the PlayersPositions table that is defining any many-to-many relationships.

 

Training Notes

Color Grading

Color grading footage is important if you want to convey a cinema-quality with your video projects.  It’s also pretty confusing and requires a special set of equipment and skills.  Fortunately, you probably already have the equipment and the skills necessary can be learned easily on most video production software suites!

What You Need

The most important decision you have to make when color grading your videos is how you will monitor your footage.  You are making decisions based on the information your eyes recieve from the monitor, the better monitors means better information for better decisions.

There are a few things to look for:

  • IPS – In-Plane Switching Technology allows for a greater viewing angle and contrast, important when deciding how dark to make your video.
  • 100% REC 709 – Important for your monitor to accurately represent all colors in the color space you are likely to work, which is REC 709

Next, you’ll need proper monitor calibration.  They sell monitor calibration tools and software but if you’re either on a tight budget or you prefer the DIY route, you can use the built-in monitor calibration tools that come with your operating system.  Here is a really good tutorial from Digital Trends!

Let There Be Light

Lighting is also a big deal when it comes to working with color.  Basically, you want complete control of the light that enters your eyes.  This means you’ll want to have a neutral paint scheme (gray is preferable) and black-out curtains on all the windows.

The light in the room should come from artificial light, at low levels, behind the monitors and not pointed directly at your eyes.  Go with LED bulbs and have a dimmer switch so you can better control the light levels for good balance.

And Last But Not Least, the Program

All the forementioned points are vitally important, but they don’t matter if you don’t have a tool with which you can perform your color grading.  DaVinci Resolve is the industry standard and there is even a free version, so it will probably be your best choice.

Honorable mentions include Adobe SpeedGrade and Adobe After-Effects.  Lastly, you can perform basic color grading tasks directly in your video editor, so don’t get discouraged if you can’t drop a few hundred bucks on specialized software.

Footage For The Grade

Properly filmed footage goes a long-way towards leading to a professional and cinematic color grade.  This is important:  You won’t always have the time or the ability to color grade every piece of footage, and in that case, make the footage look good in camera and do simple color manipulations with your video editor.

If you do plan on grading the footage, you’ll want to take a different approach.  At a high level, grading is about manipulating the values of red, green, and blue.  If you want to warm up footage, you increase the red exposure by a lot, green by a little, and decrease blue. If you want to brighten, you re-expose the low value information in each color channel, either equally or in different amounts per channel, resulting in some color casting.

By understanding this concept, we understand the need to shoot in LOG format.  In most image compression algorithms, more information is spent on the brighter portions of the image, as opposed to the shadows and darker parts.  This means, when manipulating the color in the shadows, you don’t have much to work with.  LOG format maps the colors differently, so while the shot looks worse in camera, you have much more information to work with during post-production

If you don’t have access to a camera that shoots in LOG, you want to make your footage as flat as possible.  This means:

  • Drop Sharpness to 0
  • Drop Contrast to low
  • Cut Saturation in 1/2

When shooting in flat profiles, you want to watch for your exposure.  Anything dark gets over-compressed relative to the light portions, so if shadows are important to your shot, increase exposure as long as you watch for clipping.

What is Color Grading

First, lets identify the difference between color correction and color grading, to clear up any confusion.  Color correction is manipulating color information across multiple clips to ensure proper color and exposure across the entire project.  Grading is more of a creative process where you adjust the exposure, contrast, and saturation to evoke a certain emotion.  When used in conjunction, perform color correction first, then color grading.

Color grading comes after color correction and color correction comes after video editing

Evaluating Color

Color, in video, is shorthand for feeling.  It sets the tone and context for the shots in your project.  Similar to music, in which which key you select your notes from determines the feeling and context for your piece, which colors you choose to enhance vs. the colors you dull or obfuscate gives your project a sense of feeling and emotion.

Bright, saturated colors make up your major key, while dull, flat colors form your minor

 

Training Notes

MVC Mindset

As anyone who follows my work knows, I have become very enthusiastic about working with API’s and learning more about their development.  I can envision a future where HTML, CSS, JS, and PHP are combined to a unified markup and scripting language that will power all display devices.  These devices still need data, however, so understand data architectures and how to access and work with data will become evermore important.  With this in mind, lets dive into an in-depth understanding of the MVC framework!

Models

The M in MVC stands for models, so lets start there!  Models are responsible for your data access.  They also control authentication and verification, but understanding them as data access routes will help simplify a nacient interpretation.

For example, the Laravel model User.php is a class that is responsible for the users of your app.  It does your authentication, it does your verification… it can hold a bunch of code but it all has to do with working with users of your app.  Models are representations of actual objects or entities in your application.

Models represent tables in our database.  Always use a singular name when creating models, and make sure they correspond to the table name in your database.  For instance, if we have a Users table, we need a view called User to interact with it.  Also works for irregular nouns, like a people table would be modeled by a Person class.  Notice how the table is plural but the model name is always singular.

Views

Views are the public display of your data.  They are the HTML and CSS that is used to make up the body of your webpage, then accept the data from the controller.

Routes

Views are managed by routes, which state the HTTP method to load the view.  For instance:

Route::get(‘/’, function () {

return View::make(‘hello’);

});

This is the default Laravel route.  The route gets the root page (‘/’), and when encountered, runs the callback which returns a file from the View folder called “hello.php”.  The .php can be omitted.

Remember, views should be agnostic as to the data or where it came from.  They just display what is sent to them, they have no control or guidance as to what is transmitted. The View simply renders information for public consumption.

Controllers

Conrollers are the moms of the app.  They don’t fetch information, they ask other classes to fetch the info.  Then, once received, controllers pass the data to views for public display.

Controllers are project managers.  They decide which pieces of data is needed, and sends that data where it needs to go.  Controllers also direct the routes.  A route is the URL and what is loaded when that URL is called.  Controllers create the URL’s and tell the routes what to load when that URL is called by the browser.

Controllers should be sending messages and configuring the server state, it is easy to force your controller to do too much of the logic, making your system less usable.

Remember: Fat Models, Skinny Controllers

 

Training Notes

Sharing 360 Images on the Web

Immersive media is still in its infancy, but adoption is showing no signs of slowing and the technology is quickly adapting to produce a more high-fidelity experience.  Nowadays, you can get a LG 360 Cam for a couple hundred bucks, yet the pathways to distribute your captures are still under-developed.  Thankfully, web technologies have progressed to the point where I have 3 distinct options for sharing 360 images on my websites!

Methods

As aforementioned, there are three easy-to-use mechanisms for displaying 360 images on your websites:

They are all somewhat similar except for GuriVR, which has an entirely different interface but looks like it will be the easiest out of all of the options to implement.  However, I’m not looking for easy, I’m looking for consistent and forward-compatible, so I will rely on WebGL’s extension, WebVR, for my hosting situation.  Lets dive into the code!

WebVR 360 Images

The first thing you need is a 360 image.  There are a number of ways to get these, from downloading them from Flickr to creating them with Lightroom, or you can just get a 360 camera and snap a few shots.  Go grab a few pics then head back here to learn how to place them on your web pages!

All done?  Great, now we have to grab our WebVR Starter Kit!  The WebVR Starter Kit is a javascript library that will enable us to place our 360 images into our DOM.  Place this line of code into the document header:

<script src="//povdocs.github.io/webvr-starter-kit/build/vr.js"></script>

Now, with the script loaded onto the page, you can call your 360 image with the following command:

<script type="text/javascript">
  VR.panorama('[path to image]');
</script>
Lets see the WebVR Immersive Image in action!
Training Notes

Retouching Skin with Frequency Separation

Personally, I’m not a huge fan of frequency separation retouching. Unless you are aiming for an artistic effect or trying to scrub a mistake that occurred during shooting, I prefer things to be what they truly are. No “Alternative Facts” here, please.

However, I am always interested in new photo manipulation techniques and I have been hearing about Frequency Separation everywhere for the past few days. I think it is time to try my hand at the technique, why don’t you follow along with me?

Finding the Separate Frequencies

Old Lady Portrait Used as Before Image
Old Lady Portrait Used as Before Image

We are going to use the above photo for our frequency retouching.  I think she is beautiful just the way she is, but I’m still going to try to turn her into a typical American; semi-plastic and airbrushed to conceal her true identity.

Setting up the Layers

First things first, lets set up our layers in Photoshop.  The frequency separation technique requires the creation of two layers, one high frequency and one low frequency, to perform the bulk of the manipulations.

For those of us with a little more money and a little less time, you can find Photoshop Frequency Separation Actions online to do the whole thing for you!

Step 1: We need to copy our background image twice, then group the two new layers.

Step 2: We then need to link the two new layers and the original background layer, as shown:

Frequency Separation Step 1
Frequency Separation Step 1

Step 3: Rename the group to “Retouch”, the Layer 1 to “Low Frequency” and the Layer 1 Copy to “High Frequency”

We are going to the the High Frequency layer to contain only textures and the Low Frequency layer will contain only color information.  By separating them, we get much more control over the retouching of the photo.

Step 4: Convert Low Frequency layer to smart object.

Step 5: Turn off visibility for the High Frequency layer so you can focus on the low frequency layer.

Step 6: Apply a Gaussian Blur filter to the Low Frequency layer and increase the blur radius until you soften the appearance of the skin

Step 7: Turn visibility back on for the High Frequency layer

Step 8: With High Frequency layer selected, go to Image > Apply Image to bring up the Apply Image dialog box

Step 9: Update the settings for the Apply Image adjustment.  Make sure the source is the source file, the layer is the Low Frequency layer, the channel is inverted, the blending mode is set to Add, and the scale is set to 2.

Frequency Separation Step 9
Frequency Separation Step 9

Step 10:  Now, change blend mode of the High Frequency layer to Linear Light.

Now for the Finishing ReTouch

Step 11: Hide the High Frequency layer again and select the Low Frequency layer.  With this selected, choose the patch tool from the left-hand toolbar.  In some instances, you will need to rasterize the Low Frequency layer before the tool is applied to it.

Step 12:  To use the patch tool, trace around an area you would like to retouch (a wrinkle, for instance) then drag your selection to an area with a better texture.  In my example, I traced around the wrinkles in her eyes, then used the skin from her cheeks as the replacement pixels.

Frequency Separation Step 12
Frequency Separation Step 12

Step 13:  The patch tool is very powerful and the result can be pretty noticeable.  If you would like to bring back more of the original image, simply reduce the opacity for the Low Frequency layer and more of the original image will shine through.

Step 14: Now simply turn the High Frequency layer back on and you have a subtly retouched photo.  If the effect isn’t enough, raise the opacity on the Low Frequency layer and, in extreme instances, apply the patch tool to the high frequency layer.  However, be careful with this as you are copying the texture of the skin, so the result can be jarring.

Conclusion

Frequency Separation Final
Frequency Separation Final

Thank you for exploring the photo manipulation with me.  If you prefer to follow along with video, use this Tuts+ Tutorial about Frequency Separation .  As always, send any questions and comments my way!  See you guys later )

Training Notes

Mastering Blending Modes

I have been mucking around in Photoshop for almost a decade and it seems like every new feature I learn is followed by a mountain of new stuff that I have no idea about.  Blending modes came into my conciousness some time ago, but I never really understood them or how to use them effectively.

Now, years later, I have been trying to fill in the holes in my understanding of various data technologies, and blending modes is at the top of my list!  Join me as we begin an exploration in hopes of mastering blending modes…

Get in the Mode

Lets start out by examining the Normal blending mode, which is the most commonly used, and the Dissolve blending mode, which is almost never used.  They are also the simplest to understand.

  • Normal – The default blending mode, it means that the layers do not blend at all
  • Dissolve – Finds pixels with opacity differences and forces color onto them, I wont be using it too much

Now we examine the Multiply set of blending modes.

  • Darken – Evaluates which color is less bright, the base color (color layer beneath blended layer) or the blend color, and uses whichever color is darker.
    • Darken can make objects beneath a layer appear above a layer, and vice-versa
  • Multiply – Takes color information from base color and multiplys it with the blend color (color from blended layer).
    • Blending will always be darker
      • darker the colors are, the darker the multiplied color will be
    • Multiplying by white will remove the white from the blended layer, while multiplying by black will leave only black

In general, you will use Multiply more than Darken as it is much more useful, especially with mid-tone colors

Continuing with the Multiply set of blending modes, we get to:

  • Color Burn – Evaluates base color layer and blend color layer, then increases contrast between two colors to darken the base color
    • eliminates white from the blend layer
    • if colors are very different, then blend will leave a lot of digital artifacts, linear burn offers smoother transition
  • Linear Burn – Very similar but treats whites differently.  Whites in base layer are now darkened to reflect the blending layer.  This mode detects differences between base and blend, then darkens the base to reflect the blend.
    • when blending with color, use Linear Burn over color burn.
    • when blending with grayscale, linear burn is more noticable while color burn is elegant and contrasty.
  • Darker Color – Considered to be a better implementation of the darken blend mode, Darker Color
    • whereas darken becomes more of a blending mode when dealing with color (as opposed to replacement mode, which it really is), Darker Color simply chooses whichever pixel is darker, blend or base, and displays that, regardless of color

Screen Blending Modes

Now we move on to the Screen set of blending modes, they are thought of as the polar opposite of the Multiply blending modes.  All modes make black disappear and white completely white.   Multiply makes things darker, screen makes things brighter:

  • Lighten – Photoshop evaluates base and blend, and chooses whichever pixel is brightest
    • Similar to darken, this is a pixel replacement blend mode, but when used in conjunction with color, creates a nice blending
  • Screen – Takes color information from base and blend, multiplies it, then inverses it, making a lighter color (opposite of Multiply).  Resultant color will always be brighter than base and blend colors.
  • Color Dodge – Evaluates pixels between blend and base and reduces contrast until base pixel more closely resembles the blend pixel
    • creates a muddy appearance because contrast is being altered, more pixelized
  • Linear Dodge – Evaluates the base and blend pixels then increases brightness of base to more closely resemble the blend
  • Lighter Color – A more aggressive replacement blend mode to lighten, replaces dark with light pixels without any color blending from lighten.

Overlay Blending Modes

Let us continue our exploration of blending modes by moving to the Overlay set of blending modes.  Overlay modes remove the mid-tone greys from between the two layers.  Specifically, 50% grey is rendered completely invisible.

  • Overlay – Takes base color and mixes in blend color to remove mid-tone greys
    • Overlay gives a brighter result when working with colors than Soft or Hard Light
    • Works by detecting luminous values in base layer, then comparing that with luminous values in blend.  If base is brighter than 50% grey, it produces a screen effect and lightens.  If the base is darker than 50% grey, it produces a multiply effect and darkens.  If it is 50% grey, it is removed.
  • Soft Light – Same idea, but uses blend layer to start from, and mixes in base layer
    • much more subtle than overlay
  • Hard Light – Similiar idea to overlay, but with more contrast

Those three are the most useful in the Overlay set, but there are 4 other blending modes to discuss, so we trudge on…

  • Vivid Light – Compares base to blend, if blend is lighter than 50%, contrast is reduced between base and blend.  If darker than 50%, contrast is increased
    • leads to interesting results when used with color
  • Linear Light – Compares base to blend, if blend is lighter than 50%, resultant pixel brightness is increased.  If darker than 50%, brightness is reduced.
  • Pin Light – Compares base and blend, if blend is brighter than 50% grey, base pixels brighter than 50% grey are displayed,  If blend is darker than 50%, only base pixels darker than 50% are shown
    • this is a replacement mode, as opposed to a blending mode
    • has a higher tolerance when working with grey pixels
    • more striping in colors
  • Hard Mix – Forces composite colors to be fully saturated or fully luminous
    • no grey values, result is 100% white, 100% black, or 100% saturated color

Inversion Blending Modes

We’ve come so far and learned so much, there are only a few more blending modes to understand.  Lets continue on with the Inversion Blending Modes!

  • Difference – Creates a selective inversion effect, where black in blending mode is completely removed, white does a complete inversion (negative), and the rest of the greys and colors display negatively depending on the brightness value.
    • the brighter the base value, the more negative the resultant blend
    • similar colors are rendered in black
  • Exclusion – Also a selective inversion, where black is removed and white is set to completely negative, but greys are excluded in this mode
    • greys in the blend layer are left alone
    • similiar colors are rendered as grey
  • Subtract – Similar to difference in that black is removed, but white in the blend is rendered black.
    • only full black is rendered invisible
    • Subtract actually inverts colors in the blend layer and then overlays the result upon the base layer
  • Divide – Considered the opposite of subtract, divide removes white and changes black to white with greys becoming much lighter
    • blend colors are still inverted, but screened onto the base layer, as opposed to overlayed or multiplied like in the subtract blend mode
      • this means base color pixels get lighter

The inversion blending modes are often used for alignment purposes.  If you have two images in alignment, changing the top layer to an inversion mode will result in either a complete black or complete white (excluding exclusion, which makes grey), meaning the layers are aligned properly.  They are not used for artistic effect very often, but be creative!

Another common use is copy a layer onto itself and set the blend to divide.  Then, if you blur the image a small amount, you get a white outline effect.  If you blur it a bunch, you get s strong key effect which blows out the whites.

Component Blending Modes

Whew!  What a journey!  We are almost there!  This is the last set of blending modes, known as the component set.  Lets dive in!

  • Hue – This is your colorization layer.  Examines hue of the blend layer, then takes all base colors (not black, white, or greys) and changes them to reflect the hue color
  • Saturation – Takes saturation information from blend layer and applies that level of saturation to the colors in the base layer
  • Color – Another colorization layer, but much more aggressive, takes hue and saturation (the two aspects of color) and applies them to the luminous values of the base layer
    • unlike hue, color will affect the greys and whites of the base layer
  • Luminosity – Opposite from color, this detects the luminous values from the blend and applies them to the color values from the base.

Color and luminosity are known as commutative effects, in that they will produce the same results with differently ordered base and blend layers

Its Been Fun

Thanks for joining me on my exploration of blending modes.  I don’t often write up a conclusion to my notes, and I won’t begin now.  Have a great day!

Training Notes

Understanding the WordPress API

The WordPress API was intruduced some time ago to streamline the ways that we interact with WordPress servers.  I will be documenting my journey with the WordPress API, please come along with me!

To API or not to API

API’s are application programmer interfaces, which allow for the manipulation of data on a server through Hyper Text Transmission Protocols.  There are 4 primary HTTP methods (also called HTTP Verbs) that we must understand:

  • Get – Retreives information from the server
  • Post – Creates a new file on the server
  • Put – Updates an existing file on the server
  • Delete – Deletes a file from the server

Now that we know the methods to interact with the data, we must understand what the server is telling us when it responds to our interactions.  Here are the main Status Codes:

  • 200 – OK -Successful request
  • 201 – Created – File successfully created on server
  • 400 – Bad Request – Couldn’t complete the request
  • 401 – Unauthorized – User did not authenticate
  • 401 – Forbidden – User authenticated but is not allowed to perform action

Choosing Your Routes

Another important concept with API’s is an understanding of routes and endpoints.

  • Routes – Routes point to particlar resources
  • Endpoints – Functions that trigger actions upon resources
    • these actions can be any of the HTTP methods referenced above.

For Example:

A route to your posts on wordpress could be ‘/wp-json/wp/posts’ while the enpoints would be ‘GET /wp-json/wp/posts’ and ‘POST /wp-json/wp/posts’.  The first endpoint triggers a GET method which retrieves posts from wordpress.  The second endpoint creates a new post on the server, while also validating and checking authentication to ensure that the user is allowed to crate the post in the first place.

Another Example:

A route to a specific post (ID = 10) on wordpress could be ‘/wp-json/wp/posts/10’ while the endpoints would be:

  • GET /wp-json/wp/posts/10 – Retrieve the specific post
  • PUT /wp-json/wp/posts/10 – Update the specific post
  • DELETE /wp-json/wp/posts/10 – Delete the specific post

Important Point – Many API’s, including WordPress, treat POST and PUT as identical in that substituting POST for PUT in the previous example would still result in the updating of the specific post.

In these examples, we used a post as our resource, but these same methods, routes, and endpoints will work for any resource, be it a page, post, comment, image, etc.

Get Jumping with JSON

The WP REST API works heavily with JSON ( Javascript Object Notation ) as the format for data interchange, so we must be familiar with the JSON method of representing data.  It is simply a representation of a javascript object, with key – value pairs having the key representing the property name.

For example, a post object has the following keys:

  • id – Integer : {Value of Property}
  • type – String (e.g., post or page) : {Value of Property}
  • slug – String : {Value of Property}
  • url – String : {Value of Property}
  • title – String : {Value of Property}
  • title_plain – String : {Value of Property}
  • content – String (modified by the read_more argument) : {Value of Property}
  • excerpt – String : {Value of Property}
  • date – String (modified by the date_format argument) : {Value of Property}
  • modified – String (modified by the date_format argument) : {Value of Property}
  • categories – Array of category objects : {Value of Property}
  • tags – Array of tag objects : {Value of Property}
  • author Author object : {Value of Property}
  • comments – Array of comment objects : {Value of Property}
  • attachments – Array of attachment objects : {Value of Property}
  • comment_count – Integer : {Value of Property}
  • comment_status – String ("open" or "closed") : {Value of Property}
  • thumbnail – String (only included if a post thumbnail has been specified) : {Value of Property}
  • custom_fields – Object (included by setting the custom_fields argument to a comma-separated list of custom field names) : {Value of Property}
  • taxonomy_(taxonomy) – Array of custom taxonomy objects (these resemble Category or Tag response objects, depending on whether the taxonomy is hierarchical) : {Value of Property}

Important Note – When reading JSON, all string elements will be enclosed in double-quotes, which is the only method supported by JSON (while javascript doesn’t strictly enforce one or the other, with the exception being nesting).

Title and Content values are actually objects containing a property of “rendered“, then the value (title and post content).  The content will be a valid HTML string. Author will be a number referring to the ID of the author.  The categories and tags values are arrays of ID’s the refer to the category or tag ID’s.

JSON returns an array of objects that can then be manipulated at the endpoints.  Therefore, the only valid JSON data is a single object or an array of objects.

XXXML

The other popular alternative to JSON representation of data is XML representation.  It relies on XML tags to represent the key – value pairs.  The problem with XML is that it’s not as efficient and concise as JSON.

Access Your WordPress API

Each installation of WordPress has it’s own wordPress API, available at: domainName.com/wp-json/ .  Placing a get request through Postman returns the website information in JSON format.  We get the following data:

  • name – Website Name
  • description – Tagline for website
  • url – web address
  • home – url where the website is located, not always the same as url
  • namespaces – an array of all the namespaces that are registered by the WP REST API and all plugins and themes.  Namespaces are a way for plugins to avoid overwriting eachother when trying to run their code
  • authentication – array of all authentication methods supported by API
  • routes – lists all supported routes for the WP REST API
    • routes are listed as individual objects
      • inside each route objects are properties for route, including:
        • namespace
        • HTTP Methods
        • endpoints
  • Args – List of all arguments that can be passed along this route
    • take special note of argument datatype
      • if default property contains [], then argument type is an array and we can pass multiple values to it
      • if we have property called “enum”, then argument is enumerated type, so it only accepts predefined elements as valid values.
      • if otherwise, argument type is simple string
  • _links – An array of associated resources based on HAL (Hypertext Application Language)

Down the Rabbit Hole

We just explored the return from the index page, but what if we want to further explore each particular route and understand it’s methods and supported arguments.  For that, we send an options request to that route.  This returns an object with various properties:

  • namespace
  • methods – supported HTTP Methods
  • endpoints – supported endpoints

If we were to run an options request on the posts/ route, we receive 2 supported methods (GET and POST) and multiple arguments, including: (for GET)

  • context – scope
  • page – current page of the collection
  • per_page – number of items to be returned in result set
  • search – limit results to those matching a string
  • after – Limit results to posts published after set date
  • author – Limit results to posts assigned to specific author
  • author_exclude – Exclude posts from specific author
  • before – Limit responses to posts published before certain date
  • exclude – exclude specific post ID’s
  • include – limit results to specific ID’s
  • offset – Offset the result set by a specific number of items
  • order – sort by ascending or descending
  • orderby – sort collection by object attribute
  • slug – limit results to posts with specific slug
  • status – limit results to specific statuses
  • categories
  • categories_exclude
  • tags
  • tags_exculde
  • sticky

For POST

  • date
  • date_gmt
  • slug
  • status
  • password
  • title
  • content
  • author
  • excerpt
  • featured_media
  • comment_status
  • ping_status
  • format
  • meta
  • sticky
  • template
  • categories
  • tags

We also receive the schema for the particular resource.  The schema is a documentation of all the properties supported by the resource.

If you need to explore all supported routes for an API, you want to send a GET request to the index route.  However, if you want to further explore any individual routes, send options request to that route.