This Chapter will cover:
- Using editable_html and editable_image
- Overview of Filters as a tool to transform data outputs
- Overview of basic syntax for markup code: tag, data set, attributes, values.
Chapter 1: SML Platform Basics
Involver’s SML development platform uses HTML to structure content, CSS to style content, and SML to insert content and bring functionality from various applications. You can also use custom Javascript to add functionality and customize behaviors.
SML is a hosted solution - Involver stores data for feature blocks, form submissions, and assets on its servers. We boast superbowl-level scaling (literally, we built the Facebook page for the Superbowl) so even if your page or tab goes massively viral it will not go down.
This first chapter will show you how to use HTML, CSS, and SML together to build a very simple page and localize your assets onto our servers.
Chapter 1.1 - Hello World
The most basic type of content for the web is text inside of HTML. Let’s drop some text, wrapped with the HTML header tag into our SML tab
<h2>Hello World</h2>
Now save your changes and open the front end of the page in another tab in your browser. You can see that the text appears there exactly as you’ve typed it.
Adding HTML to structure the content works exactly the way it would in a regular html page. The only difference is you don’t need to define doctype and define a header or body. Everything goes right in the SML tab. If you want to add CSS you can just drop it in at the top of the tab, like so:
<style>
h2 {color: red;}
</style>
<h2>Hello World</h2>
As one would expect, the CSS simply restyles the HTML element. JavaScript works the same way, you simply drop in your <script> and </script> tags at the bottom of the editor window and write your JavaScript in there exactly as you normally would.
This brings us to an important point - all of the front-end tools you would have on hand to develop directly are available within SML, you don’t lose anything by using our platform. Even if you didn’t use a single SML tag it would be worth using our platform just for the scaling and stability we offer. That’s especially true when you start adding in images.
Commenting your code
Commenting is a critical part of any markup or programming language since you need to be able to document your work in order to make it intelligible. There are two ways to write comments in SML.
Block comments:
{% comment %} this is an example of a block comment,
it can be multi-line
and have formatting to make it easier to read.
You can also use it to comment out blocks of code.
{% endcomment %}
Single-line comments:
{{# This is an example of a single-line comment. It cannot include line breaks or formatting or other tags. }}
In both cases, the commented text is swallowed when the page is sent to the server so it will not appear in the source code rendered by the browser. SML also supports html, css, and javascript commenting if you want to show comments that will render to the DOM.
Adding Assets to SML
Let’s add a basic image to our page using the SML editable_image tag.
{% editable_image name:"my_image" %}
Image hosting for social networking sites is usually a pain. Since you can’t store the files on the network, you have to instead host them on your own server and remotely link them to your tab. This causes several potential problems.
The images created with remote linking are vulnerable to breakage - if they get moved or your site goes down they go down as well. This is particularly bad because the first place people are likely to go in the event of a site outage is to your social networking pages to get updates on when you’re going to be back up. If your critical image assets are down when they get there your outage looks even worse.
Images stored remotely require absolute paths to store them. If you want to replace them you have to upload new versions to your content delivery network, copy the new paths, find the old one s in your code, and replace them for every instance of the image.
Social media traffic doesn’t tend to move in smooth lines. If your promotion is successful and goes viral you could easily see a huge jump in hits in a very short time. If you’re hosting the images that puts a strain on your server and increases the risk of outages. Users browsing Facebook in Secure mode will be unable to see remotely hosted images whose urls are not formatted in https mode.
The SML platform solves all four of these issues. Localizing your images with the editable_image tag provides a layer of abstraction that will allow you to insert the image (and potentially an associated link) into your page quickly and easily as many times as you want. To replace that image you simply return to assets, click edit, and upload a new image to dynamically replace every instance of the image on your tab without having to ever touch code. This provides a valuable tool for brand managers and clients who need to be able to update tabs quickly and easily but aren’t capable of going through your code and editing it themselves. Localizing your assets onto our platform also means that you no longer have to worry about usage spikes or hosting issues and secure and nonsecure versions of the links are automatically created so your content is available to users in either mode.
Let’s take a moment to take this tag apart and understand the syntax.
The first thing is that all Tag Markup in SML uses {% and %} to denote the beginnings and ends of tags. The SML tags themselves are written out in plain English and their names correspond to their function so an editable image is simply editable_image. The tags are always all lowercase. Attributes, such as the name of the image to be called, are simply listed inline after the tag using the syntax attribute:"value" for string values and attribute:value for boolean and integer values. This is virtually identical to the way you set attributes in HTML, except with : instead of an = sign. You can stack multiple attributes in the tag by listing them. So if we want our editable image to only output the src instead of the full image we would use:
{% editable_image name:"my_image" src_only:true %}
We could then take this image path and drop it into our CSS to set it as a background image (for example).
<style>
.some_div {background: black top left no-repeat url({% editable_image name:"my_image" src_only:true %}); }
</style>
<div class="some_div">
Content Goes Here
</div>
The second type of Asset in an SML tab is editable_html. You can use the editable_html to create and insert customizable chunks of HTML, Javascript, or plain text. The configuration menu even offers a fully-functional wysiwyg editor so brand managers and others who don’t know code can easily reformat and modify the chunks of text being inserted.
{% editable_html name:"my_text" %} creates the call to the asset. That call won’t do anything, of course, until after the asset is configured so let’s do that.
Chapter 1 Review
In this chapter we’ve discussed the role of SML in your development process reviewed the main strengths of the Involver development platform, talked about managing assets like editable images and editable html and why localized assets are preferable to remotely hosted assets given a brief overview of the two main types of markup in SML and worked with basic examples of each.
We’ll be diving into the various SML applications soon, but first lets talk about Variables.
