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++ (Npp) is a text editor that includes various features and support for a number of formats and (programming) languages. During the course, only basic text editing features are utilized. It is a free tool for the Windows operating system. There are numerous similar tools available, also in other operational systems beside MS Windows that may be used as preferred, though will not be covered during the course. Settings for NPP Here are some settings for Notepad++ that are used in the classroom and may differ from software defaults at the first 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. UTF-8 character encoding should be selected. We will later discuss more about character encoding in text documents created for web publishing. This way UTF-8 is set as the encoding for all text documents that is created with the tool. The encoding of the opened file is visible at the bottom of the editor window. 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, especially at the beginning. 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. You should also check out the menus in Npp, there are a great number of additional (and advanced) tools and options. There are a lot 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. Here are some options for different platforms besides the recommended Notepad++ on Windows machines. MS Windows platform: Sublime Text - http://www.sublimetext.com/ Atom - https://atom.io/ Komodo Edit - http://komodoide.com/komodo-edit/ MS Visual Studio Code - https://code.visualstudio.com/ ConText editor (http://www.contexteditor.org/ ) University of Tampere, COMS 3 ITIY3 Introduction to Web Publishing MAC OS platform: 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 ) Other options Coda, Taco HTML Edit, TextMate, Komodo Edit, Sublime Text (see above) Linux: Atom - https://atom.io/ Sublime Text, Bluefish, gEdit, Komodo Edit… http://bluefish.openoffice.nl/http://en.wikipedia.org/wiki/List_of_text_editors 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 Chrome is the most used browser with useful analytic and developer tools based on the Blink web engine (https://en.wikipedia.org/wiki/Blink_(web_engine) ) (Opera web browser (current versions) offers the same features). Other browsers may be used; however, examples and materials are based on Chrome. The web browser is used to preview web pages while editing and to analyze ready pages. Some inbuilt tools allow you to view the code in the opened page and even have a look at the interpretation of that code, styles applied, files needed to show the page, parts of the page affected by different operations, loading analysis etc. To open an offline file 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 is used to open a new browser tab. One of the basic tools is the View page source tool that shows the actual source code of the HTML-file. This code is the basis for the interpretation of a web page. The source code is opened as text to a new browser tab. You can access the command via the context menu (right-mouse-click) “View Page Source” (or CTRL + U shortcut). 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 forms of the HTML code, more about that later. Another important tool that the course will utilize is the Developer tool in Chrome. The name itself suggests that it is meant to help the development process of web pages. It provides different ways to present and to analyze the opened web page. During the course, this tool is used for identifying elements of the page and to view the layout 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 University of Tampere, COMS 6 ITIY3 Introduction to Web Publishing (or from the browser settings under More tools / Developer tools) By default the Developer tool is opened to the side or bottom of your browser window next to the page content. To make its use more comfortable, you can detach the tool (undock) into a separate window. You can access settings for the tool from the vertically aligned three dots on the top right side of the tool. Dock settings will be retained by the browser. 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 (in the browser window). You can, for example, select individual elements in the code and the browser will show the corresponding part in the browser window. As well as University of Tampere, COMS 7 ITIY3 Introduction to Web Publishing you can see the layout styles associated with the selected elements, just to mention the most important features we are going to use. The above image shows the undocked Developer tool for a web page. You can open a tool window for each web page in different browser tabs. Click on the element that you wish to inspect in the Developer tool window when the Elements tab is selected. At the bottom you can see the element hierarchy. On the right, the layout styles for the selected element are displayed. We will discuss styles more extensively, but to summarize the presented styles, they show what layout style rules are directly assigned to the selected element and which are inherited from elements lower in the element hierarchy. Basically, that is all styles that influence the rendering of the element and its content. When you click on an element or just move the mouse pointer over elements in the Developer tool, the corresponding element is highlighted in the web browser window (see image). You may also use another precision tool here that allows you to point at and “select” a part of the page in the viewport (browser window) to highlight the corresponding element in the interpreted code in Developer tool (opposite of the above, see further below). These tools will help you to understand and to learn HTML and style rules created with CSS style language and will be further discussed during the course. University of Tampere, COMS 8 ITIY3 Introduction to Web Publishing University of Tampere, COMS 9 ITIY3 Introduction to Web Publishing Other related software used in web publishing The online image-editing tool Pixlr will be discussed later during the course. There are numerous software options for editing images. Pixlr is a simple tool with sufficient features, available free and can be used straight in the web browser without additional software installation. (https://pixlr.com) In web publishing, beside editing and browsing tools, you may also need additional software for transferring files to the web server. This is usually the final step in the process and require that you have access to a directory on a web server (plus a registered web address associated with it for making content available worldwide). The transfer of files is a simple process. It is just moving files between your computer and the server computer over the network using software supporting file transfer protocol (FTP). There are also free tools available, e.g. Filezilla (https://filezilla-project.org/ ), WinSCP (https://winscp.net/eng/index.php). Below the interface of WinSCP where you can see files on a local computer and the files on the server are on the right. You can upload and download your files as needed – just as copy / paste in Windows Explorer 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). After you move your files to the dedicated web root folder, internet users will be able to access your files, open your web pages.