ITIY3 Introduction to Web Publishing

ITIY3 Introduction to web publishing

Web publishing tools used in the ITIY3 course

 Text editor – Notepad++ (https://notepad-plus-plus.org/download )  Web browser – Google Chrome (https://www.google.fi/chrome/browser/desktop/)  Image editing – online tools at Pixlr.com (https://pixlr.com)  WordPressMU installation on our server (https://blogs.sis.uta.fi/ )

Notepad++

Notepad++ (abbr. as Npp) is a text editor that includes various editing features with support for a number of formats and (programming) languages. During the course, only basic text editing features are utilized.

Npp is a free tool for Windows operating systems. There are numerous similar tools available (see list later), also for other operational systems that may be used if preferred, though only Npp is covered during the course.

Preferred settings for NPP

Here are some settings for Notepad++ that may differ from defaults at program installation:

Access the menu items in Settings / Preferences

University of Tampere, COMS 1 ITIY3 Introduction to Web Publishing

Settings for a New Document -> Format and Encoding. Select UTF-8 as character encoding. This character encoding is used to define text documents created for web publishing. The setting sets UTF-8 as the encoding for all text documents that are created with the tool.

The encoding of the opened file is visible at the bottom of the editor window (image below):

You can convert or set the encoding of a document from the Encoding menu, convert to UTF-8 if the document has the wrong encoding.

The auto completion functions (completing words as you type) should be turned off to keep editing simple. No Auto-insert functions are needed either. Preferences can be adjusted later to taste, but it is less confusing when the software does not add anything on its own.

University of Tampere, COMS 2 ITIY3 Introduction to Web Publishing

You can open multiple files into Notepad++. The opened files are in tabs and you can click a tab to activate it for editing (image below shows 2 opened documents).

The menus in Npp contain a number of additional (and advanced) tools and options. There are a lot of useful options but only a limited set will be mentioned and used during the course.

Other basic text editor software for editing web pages

There are numerous text editors for free and commercially available that can be utilized for editing web page. Here are some options for different platforms besides the recommended Notepad++ on Windows machines.

MS Windows platform:

Visual Studio Code - https://code.visualstudio.com/ Sublime Text - http://www.sublimetext.com/ Atom - https://atom.io/ Komodo Edit - http://komodoide.com/komodo-edit/ ConText editor (http://www.contexteditor.org/ )

University of Tampere, COMS 3 ITIY3 Introduction to Web Publishing

MAC OS platform:

Visual Studio Code - https://code.visualstudio.com/ Sublime Text - http://www.sublimetext.com/ Atom - https://atom.io/

TextEdit - inbuilt text editor ( guide to edit HTML files with TextEdit http://support.apple.com/kb/TA20406 ) CoteEditor (https://coteditor.com/ ) TextWrangler ( http://www.macupdate.com/app/mac/11009/textwrangler )

Linux:

Visual Studio Code - https://code.visualstudio.com/ Sublime Text - http://www.sublimetext.com/ Atom - https://atom.io/

There are also specialized web page editor tools that integrate various functions for creating and managing web pages for instance Adobe Dreamweaver, to mention the most popular one. These, however, fall outside the scope of the course.

The web browser Preferred web browser software in the course -> Google Chrome

The web browser is used for viewing web pages. It is very useful for developers too, that is for previewing web pages during the editing process. The web browser can be useful for editors when analyzing page structures, content presentation, interactions. Built-in developer tools allow you to view the code of an opened page and even have a look at the interpretation of that code. You can see how styles are applied, which files are needed for the page, how scripts are applied, how data is loaded etc.

Google Chrome is a popular browser and it has useful analytic and developer tools. (Opera web browser offers compatible features). Other browsers may be used as well. However examples and materials are based on Chrome.

Basic shortcuts

To open an offline file (for preview) in Chrome (also in most other browsers), open the web browser and press CTRL + O to open the Open file dialogue window and select the file to open.

Use CTRL + T to open a new browser tab.

CTRL + P – print preview

CTRL + R – reload page

One of the basic analysis feature View page source can be accessed via the context menu (right-mouse- click) “View Page Source” (or CTRL + U shortcut). Page source is the actual source code, the basis for the interpretation of a web page in the web browser. The source code of the page is opened as text to a new browser tab.

University of Tampere, COMS 4 ITIY3 Introduction to Web Publishing

The HTML markup (the code) is colored and it is easier to differentiate from other content. The different colors will be useful when identifying different parts of the code syntax, more about that later. There may be also style and script codes in the source code.

Another important tool that the course will utilize is the Developer tool in Chrome. The name itself suggests that it is designed to help the development process of web pages. It provides different ways to present and to analyze a web page opened in the browser. We will use this tool to identify elements of the page and to view the presentation features of these elements. (Other modern browsers have similar tools as well, e.g. Opera (same as Chrome), Edge, Firefox.)

University of Tampere, COMS 5 ITIY3 Introduction to Web Publishing

You can excess the Developer tool via the context menu (right-mouse-click) with the “Inspect” command or using the shortcut CTRL + SHFT + I

(or from the browser settings under More tools / Developer tools)

University of Tampere, COMS 6 ITIY3 Introduction to Web Publishing

In the Developer tool we will inspect the interpreted structure of the HTML-code in web pages and how these are rendered in the viewport (area used displaying content in the browser window). You can select individual elements in the code and the browser will show the corresponding part in the browser window. You can also see the presentation styles associated with the selected element, just to mention the most important features we are going to use.

University of Tampere, COMS 7 ITIY3 Introduction to Web Publishing

Other related software used in web publishing We will also use an online image-editing tool called Pixlr. There are numerous software options for editing images. Pixlr is a simple tool with sufficient features, available free and can be used online in a web browser without additional software installation. It is using Adobe Flash and you must have Flash enabled in the web browser. (https://pixlr.com)

Beside editing and browsing tools, you may also need additional software for transferring files to the web server. You can test web pages offline, so probably this is the final step in the publishing process. To move files to a remote (online) server computer you need to have access to a web server. Servers store your files and serve these to users making content available worldwide on the internet.

The transfer of files is a simple process, copying files between your computer and the server computer over the internet using software that support simple rules for the transaction - file transfer protocol (FTP). There are free tools available, e.g. Filezilla (https://filezilla-project.org/ ), WinSCP (https://winscp.net/eng/index.php).

Below an example of WinSCP software interface, where you can see files on a local computer and files on the server (remote computer) are on the right. You can upload and download your files as needed – just as copy / paste process from one location to the other.

Internet Service Providers (ISP) generally provide access to a remote location, directory on a server, when you purchase web-hosting services. Alternatively, you can also set up and maintain your own server and acquire an IP address from an ISP (and register a domain for your site). After you move your files to the dedicated web root folder, internet users will be able to access your files, open your web pages. When you make changes or updates, you would edit your files offline on your computer and then upload the updated files to the server. Of course, you can also download files from the server.

File transfer software may not be needed, if you use a content management system (CMS), e.g. WordPress, that has inbuilt file management tools. As we will discuss later, WordPress allows you to create and upload content using the web browser itself.

University of Tampere, COMS 8 ITIY3 Introduction to Web Publishing

Of course, WordPress is just one platform for web publishing, there are numerous other solutions for server installation or available as online tools for creating web pages and web sites. Here are some examples for such services (not a complete list):

Wordpress.com - https://wordpress.com/ Google Blogger - https://www.blogger.com Webflow - https://webflow.com/ Pinegrow - http://pinegrow.com/ Wix - http://www.wix.com/ Drupal - https://www.drupal.org/ Joomla - https://www.joomla.org/ etc.

University of Tampere, COMS 9