Zasady projektowania stron

In the modern world, dominated by electronic communication, websites play a key role. In order to fulfill their tasks, they should be well designed and properly made. When creating a website (as well as a blog, fan page or online store) it is good to have a similar approach as you have when building a house or a machine - first define the expected functions and appearance, and then the design and mechanisms of operation.

When designing a website, the following recommendations should be taken into consideration:

• Create a website to be responsive or adjusting its image and layout to the device on which it will be viewed (computer, tablet, smartphone).

• Use modern generations of programming languages of websites without obsolete elements such as Flash.

• Create a simple, light and legible image and page layoutlayoutlayout that allows the viewer to quickly find the required content.

• Use a functional layout of a page similar to other websites of similar character, so that the viewer could use the site intuitively in a manner similar to other pages.

• Do not hide your authorship data, because most people do not trust content with anonymous authors.

• Use the full available width of the device so that the person viewing the website could read the information posted on it in the most convenient way.

• Enable viewers to comment on and rate the content, although in this case it is worth taking care of eliminating anonymous slanderous comments by, for example, allowing comments only made by people logged in to the known social networks (e.g. Facebook).

• Design a website preferably in the following layout:

R11bVsoGrHBpF1

Ilustracja przedstawia układ modułowy strony internetowej. Od góry prostokąt na szerokość całej strony z napisami: LOGOTYPE (lewy, górny róg) oraz Advertising slogan (w środkowej części prostokąta). Poniżej prostokąt na szerokość całej strony z napisem: Horizontal top navigation bar. Niżej dwa prostokąty obok siebie. Węższy po lewej stronie z napisem: Vertical left navigation bar. Szerszy po prawej zawiera napis: Essential content. Na dole prostokąt na szerokość całej strony z napisem: Footer.

• Remember to give the page a title, because it is the title, along with a short description, which appears in browsers. Thanks to it, we are able to find out which site we are on and switch between them when we have more browserbrowserbrowser windows open.

• Rethink the domaindomaindomain name under which we will place the page name.

• Think how to divide the collected material into logical blocks.

• Think about entering contact details on the website.

• Remember about copyright.

In order to properly fulfill the above recommendations, it is good to make a decent, well‑considered project, including the website's functions, its graphics image, the layoutlayoutlayout of content prepared in the form of the so‑called site mapsite mapsite map (i.e. a graph including subpages and their relationships). After drafting a solid project, it is time to choose the tool / language in which our site will be made. Here we have two basic methods enforced by the page type.

• If the content of our site is going to be modified only by us and at the same time it will not happen too often - it is worth using HTML to create the page. Creating the code of such a page requires programming skills in HTML language and it is time‑consuming, however, such websites are characterized by a short open time (load fast) which is good both from the viewer's point of view and well‑rated by search engines.

• If, however, the content of our site requires frequent updates, you will need the ability to evaluate and comment or other interactivity mechanisms - we must reach for other programming languages (e.g. PHP) preferably in the form of ready‑made content managementcontent managementcontent management systems (so‑called CMS).

After installing such a system on the server to operate our site, high technical qualifications are not required, because content management is quite simple, and writing articles is similar to writing in word processors. You can use a wide commercial offer to write such a system, but you can also reach for widely used free CMS systems such as Wordpress, Drupal or Joomla. The same applies to online stores, photo galleries, blogger or information portals.

R1WRRlRz8qErz

Pokaz slajdów - Tworzenie wartościowej strony internetowej. Instrukcja obsługi z poziomu klawiatury: 1. Uruchomienie aplikacji - ENTER, 2. Na każdym ze slajdów czytany jest automatycznie tekst alternatywny po polsku, 3. Przy pierwszym uruchomieniu na pierwszym slajdzie, czytanie tekstu po angielsku - TAB, 4. Przejście między slajdami: do następnego slajdu - TAB, do poprzedniego slajdu - TAB + SHIFT, 5. Przejście do czytania napisu po angielsku - strzałka w górę + strzałka w dół (czyta tekst po angielsku widoczny na slajdzie).

Pokaz slajdów - Tworzenie wartościowej strony internetowej. Instrukcja obsługi z poziomu klawiatury: 1. Uruchomienie aplikacji - ENTER, 2. Na każdym ze slajdów czytany jest automatycznie tekst alternatywny po polsku, 3. Przy pierwszym uruchomieniu na pierwszym slajdzie, czytanie tekstu po angielsku - TAB, 4. Przejście między slajdami: do następnego slajdu - TAB, do poprzedniego slajdu - TAB + SHIFT, 5. Przejście do czytania napisu po angielsku - strzałka w górę + strzałka w dół (czyta tekst po angielsku widoczny na slajdzie).

Zasób interaktywny dostępny pod adresem https://zpe.gov.pl/a/DjPbWm0Gb

Anyone who would like to create a valuable website should:

• plan its tasks, functions and graphical layout

• draw up a solid detailed design;

• choose the right technology of execution;

• get down to work.

Exercises

Glossary

Keywords

browserbrowserbrowser

domaindomaindomain

layoutlayoutlayout

website designwebsite designwebsite design