OC WordCamp 2015

*******Sessionssessions********
Join Jarrett Gucci in the Salt Creek Trail room at 3:40 PM for his talk Creating a Blogging Schedule Using The 20/30 Rule.

Jarrett developed a method called the 20/30 Rule to determine how many posts in a time period that a person should write for their blog to help take it to the next level.

The two things that many people say holds them back from blogging more is time and feeling unsure about what topics to cover. Jarrett’s presentation will address how to overcome to time obstacle to blogging.
ocwc2015

Nam finibus nec lorem et consectetur. Suspendisse ullamcorper, neque vel blandit lobortis, magna enim ultrices ipsum, vitae iaculis risus eros ut neque. Pellentesque eu pellentesque tellus. In et urna dictum ipsum fermentum vestibulum. Aliquam tempor sapien nisi, vel condimentum lectus vestibulum quis. Aenean ante enim, feugiat ac elementum at, aliquet vitae nibh. Nulla ullamcorper scelerisque orci id sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed molestie nulla et est hendrerit ornare. Suspendisse dignissim metus a tellus vulputate euismod. Ut eu ullamcorper leo, in semper tortor. Pellentesque bibendum ante at sem cursus rutrum. Sed eget accumsan nunc, sed consequat ante. Aenean eleifend vulputate lobortis. Ut nec tortor placerat, consectetur felis in, accumsan ex. Cras orci ex, sagittis sit amet iaculis non, malesuada id purus.

Proin et tristique ipsum, tincidunt posuere dui. Nulla tincidunt ut lectus ac condimentum. Nullam lobortis vehicula ocwc2015vestibulum. Proin bibendum, massa et fermentum scelerisque, nisl lacus pellentesque nulla, vel ultrices tortor neque et quam. Vestibulum augue odio, imperdiet et eleifend ut, rutrum et arcu. Etiam tempus lectus et dapibus egestas. Donec vestibulum in sapien eget iaculis. Donec finibus egestas fermentum. In maximus nulla a enim aliquet placerat. Duis sed pulvinar dui.

first set 574
Find out more!

Quisque laoreet dictum enim, at venenatis risus facilisis tincidunt. Donec blandit lacus vitae neque iaculis, vel finibus felis placerat. Nullam maximus quis metus vitae faucibus. Fusce quis vestibulum nisi. Proin lobortis ligula vitae lorem cursus, sed auctor velit pretium. Aliquam erat volutpat. Ut nunc quam, commodo in lectus ac, luctus fringilla purus. Curabitur id lobortis sapien.

first set 513
first day of school

ocwc2015

WordPress 10th Anniversary

“We’re looking to create the largest streaming party of WordPressers in the history of WordPress! Join us as we celebrate WordPress turning 10. FREE food and drinks, plus music, prizes and a photo booth!

Most importantly, we’re inviting every WordPresser in all of Southern California! So help get the word out and get everyone over here!” More……….

Agile Design

Spend less time on things you don’t want, more time on things you like. Chris Ford, of Creativity Included, decided to do just that and changed her entire work flow. No longer working with PSD’s. With the ever complicated world of mobile design, psd’s become very time consuming, Chris explained. A two hour change on each psd, becomes easily 8 hrs and so on.

Bring in the Agile Design. Working with clients with wireframes, like Balsamiq, and typecast to share the development process. Chris has brought her process to work for her. Giving her back control of her time. Check Chris at Orange County WordCamp, Sat June 1st, present Agile Design.

style tiles
Find out more!

Chris shares her resources and techniques to streamline her work flow.
Agile Designers

Agile Designers

Edit CSS on page in REal-time

CSS real-time page editing was covered in detail at last night’s general WordPress Meetup led by Steve Zehngut. Using Chrome’s inspect tool, element’s css styles were displayed on page with on page edits being done in real-time. Also, with it hooked up to your local dev environment, the real-time changes can be saved to your css files. So convenient!

Here’s where you can learn to do it:
code school dev tools

To see Steve in action: watch it

Chris Ford on WP Watercooler- EP31


Catch Chris Ford, Jeff Zinn, and other fine members of the WordPress community on this episode of WPWaterCooler featuring the Design Process married to the Dev, combining the two deeper beyond PSD’s. Chris will be here at OCWP Design, May 6th, Monday 7pm @Zeek’s in Huntington Beach.

Hear the experts discuss the latest techniques for making work flow and client expectations efficient and have the best results.

jQuery Local Scroll flesler’s

The problem: A long list of information on a page. Solving by adding same page anchors, causes page to jump to the top on the screen.

The solution: Using jQuery, the page can elegantly scroll to the position of the desired text without the rest of the page moving, just the targeted content area scrolls.

Here’s how using proper enqueueing, setting up the jQuery function with WordPress in mind, and where to place what where in WordPress:


See it in action on the topics page; second navigation links.

Add the enqueueing either to your page template file (in the header section) or functions file.

found a better way than hard coding the path to the jQuery file that will give the path to the child theme js folder (thanks to Brandon Dove), which uses get_stylesheet_directory_uri()

for parent theme directory use get_template_directory_uri()

 /*flesher*/
function lll_enqueue()
{
wp_register_script( 'scrollTo.min', get_stylesheet_directory_uri() . '/js/scrollTo.min.js' );
wp_register_script( 'localScroll.min', get_stylesheet_directory_uri() . '/js/localScroll.min.js' );
wp_register_script( 'topic-scroll', get_stylesheet_directory_uri() . '/js/topic-scroll.js' );

wp_enqueue_script( 'scrollTo.min' );
wp_enqueue_script( 'localScroll.min' );
wp_enqueue_script( 'topic-scroll' );
}

add_action('wp_enqueue_scripts', 'lll_enqueue');


We are using flesler’s jQuery local scroll for the action effect.

go to https://github.com/flesler/jquery.localScroll and get jquery.localScroll.min.js
go to https://github.com/flesler/jquery.scrollTo and get jquery.scrollTo.min.js
save as localScroll.min.js and scrollTo.min.js

Those files do not need to be touched. The file that needs to be created, we will name topic-scroll.js


To create topic-scroll.js, you need the code on flesler’s localScroll page. This snippet right here:

$('#navigation').localScroll({
   target:'#content'
});

We are creating a js file, specifically topic-scroll.js, and changing out the id’s for the page id’s that we are using: #topic-btns for the navigation area (replaces #navigation) and #topics-col for the content area targeted (replaces #content). We, also, are including settings value for the duration attribute, duration:1000.
Here’s what is on our topic-scroll.js file

/**
 * Handles scrolling for new topic page
 */

 /* using localScroll
  @example $('ul.links').localScroll();
  @example $('ul.links').localScroll({ filter:'.animated', duration:400, axis:'x' });
  @example $.localScroll({ target:'#pane', axis:'xy', queue:true, event:'mouseover' });

  // Many of these defaults, belong to jQuery.ScrollTo, check it's demo for an example of each  option.
	// @see http://demos.flesler.com/jquery/scrollTo/
	// The defaults are public and can be overriden.
	$localScroll.defaults = {
		duration:1000, // How long to animate.
		axis:'y', // Which of top and left should be modified.
		event:'click', // On which event to react.
		stop:true, // Avoid queuing animations
		target: window, // What to scroll (selector or element). The whole window by default.
		reset: true // Used by $.localScroll.hash. If true, elements' scroll is resetted before actual scrolling
		/*
		lock:false, // ignore events if already animating
		lazy:false, // if true, links can be added later, and will still work.
		filter:null, // filter some anchors out of the matched elements.
		hash: false // if true, the hash of the selected link, will appear on the address bar.
		*/

jQuery(document).ready(function($) {
		$('#topic-btns').localScroll({
    target: '#topics-col', duration:1000
					});
});


The js files follow the path:
/WordPressNotes/wp-content/themes/pilotfishchild/js
generically /wp-content/themes/yourtheme/js

Place .js files in the js folder.


On the page where the action is taking place include anchor id’s to the sections that you’d like the navigation to move to and attach the id to the nav button, a href=’#response’. Also, be sure to name your div id for your navigation, topic-btns, and the area div id that you’d like the movement in, topics-col. I didn’t include the css styling.

</pre>
<div id="topic-btns">
<ul class="sub2">
	<li><a href="#response">Responsive Web Design |</a></li>
	<li><a href="#type"> Typography |</a></li>
	<li><a href="#ux"> User Experience Design |</a></li>
	<li><a href="#child"> Creating a child theme</a></li>
</ul>
<ul class="sub2a">
	<li><a href="#content">Creating effective Content Strategy |</a></li>
	<li><a href="#html5"> HTML 5 projects |</a></li>
	<li><a href="#css3"> CSS3 |</a></li>
	<li><a href="#cc"> Chirs Coyier</a></li>
</ul>
</div>
<div id="topics-col">
<div id="response">
<h2>Responsive Web Design</h2>
-mobile layouts</div>
<h2 id="type">Typography</h2>
<h2>UX Principles</h2>
<h2 id="ux">User Experience Design</h2>
<ul>
	<li>-visual design</li>
	<li>-interaction design</li>
	<li>-information architecture</li>
	<li>-development</li>
	<li>-technology</li>
	<li>-content/media</li>
</ul>
<h2>What are our favorite websites</h2>
and why do we love them?
<h2>Conversion</h2>
A/b testing
********
<h2>Planning phase</h2>
<h2>Creative process</h2>
<ul>
	<li>-surviving the creative process</li>
	<li>-how to avoid creative burnout</li>
</ul>
<h2 id="child">Creating a child theme</h2>
<h2 id="content">Creating effective content strategy for your website</h2>
<h2 id="html5">HTML 5 projects</h2>
<h2 id="css3">CSS3</h2>
<h2 id="cc">Chris Coyier</h2>
...</div>
<pre>

CSS3 with Suzette Franck

On April 1st, we had the pleasure of Suzette Franck presenting CSS3 for beginners. We were walked through a world of color, movement, and tricks like how to make rounded corners so easy breezy. Suzette fielded many questions and provided quite an interactive presentation. It is always a treat to have Suzette present. Nominate Suzette for speaking at WordCamp San Francisco 2013

Topics covered included animations, transitions, transformations…

More CSS3 goodies can be found at SuzetteFranck.com/css3

Cast your vote for the sites you <3

Typography – 3 Featured Fonts

Typography is coming back BIG in 2013. Literally. Be ready to see new BIG size type styles featured on pages throughout the web. Googlefonts has made it easier than ever to add a different font style than the standard 5. Although, I still love me my Verdana. So let’s go over some different typography available today, ready and waiting to be placed on a site right now.

The first contender on the Typography is Oswald.  It makes me nostalgic. Brings me back to what I imagine California was like in the ’50s before traffic and southern California was considered farmland with Tinseltown thrown in. I want to buy some popcorn and go to the movies to see Gone with the Wind or some other classic, Breakfast at Tiffany’s.

Oswald

Oswald buddies:

Oswald_Lobster

Oswald_Droid_Serif

Oswald_Raleway

Next up in our featured font extravaganza is the uplifting font Oxygen. Oxygen is perfect for parties, happy events and premiers. It spills excitement and fun. This is an exciting font!

Oxygen

Great Oxygen pairings:

Oxygen_open_sans_condensed
oxygen_ubuntu

Oxygen_crushed

The next font on our magical journey is…Marcellus SC
Marcellus SC is good for making a point. Want to get something important across to your audience, use Marcellus SC. Strong and to the point, just like writing should be.

Marcellus

Goes good with…

Marcellus_SC_&_Alegreya_SC

Marcellus_SC_&_Aquafina_Script

Marcellus_SC_&_Abel

 

Stay tuned for our next installation on Typography.

1 2