Drupalcon 2015 Moves to Headless Drupal

There were a couple sessions at Drupalcon 2015 about headless Drupal and the move from web pages to web applications.

The first session in this ilk that I attended was Decoupled Drupal: When, Why, and How.  This was the introduction to setting up Services in Drupal especially in Drupal 8.  The presenters showed, although there is not a standard “Drupal” way to build headless Drupal, they showed that using the RestfullWS module you can build a complete interface to Drupal using another front end.  They are proposing that we standardize on a “Drupal” way to do this.  One of the presenters went to the Angular conference last week where they were building amazing front ends or web apps, but they did not consider the back end.  One of Drupal’s strengths is the administration of a CMS, things like reseting your password are tried and true, if you use Drupal int he backend these are done for you with little effort.

A similar presentation was Angular with Drupal 8, in this session it was presented the idea I presented before.  We need to start thinking about building web apps, applications that run in a browser or on a device that gets content as needed from the back end, rather than this one system that builds the pages and presents HTML pages.  Angular pages are a single web page that will get new content and present it to the user as requested.  The present an interface that is much closer to the user, giving a better experience.  It also means that you may not need as much from Drupal.  Currently if you want to include a map in Drupal you install a module that interfaces with Google Maps to present a map.  With Angular all you need to do is present the geo location (address) from Drupal and Angular can go to Google to get the map information.  Drupal can be less dependent on modules, Angular gains by not having to invent an admin interface to your back end components.  They presented a new concept API first design, when you create a Drupal site you first create a clean API that can be used by mobile apps, and other front end systems.  Then if you need to you can develop a web interface as well.  Angular is not the only front end tool in use.  It is currently the hot new tool but there are other frameworks are good as well.

I think it would be wise for us to consider this in future development.  We are already using Drupal’s services module to drive our app, so we are started in the correct direction.


DrupalCon 2015, the battle for the body field

At DrupalCon 2015 the first session I attended, was one close to my heart.  You can watch the session here.

The problem is trying to figure out how to give your content creators the functionality in a website to create the content they want to create and have a good website.

Normally the first solution is to use the “body” field, and turning on a WYSIWYG editor and let the content creator edit what they want.  The problem is that the WYSIWYG editors are not the best to use, and HTML is not the easiest thing to create the desired output.  So the content editors are frustrated trying to create what they want, and the output may look ugly and the HTML is pretty ugly as well.  Many times you loose consistency and will loose any responsive or mobile designs.  There is an example in the presentation where New York Times, Snow Fall article, which was great and compelling but cost $250,000 to produce.  So the presenter wanted to figure out how to do this with the Drupal tools we have on a consistent basis.  The developers figure it they can just structure the content with all the little bits and pieces we can assemble the desired output together.  If we can just get all the bits and limit the HTML tags that can be entered or use markdown we can solve this problem, but there are some things missing that allow for the content creators creativity.

To solve this the first step is to define a vocabulary about the content.  This will include the atomic elements of the structure (like a Call Out field) and must also have some usage characteristics, like that it will randomly be aligned within the article, it may contain a attribution and how it is to be formatted.  Also that we want to vary the formatting a bit on a per article basis.

Now you can find a way to define the components you want and create a way to indicate the location of this element in the article.  Then you can transform the content you save to the content you want to display.

I think this is a good definition of the problem we are trying to resolve.

Another option was mentioned Paragraphs which was covered later in the day.  Better Tools for Content Creators

Paragraphs can be used to allow you to intersperse your content with other content.  This is similar to the discussion above but it works best when your content is small blocks of content rather than long narrative text.  This is similar to what Marquee does, in Marquee each paragraph is separate, you can insert things between paragraphs like images, callouts etc.  If your content is small self contained blobs of content this technique works well.  I think this would work well for landing pages.

Tools to build a website

As we discussed before a website is a series of HTML pages.  This is a little simplification, there are several components that make up your HTML pages.  

  • First you Hyper Text Mark Up Language.  HTML contains tags.  A tag is made up of a word or series of words inside <>, this tag is the closed with a tag that contains the same work preceded by a / (example <h1>Headline</h1>.  The text between the opening and closing tag is effected by the tags.  In the example the h1 tag is the top most “headline” tag, so this means the main headline of the page is Headline.  These tags can also simply mark the text for some particular purpose.
  • CSS (Cascading Style Sheets) – HTML contains attributes that allow you to style the HTML element, but this can be messy.  If you style in HTML you need to maintain this style every time you change the HTML.  CSS allows you to separate the content from the style.  Basically with CSS you can associate a style with an HTML tag.  You can tell the web browser to apply a particular style to all h1 elements.  In practice most of the time you use the ID or Class attribute of the tag to apply the style.  A normal example is that you would assign a font style (like verdana), size (like 12 px), color (like dark grey) and background color (say white).  Then you will assign that your H1 tag should be larger (like 20 px).  The h1 text will inherit all the color and style attributes and change the size to 20 px.
  • Java Script – Java is a programming a common programming language.  All modern web browsers have the capability to run a specific part of this language called Java Script.  This language allows you to make changes to your HTML programmatically.  Java Script allow you to add interactivity to you static HTML page.  Say you want something to happen when you click on something on the HTML page.  All HTML can do is ask the server for a new page, which can take several seconds.  If you make this same effect take place in java script in the browser you can make it happen quickly to get the interactive feel.

 There is more to most websites that simple text, They will use CSS to maintain a consistent style and Java Script to make the page more interactive to the user.

One other thing to keep in mind with webpages is that web servers are stateless.  What this means is that every time you request a web page it is like you are asking for it the first time, the server does not maintain any state of any previous pages loaded.  A well planned application will change things based on what the user has done in the past.  To get this interaction web servers can request and store information with the web browser in two main manners.  

  • The web browser maintains a session variable.  Part of the interaction of between the web server and browser includes communicating the contents of the session variable.  This variable is destroyed when the web browser is closed.  When you visit a website the session is considered open until you close you web browser.
  • There is also a permanent storage the web browser maintains called Cookies.  Many times you go to a site and place things into you shopping cart.  Then you close your browser and go back to the site 2 days later and your items are still in the shopping cart.  Your shopping cart is stored in the cookies.

Cookies and sessions are sensitive areas.  Many are concerned about something being stored about you with out your knowledge.  One of the common usages for Cookies is to store your userid on a private site (one that requires you to login).  Then when you visit the site you will be automatically logged in.  If your are only concerned with privacy, that is keeping the information private and not keeping information secrete, such as a banking site, this is an accepted practice.  The cookie is kept in the browser, you are not “logged in” to the server but the cookie allows the server to log you in when you return.  This is kept in the browser so it will not work in a different browser on your machine or a different machine.  Governments are starting to be concerned with privacy of cookies and sessions.  Currently the EU requires you to get permission to store any information before hand.  This can be an issue because many time the programmer expects this type of storage to operate properly.

How do you build a website

This is a pretty open question.  I will answer this with a little description of how people get started.

Normally when someone or a company wants to build a web page they start by registering a domain name.  You want a name to find your site.  I will cover this blog in a little later, but normally you want your name or your companies name to be prominent in your web structure.  A domain name is some name like PopRocks, or Pauls-Ideas or Google followed by a domain suffix.  These names can not contain spaces, and shorter names are better, someone will have to type in your domain name to find your site.  Originally the suffixes were .com for companies, .net for networks of computers and .org for non-profits; but recently there have been many new domain suffixes, like .info, .name, and locals like .la.

Originally you purchased your domain name from a domain registry then you would find a web host to host your website on the Internet.  Of course the marketers realized you would like to do it all in one place.  Most professional developers like to select their hosting company not simply take what is available so they keep these separate.  Network Solutions offers to host your website and hosting companies like GoDaddy will give you a domain name if you host with them (the price is really built into the price of the hosting).  If you want to start hosting with GoDaddy and get the free domain hosting, or use Network solutions to host you site go ahead, just realize you may want to change later and it may be difficult.

There is nothing magic about a web server and a website.  A website is simply a series of HTML documents that a web server provides to your web browser.  Your web browser simply renders the HTML as a web page.  It gets a little trickier if you want to make things work automatically, then you need to add some programming like java scripts or server side programming.

So you have your domain setup to point to your web hosting you purchased.  Most of the inexpensive hosting systems will provide you with a web server and templates of common websites.  This works you simply fill in the information about your specific company and you have a website.  You may be able to edit the HTML within the template or may want to simply edit your own HTML, you can use CSS to format the screen and some basic java scripts to make your page nicer.  This starts to become a problem if you have more than about a half dozen pages or if you want more than one person to maintain your webpage.  A web master or web editor learns tricks as they go along to make things work better, when someone else changes things is has a tendency to break things on your web page.

One solution for this is to use one of the free or low cost Software As A Service companies.  For this blog I am using WordPress’s SAAS solution for a personal blog.  It is free with in limits.  You will notice that the name is paulfcoleman.wordpress.com, this is not my domain name but WordPress’s domain name, I am limited to only a few themes and modules to use.  If I want a real domain name I have to pay for it, or if I want some extra features I have to pay for it but the basics are free.  There are many of these for differing costs.  These work well for their purpose but there are limits, you may find that you want more features than these limits allow.

Most of the inexpensive web hosting plans allow you to easily install open source systems to generate web pages.  These are blogging systems. CMS systems.  Things like WordPress, Joomla, Drupal, PHPBB and many more.  These systems are usually open source systems that generate HTML pages for you.  You edit the content and the system takes care of making the HTML for you.  There are templates you can use to get the display you want all you have to do is enter your content.

Pretty easy stuff, you select how you want to build your website and you are all up and running with your website.  Now you one of the millions and millions of websites and blogs on the Internet.  If all you want is to write your blog or get your ideas out your are up and running, but if you want people to find your website and use some unique techniques to make your website one of the great sites on the web stay tuned, this are the things I will be discussing here.  This is my attempt to explain the things I have learned over the last 8 years of web building.

History of the Internet and Web

The Internet started as a network to allow for communications between defense department researchers.  They needed a way to communicate via what became known as email, then they would post their findings in reports on the Internet.  The Internet was a series of Unix computers connected together.  The speed of the connection was slow but the researchers were communicating using text which does not need fast connections between computers.  For these researchers to communicate they would send email messages back and forth and give the address of the document they wanted to share.  This was an IP address which is 4 octal numbers separated by periods then a slash character, then name of the folder and the name of the file you wanted to share.  An example of an document address would be

The first improvement was to equate the IP address to a host name.  Such as stanford.com would equate to say which is the IP address of the server.  Now this address would be stanford.com/AtomicResearch/paper.doc, a much more human name that the IP address.  The host names were stored on each computer connected to the Internet.  The next enhancement was to use these same names in a Domain Name Service which is the same system but the names are stored on a computer called a name server and these name servers were all connected together to provide a single name for all the machines on the Internet.  Now it is much easier to find documents on the Internet.

The next issue was how to show the inter connection of all these documents on the research network.  The answer was Hyper Text Markup Language (HTML).  An HTML document contains tags these are a special series of characters that have a special meaning.  These tags are inside <> characters, there is an opening tag and a closing tag as an example <tag></tag>.   A more specific example is:
<a href=”stanford.com/AtomicResearch/paper.doc”>Paper</a>
This series of characters is interpreted as a blue word that when clicked would send you to the research paper.  You can then make a series of interlinked pages kind like a spider web, thus the World Wide Web.  You need a program that interprets the HTML called a browser and you can now navigate the web by simply clicking on these links and going between pages.

This shows the way the Internet evolved.  One improvement on the Internet lead to the next improvement.

The next step is a big one.  One of the first popular web browsers was Mosaic, which became Netscape.  HTML took on many enhancements to format the document, including adding images to your web page.  The new versions of browsers started becoming more of a render engine to render web pages compared to interconnected text documents.

This is about the time that the defense department network, was released into a public Internet.  The general public or businesses could now produce pages on the world wide web.  It did not take long for businesses to realize the value of the world wide web.

Searching –

One thing that was built into the world wide web was searching.  Each page included meta data, meta data is data about data, one part of this meta data are keywords.  These keywords are words that represent the ideas in the web page.  So to search the web page all you need to do is find the keywords that you are looking for.  One problem is advertising executives soon found out that these keywords do not need to match the text in the web page.  This is most of your searches ended up finding pages about Viagra.

Enter Google, Content is King – 

Google started a new concept.  To find relevant content in a search they the content not the keywords.  This meant that adversaries could no longer stuff the ballet box to get their content as search results.  The content needed to contain the words you are search for.  This is a big change in the world wide web.  Googles states that it is all about content, if you produce high quality content it will be found.  This started a new part of web design Search Engine Optimization (SEO) and it’s related field of Search Engine Marketing (SEM).  These changes have a major impact on the anatomy of a website.

Anatomy of a website a continuing education and discussion

In 2006 I had a job change that meant I was responsible for maintaining a website.  Before I had some dealings with websites but not too detailed.  This started an study of how the Internet and websites work.  I have learned much over the last 8 years and it is a continuing education.  I thought I would write down what I have learned.

This is going to take more that one blog post, I am not sure how long it will take.  I plan on posting at least once a week until I am up to date.

I can imaging it will take about a year to try to dump all my knowledge.  One thing I have learned about the subject is that every one has an opinion.  I welcome comments but I do not want to deteriorate into a forum of who is right.  This is my blog and my opinion so that is what you get.

Cameron Russell: Looks aren’t everything. Believe me, I’m a model. | Video on TED.com

See on Scoop.itMind of a Technologist

TED Talks Cameron Russell admits she won “a genetic lottery”: she’s tall, pretty and an underwear model. But don’t judge her by her looks.

Paul Coleman‘s insight:

This is a good talk for all our young women and every young person.  You could say the same things about football players, or basketball players, or actors.

See on www.ted.com