Summary

HTML5 and CSS3

Html is the basis of the world wide web. With HTML5 a lot of features were introduced into the language, most importantly the Canvas element, native HTML5 Video (no more flash), and a lot of new tags for semantic formatting of content.
Where HTML describes the content of a web page or application, CSS describes its looks. With the new CSS3 you can style everything, adding shadows, creating gradients and even radically changing the content style based on the screen size and orientation.
Mobile-first responsive design is the current trend in web design. This means making webpages which can look good on mobile devices and on desktops too from the same source.
Since 95% of communication on the internet today is based on this technology you need to master it. At least to the point where you can write on your own a webpage, style and publish it.
Great links to learn more about HTML5 and CSS3:

Javascript

When you need to add some interactivity to your webpages you can do so using Javascript. This language has been around since the beginning of the web, and has evolved now into a standard, so all browsers support it.
With javascript you can program buttons, tabs, dialogs, create games and interfaces of all kind.
A great book on learning Javascript, and a good introduction to programming is:

JQuery

JQuery is a library for Javascript which allows to manipulate web content in a very convenient way. 99% of modern web applications use jQuery as their basis.
You can learn jQuery together with Javascript by creating some small web application living in the browser only.
Learning jQuery is easy, follow any of these guides:

Node JS

Node JS allows to use Javascript to develop web applications which run on the server. This is similar to what you can do with PHP, but much more stable and secure.
Also using Javascript for both the client and the server makes it much easier to work as we don’t need to use different languages. Also you can use the same code for both.
Node.js is used often with the Express.js framework, which makes it easy to write web services, do authentication etc.
Learn more about Node.js on http://nodejs.org and about Express.js http://expressjs.com

Web frameworks

When developing web pages and web apps you usally write over and over the same code, for example you always have a navigation bar, you need to have buttons, panels, dialogs, forms etc.
In the old days you had either to do this every time, or to write yourself some kind of library of reusable components in order to save some work.
Today there are several frameworks which already provide you with some pre styled elements that you can just copy and paste to use directly into your pages.

Bootstrap

Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.
You can download the Bootstrap distribution from http://getbootstrap.com
Boostrap can be seen as several components:
  • The CSS styles dealing with general typography and how text is styled. The Bootstrap CSS allows also to format tables, forms, button, images, and so on.
  • The Reusable components which include icons, toolbars, navigation lists, dialogs, breadcrumbs, etc. 
  • The Javascript components like tab panels, collapsible elements, modal dialogs, etc.
It’s not mandatory to use components if you don’t like, for example you might just use the grid. 
On top of Bootstrap you can use several custom themes, like one contained in http://bootswatch.com, where you simply add a new CSS over the one provided by Bootstrap to get new styling.
Many sites also provide snippets of code for common use cases built using Bootstrap, one of these is http://snipplicious.com. Search for “bootstrap snippets” to find more. 
Finally if you like to have a complete template, including bootstrap plus some ready to use pages you can check http://startbootstrap.com.
A great resource for learning how to use Bootstrap is to watch:

Foundation

Foundation is another popular alternative to Bootstrap providing similar elements. Some people prefer it because is less bloated and eventually faster. 
You can download Foundation from http://foundation.zurb.com
The Foundation Getting Started Guide provides documentation on the Framwework.
In particular you have access to:
  • The Grid
  • Buttons
  • Navigation
  • Forms
  • Plugins with a number of Widgets 
On Zurb University you can find a number of ready to use snippets and templates based on Foundation framework.

Static site generators

If you tried to develop a full static site with or without one of the frameworks mentioned above, you will have noticed that a lot of the code is repeated over and over.
For example a website organized like the following:
-----   Header ------
----- Navigation ----
----    --------
side    content
bar
----    -------
-------  Footer -------
Requires you to duplicate for each page the Header, Navigation, Sidebar and Footer Blocks. Furthermore you have to keep track of all links and make sure to update them every time something changes on the site. 
Usually you can solve these problems using a Content Management System (CMS) like Wordpress or Drupal. These software packages come with templates that take care of most of these tasks. And the dynamic parts of your website, like menus are dynamically rendered from a database. But CMS software is difficult to maintain and even more to keep secure, and quite slow too. Malicious users can hack your site or in the best case put it offline. And it usually takes few seconds before your homepage shows up.
On the other side static sites are very fast, nobody can hack them, there is no security backdoor, and they don’t need any upgrade during time. Plus they’re small to download, and you can work on them offline too.
Static site generators try to bring you the best of both worlds. Like CMS you have templates, so you can focus on the content and compose pages from reusable snippets. And they produce static sites exactly like you would do by hand, just better, because it’s difficult to have broken links and so on.
Static site generators work like this:
  1. You start with a basic folder structure, with folders where you put your pages, usually as Markdown documents, and folders containing templates and includes.
  2. You can change the style of the site by editing templates and CSS 
  3. You add in your content
  4. You “compile” the site, producing a “static” folder 
  5. You copy the contents of the static folder on your server, either by FTP, SSH or Version control.
Every time you want to update your site, you just do steps 3) to 5). 

Markdown

Markdown is not a site generator, but we talk about it because most site generators use this as one of the accepted formats for writing content.
This page you are reading is written in Markdown for example. See the source for an example of Markdown.
Basically Markdown is made of text files that, when compiled, can be converted in HTML and several other formats. 
Additionally they are quite readable by themselves, as the formatting rules are made to allow people to read it as is without any conversion.
A full guide to Markdown formatting is at http://daringfireball.net/projects/markdown/syntax, but you can also find convenient to read the Markdown Cheatsheet.
Many text editors support Markdown natively, and they add a nice preview panel. 
Check out http://dillinger.io or search for “Markdown Editor”, you will find a ton. Once you learn it, you will never use MS Word again.

Jekyll

Jekyll is the most popular Markdown based web site generator. You can download it from http://jekyllrb.com.
It might be tricky to install because it requires recent Ruby and Rubygems.
Once you have all of this installed: 
sudo gem install jekyll
jekyll new my-awesome-site
jekyll serve
At this point you can open your browser to http://localhost:4000 and see your site preview live. Once you are done with your site you can create a final static version of it with
jekyll build
This will make a _site folder containing your site code.
Jekyll will generate a folder structure like the following
_config.yml
_includes
_layouts
_posts
_sass
about.md
css
feed.xml
index.html
  • _config.yml is where you edit your site config, things like the title, your name etc. You can also define new vars here and show them into the templates
  • _includes contains the parts of the templates which are repeated over and over. You will include them in your template
  • _layouts contains the main layout of the site and you can add other, for each different page type. In this site I have a layout for news, one for pages and one for classes
  • _posts is where you put the “news” or “blog”. These are different from pages because are compiled into date - based folders and shown in the homepage in date order.
  • the about.md and any other page you want to create are plain text files. 
The only thing that makes about.md special is the header on top of the file:
---
layout: page
title: FabAcademy 
permalink: /about/
---
The layout row tells which file from the _layout folder should be used for this page. The title is the title for this page, shown also in the top menu. Finally the permalink tells which address should be associated with the page.
You can also use folders to define your pages, putting an index inside it: for example if you want a tutorials page, you could create a tutorials folder and an index.md page into it.
Jekyll is very popular, and some people created plugins and themes for it. If you want to use a theme, or to develop your own, you can find lots of good examples at http://jekyllthemes.org.
The Freelancer Theme is interesting because it uses bootstrap.
To use Freelancer, clone its git repository and just run jekyll serve inside the created folder.

Octopress

Octopress is directly derived from Jekyll. It adds some nice features which make it more suited for a blog, like search, a post calendar, source-code synthax coloring, etc.
This is Octopress site. Instructions for setting it up are here.
As of now a new version of Octopress is in final development stages. See here

Pelican

If you are looking for an alternative to Jekyll / Octopress, or have trouble with Ruby you can have a look at Pelican.
This tool is based on Python language, which makes it a bit less prone to software version troubles.
As explained in the Pelican great documentation you can install it with:
pip install pelican markdown
mkdir -p ~/projects/yoursite
cd ~/projects/yoursite
pelican-quickstart
Pelican doesn’t come with much example content. You need to create a post befor using it. Create a file ~/projects/yoursite/content/test.md
Title: Title
Date: 2010-12-03 10:20
Category: Review

This is a test
Then generate the site with
pelican content
Pelican doesn’t have a built in webserver. But with Python you can run one easily. Go into the site folder and run:
cd ~/projects/yoursite/output
python -m SimpleHTTPServer
then open the browser to http://localhost:8080
Pelican also comes with a number of themes

Pandoc

PanDoc is not stricly a site generator but a multi purpose tool for converting documents from one format to another. If you write your content in Markdown, you can use Pandoc to create HTML, PDF, DOC, RTF, etc. 
You can download PanDoc from the site http://johnmacfarlane.net/pandoc/
These are the supported file format, and PanDoc converts FROM any of these TO any of these. 
  • HTML formats: XHTML, HTML5, and HTML slide shows using Slidy, reveal.js, Slideous, S5, or DZSlides.
  • Word processor formats: Microsoft Word docx, OpenOffice/LibreOffice ODT, OpenDocument XML
  • Ebooks: EPUB version 2 or 3, FictionBook2
  • Documentation formats: DocBook, GNU TexInfo, Groff man pages, Haddock markup
  • Page layout formats: InDesign ICML
  • Outline formats: OPML
  • TeX formats: LaTeX, ConTeXt, LaTeX Beamer slides
  • PDF via LaTeX
  • Lightweight markup formats: Markdown, reStructuredText, AsciiDoc, MediaWiki markup, DokuWiki markup, Emacs Org-Mode, Textile
If you don’t like the options above for creating your site, this could be a useful tool to write your own. :) Someone did it already

Hosting your site

Web hosting

Static sites can be hosted basically everywhere. Starting from any Hosting providers, your Dropbox Public Folder, to Amazon S3 Buckets.
You can easily setup your own webserver using Apache or Nginx and a machine rented from a Virtual Server provider like DigitalOcean, Rackspace, Windows Azure or Amazon EC2.
Most of the time you will transfer your content using FTP, SFTP, RSYNC. But if you have shell acess you can also use Git or Mercurial.

Github Pages

GitHub offers a great free static site hosting service. You can have a personal or a per-project static site. 
Personal site works likes this:
  1. You create a repository on Github named yourusername.github.io (replace yourusername with your username) 
  2. You commit and push your static site to this repository
  3. Your site is visible at yourusername.github.io
Strongly recommended!
More info on GitHub Pages here.

Fab Academy Archive

Fab Academy hosts personal sites using Mercurial. More on this in the following weeks. Get your site ready by then!!

Assignments

  • Get familiar with HTML and CSS, create some pages
  • Create your on site with one of the tools mentioned here, creating at least and About page on you
  • Host and upload your site using GitHub Pages
  • Extra credit, create your own theme for your site
Extra
  • Start thinking about your final projects!!!
from http://www.fabacademy.org/archives/2015/eu/labs/cascina/classes/pre-02/