Web Development

Dr Derek Bridge
School of Computer Science & Information Technology
University College Cork

Lecture Objectives

  • learn how web site developers improve their productivity
  • learn about HTML templates
  • learn about CSS frameworks

Enhancing Productivity

We briefly look at ways of taking the donkey work out of writing HTML:
templates and static site generation.

And we briefly look at CSS frameworks, which offer us pre-written CSS.

HTML

templates and static-site generation

Donkey Work!

Writing HTML for a single web page is nearly painless.

But writing HTML for a web site gets very repetitive:
most pages have the same design, but differ in some of their content.

Avoiding Donkey Work

Much later, we will look at dynamic web pages
(using Flask).

But even now, we can save work by using
static site generation:
creating HTML files from templates.

Jinja2 and StaticJinja

We'll investigate this using Jinja2 templates — because they're the same ones we'll use in Flask later.

staticJinja is a program that converts templates into regular HTML web pages.

Example with Donkey Work

Each page has the same header and footer; only their main differs.

Example without Donkey Work

A Jinja2 Template

Let's say this is stored in _base.html: 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>
    {% block main %}{% endblock %}
    <footer>
        <p>
            <small>
                &copy; Derek Bridge
            </small>
        </p>
    </footer>
</body>
</html>

index.html, about.html, contact.html

staticJinja

  • staticJinja is a program.
  • For each file whose name does not start with _ it creates a corresponding HTML web page.
  • It uses the template _base.html because they each extend _base.html
  • It replaces the blocks in _base.html with the corresponding blocks in index.html, about.html and contact.html

Where Does It Happen?

The browser does not fetch templates and then combine them.

The server does not take templates and combine them.

staticjinja is a quite separate program.
It combines templates.
Then its output (web pages) can be placed on the server.
Browsers and servers work as normal.
They know nothing about templates.

jinja2

  • jinja2 has other ways to save you work.
  • You can create a snippet of HTML and then use {% include %} to include it in a web page.
  • You can even pass in data and write for-loops and if-statements that staticJinja will execute.

CSS

CSS frameworks

CSS is Hard!

Writing CSS to create a visually appealing web site is difficult.

Writing CSS for a visually appealing, responsive web site is even more difficult.

Making sure that the web site is also accessible is even more difficult.

CSS Frameworks

Prewritten CSS for multi-column sites,
usually liquid, sometimes RWD.

E.g. Bootstrap
Mobile-first and RWD.
Up to 12 equal-sized columns, but you can combine them.
You may need to put some extra divs into your HTML.
You will need to put class attributes onto the elements in your HTML.
You can customize the colours and so on.

Bootstrap

One way to use Bootstrap: 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Welcome!</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
</head>
<body>

    <-- Your stuff goes here -->

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous"></script>

    </body>
</html>

Example


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Welcome!</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous" />
</head>
<body>
    <header>
        Header
    </header>    
    <div class="row" role="presentation">
        <nav class="col-sm-4">
            Nav
        </nav>
        <main class="col-sm-8">
            Main
        </main>
    </div>        
    <footer>
        Footer
    </footer>        
</body>
</html>

CSS Frameworks

  • Advantages of CSS frameworks:
    • they can make you more productive;
    • they often follow good practice.
  • Disadvantages of CSS frameworks:
    • they bloat your HTML with divs and class attribtes (class-itis!) for presentational purposes;
    • their CSS download is large because it contains much you don't need (unless you custom build it);
    • they make strong assumptions (although, if you know CSS well enough, you can customize/override).
    • maybe they result in a web that looks very same-y.

After Development…

development
and
testing
and
deployment
and
monitoring

Development

Web developers write HTML and CSS using an editor or an IDE (e.g. Visual Studio Code).

They test in a browser.

Testing

Methods where there is no server and no HTTP request/response:

  • Double-clicking on an HTML file loads it directly into the browser.
  • Preview panes inside the IDE work similarly.

These methods do not fully test your web page.

Testing

Methods that do use a server:

  • Localhost (e.g. Live Preview in VSCode).
  • A development server.
  • The production server (not advisable!).

Deployment

After testing comes deployment:
moving the web site from the development machine to the production server.

Workflow

  • Web development involves a lot of repetitive tasks involving many different tools, e.g.
    • static generation of web pages;
    • minifying HTML, CSS and JavaScript;
    • preparing different versions of images;
    • uploading files to the web server
  • Some of these may need to be repeated every time you make a change to the site.
  • Why not automate these tasks?

Monitoring

After deployment comes monitoring:
measure performance to decide whether changes are needed.

On-going Testing

Companies with a scientific approach to doing business will test everything about their web site with real users.

One approach is A/B testing:
assign visitors to your site into group A or group B at random;
show one version of the site to group A and a different version to group B
measure clicks or sales or…

Examples of A/B Testing

A stack of three horizontal lines, often used on web sites as a Menu button. Should we use a 'hamburger icon' or the word MENU?

What shade of blue should Google use in its search results?

Conclusion

Our study of Web Development in the case of static web sites ends here.

But, we will resume with a study of Web Development in the case of dynamic web sites.

We've Learned So Much

A list of web acronyms
By Math with Bad Diagrams

G'luck!