Parse.com

Screen Shot 2015-06-15 at 1.05.48 PMParse.com is a service that wants to provides a backend for your social media apps. It’s my opinion that Parse is the easiest and fastest way for designers to get into creating social media apps and web sites.

How do we do it now?

The standard method to create a social media app or web site is to create a database and access the database using code written in MySQL. You also need code written in PHP to facilitate transactions with MySQL and manage content from the database. Together this is called the backend. All of these processes happen on a remote computer, your web host.

To have something people can look at you use HTML, CSS, and Javascript. This is called the frontend. You use HTML to structure your web pages, CSS to style them, and javascript to add functionality.

Let’s sum that up. To make a web site that has social media features you need (from front to back):

  • HTMLStructures your data in the browser
  • CSS – Styles the content in the browser
  • Javascript – Adds functionality to the browser
  • PHP – Handles backend services and transactions with the database
  • MySQL – Stores and organizes data

Parse.com

Parse.com provides a service that removes the need for backend programming from the equation. With Parse all of the backend code is handled by the front end. Parse calls itself a: BaaS, which stands for Backend as a Service. The Parse service provides a ready made and hosted backend that can be used to build just about any type of social media app or web site.

Parse saves time by not requiring that you write backend code for creating and configure databases and tables. Parse provides ready made systems for managing user accounts and login. Creating a user login with Parse is as simple as creating the login or sign up form in HTML, CSS, and adding a few lines JavaScript.

For the record, I do not works for Parse and receive nothing from them. As an educator I see Parse as being the easiest way for students to make their social ideas into truly functional apps. For anyone else trying to make their social media ideas into real functioning work, Parse removes many of the roadblocks.

Who would benefit from Parse

Anyone wanting to get started making a social media network would benefit. Parse is well suited to small groups or individuals who want to get started making a social media site. If your skills are more frontend oriented, HTML, CSS, JS, then Parse will save you the trouble of learning PHP, MySQL.

Parse is targeted at startups and small teams looking to create new social media platforms quickly and easily. I see it as a perfect fit for students, as the focus of our students is on front end design and programming. Building an app with Parse moves all of the work of creating a social media app into the front end, and concentrates programming tasks into a smaller set of more familiar tools: HTML, CSS, and JS.

How does Parse work?

In short the Parse service works with Javascript. Essentially you create objects you wish to save in Javascript, and the Parse server takes care of the rest. To display data from the server you request objects from the Parse server through Javascript. Obviously there is a more to it than those two sentences, but not much more.

What kind of things can you make with Parse?

Any social media web site or App. Parse provides libraries code for Xcode, and Android. You can make mobile Application with much less effort, and I’ll say it again, without having to create a backend service, and database. Check out this page of customers using Parse:

https://parse.com/customers

Hello Kitty is using Parse!

 

WordPress – jQuery

WordPress will load jQuery automatically without you having to add the files yourself. I’ve seen a different methods, some of which do not always work. Here’s the method I use that seems to work reliably.

The following would be added to your functions.php file. If you don’t have a functions.php yet, create one, in your theme folder.

 

<?php 
function theme_init() {
	if (!is_admin()) {
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'theme_init');

 

Note! There can be no characters, this include spaces, or extra lines, in front of the tag. This is good practice. Extra characters outside of the php tag will cause the server to create HTTP header and send it to the browser before WordPress is ready.

If you already have a funtions.php file in your theme, you can add the snippet above, without the <?php.

WordPress loads jQuery in “No Conflict” mode. This means that jQuery will be accessed through the variable jQuery rather than the $. To work with this easily, set up your document ready actions like this:

jQuery(function($){ // Notice the $ here!
	$("#box>div>div").eq(0).siblings().hide();
	$("#box>ul>li.slide-thumb").click(function(event){
		var index = $(this).index();
		$("#box>div>div.slides").fadeOut(400).eq(index).fadeIn(400)
	});
});

Notice here, that jQuery (note the uppercase Q!) replaces the $ outisde the ready function. While inside the function I’ve used the $. This is possible by including the $ as a parameter to the function inside jQuery(function($){}). Placing this variable here allows jQuery to assign itself to this name, so inside of the function you can use that variable in place of jQuery.

PHP – If statements

Most programming languages provide a conditional statement of some kind. PHP provides an if then else, the syntax of which is very similar to Javascript and other languages. In PHP the if statement has a few extra features.

Let’s start with the basic if statement.

if ( condition ) {
  // code block
}

Here if the condition is  evaluated to true the code block is executed. You can add an alternative code block that will be executed if the condition is evaluated to false.

if ( condition ) {
  // code block true 
} else {
  // code block false
}

Here the the second code block is executed when the condition is false.

Here’s a couple real world examples.

<?php 
  if ( isset($_GET['category']) ) {
    echo $_GET['category'];
  }
?>

In this example if the variable $_GET[‘category’] has been set the value is printed to the page.

We can add an else to this:

<?php 
  if ( isset($_GET['category']) ) {
    echo $_GET['category'];
  } else {
    echo "Category not set";
  }
?>

Here if the $_GET[‘category’] variable is set, then it is printed to the page, otherwise (else) the message “Category not set” is printed instead.

Since PHP is an html embedded language you will often find that you want to print HTML and other text to the page as part of the if and else. Using echo is okay in some cases. Fo example:

<?php 
  if ( isset($_GET['category']) ) {
    echo "<p>" . $_GET['category'] . "</p>";
  } else {
    echo "<p>Category not set</p>";
  }
?>

In other cases the situation gets more complex. For example imagine that you are check if someone is logged in, and if not you want to display a form:

<?php 
  if ( isset($_GET['loggedin']) ) {
    echo "<p>Logged in:" . $_GET['username'] . "</p>";
  } else {
    echo "<form>
<input type='text'>
...
</form>";
  }
?>

Printing the form using echo is awkward. I didn’t write the entire form above, use your imagination, it can get a little ugly; worst of all everything is inside the quotes so you don’t get any color coding or other help from you editor.

In these cases there is a better way. PHP allows you to close PHP and reopen the PHP tag anywhere. Here’s an example:

<?php 
  if ( isset($_GET['loggedin']) ) {
    echo "<p>Logged in:" . $_GET['username'] . "</p>";
  } else {
    ?>
<form>
<input type='text' name='username'>
<input type='password' name='password'>
<input type='submit' name='submit'> 
</form>
  <?php } ?>

Here we exit PHP after the else statement, so the form can be written as standard HTML. Not that that the if statement has the it’s complete syntax within the <?php ?> tags. The lone } looks a little odd inside of <?php ?> on the last, but this completes the syntax so everything is okay.

Alternately you could write the same statement above with this alternate syntax.

<?php 
  if ( isset($_GET['loggedin']) ) :
    echo "<p>Logged in:" . $_GET['username'] . "</p>";
  else:
    ?>
<form>
<input type='text' name='username'>
<input type='password' name='password'>
<input type='submit' name='submit'> 
</form>
  <?php endif; ?>

PHP Basics: Functions

Functions in PHP

PHP allows you to write functions similarly to the way functions are written in other languages. Functions in PHP provide the same advantages that they provide in other languages also. Functions provide a way to encapsulate a block of code so it can be reused as often as needed. This allows you to avoid rewriting the same blocks of code over again. Which makes your job easier by writing less code. This also keeps your from having to write similar or the same block of code more than once.

Continue reading PHP Basics: Functions

PHP MySQL and Special Characters

You may find that you have a problem with special characters not displaying or showing up as a small black diamond with a ? in the center. Here’s a quick fix seems to work well.

These would be characters like: <, > and &. It also includes characters like: é,?, ø and the curly quotation marks.

At the point you are printing these characters into a page you’ll want to run them through the php htmlentities function. Here’s an example:

htmlentities( $str, ENT_COMPAT, 'Windows-1252' );

Where $str would be any string you wanted to convert to compatible characters.

For more info: http://www.php.net/manual/en/function.htmlentities.php

Doodle

Here’s an app I thought up the Firday. I managed to “finish” it up after dinner Friday and and with a few spare hours Saturday. I put finished in quotes, because it’s not really finished. There’s a still a lot to do. I did manage to mock up the basic ideas and get them all working.

http://newmedia.academyart.edu/~mhudson/doodle/

So what’s the idea anyway? Anyone can make a user account, login and create a small drawing, and then list all of the drawings that have been created. My idea was to create a sort of Twitter for the visual set. Instead of typing a short message of the moment. You can draw a small picture of the moment, and post it for everyone to view.

The basic functionality works now, but to make this really useful will require more features. At this point you are viewing all of the drawings in the database. The real idea is to show only drawings from people that you feel like seeing.

Kimili Flash Plugin

Testing the Kimili Flash plugin for WordPress. It seems to be working pretty well so far.

[kml_flashembed movie=”http://webdevils.com/examples/Make3d/3D_03.swf” height=”300″ width=”300″ /]

Interesting to note that the plugin is supposed to work with Flash anywhere it appears. So you can use KimiliFlash to put Flash into your header or other areas of your site.

Another interesting item is that the Kimili plugin uses SWFObject: Javascript Flash Player detection and embed script which is XHTML valid. The default Flash HTML code written by Flash and Dreamweaver will not validate.

There is an article about this on A List Apart.