Categories
Online Marketing

Writing for the web: content templates

One of the things I do is something called content templates, where I come up with a structure for the text, especially for repeated items. Now we’re going to work backwards in this article because it’s easier to learn when we’re going backwards. But most often, if I was going to do a Content template for this page, I probably wouldn’t actually have this piece of information designed.

Yet I would start with the content template and come up with my template. First, before I design and wire frame this the page, but we’re going to work whack backwards, because it’s a little bit easier to understand the process. So what I’ve got here is this is one photo of many photos taken by new horizons and there’s a very specific structure to this. If you scroll down, you can see here’s another photo and they’ve all follow a very, very similar structure.

It’s almost identical! So what I want to do is I want to come up with a template for this content. The great thing about coming up with these content templates is that, from a development point of view, then we have something to base our development on. We know which pieces are going to be repeated and we know that we can then use repeated, CSS and repeated HTML, and we can use code, generators and stuff like that and templates to actually make our site less duplicate.

I it’ll have less duplicated code, so we’re going to make a Content template from this. Now I’m going to start here. This is an image. Basically, this content is all about this image and you can see right here. It has a title, so I’m going to go in I’ve created a new markdown document and I’m going to start i’m going to use yamel and mark down to make my content template. There’s a article series on that on learning both of those things.

So I’m going to start by putting the title in here like that, so that’s first, I came up with an entry name for this thing. If you’ve done any programming, this would be like a variable. I’ve called it title and then I’ve pasted come up with there’s the title sort of thing, so you can see here is a date. Let’s say that that’s published the day that this was published. So I paste this in here. But for me this is a human, readable format and I’d want to convert this to a computer, readable format, so we’ll use oops, okay, we’ll use sort of a standardized version like that.

So we’ve got now the date in here the publish date. So you can see. There’s an image so we’ll go image: what’s this called global mosaic global mosaic, so there’s the image as part of this content template what else is there on here? So we have this little paragraph of text, I’ll copy copy that and paste it down here. So it’s at the bottom, in the markdown area and at the top here I’m doing yamel stuff very structured.

This here is just a hunk attacks, so it doesn’t really have that much structure and it makes sense for it to be down here. What else do we have? So we have a credit here like this, so we’ll go credit like that. We have last updated July, thirtieth, updated 2015. 07. 30. Now I like to keep my dates together, so I’m going to put this updated date up here. Next to the published one editor: okay, let’s put editor in here – editor like that, and the last thing that I can see right here is tags, so go tags now this is actually a list of stuff, so it makes sense to use a yam a list for This information, like this so I’ll, go and just put these things in here.

Alright, so here is the structured version of this piece of content this. If we look through all of these images, it seems to fit all of them. This one has a bigger description, but it still only has tags bigger description tags. If we keep going see if there’s any differences, if we missed anything, doesn’t really look like it. I can’t seem to find anything out what about this one here, no okay! So there we go so that’s a Content template for one of the photos that nASA released.

So we would do this first and then it gives us an idea of all the information that will be used for each photo on the site. Now I’m using this application here to do it, but I could have done it in my code. Editor. Let me just drag it into sublime text here here. You can see it inside of my code. Editor look so basically the same. I get a little bit more syntax, highlighting if I change to a different markdown processor like this, which is cool, but when it comes to content templates, it’s not terribly necessary for you to write it in any specific application.

https://m.youtube.com/watch?v=5Dj-37aSrj8


 

Jimmy Dagger's avatar

By Jimmy Dagger

Find out my interests on my awesome blog!

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.