WWW (WorldWideWeb) - this is only part of the services that the Internet has. In addition to the WWW, you can use the Internet to use e-mail, FTP service, teleconferencing and other services. WWW is translated into Russian in different ways, from “World Wide Web” to “PPP - Everywhere Extended Web”.
WWW- the most popular Internet-based service, and at the same time the youngest. WWW earns its popularity mainly from the convenience of presenting information, which is not comparable to other services.
WWW is built on technology based on hypertext, i.e. text with links. The development of this technology was mainly carried out at the European Particle Physics Laboratory (CERN) in Geneva. Now we can talk not about a hypertext, but about a hypermedia environment, i.e. the network ceased to be text-based; a huge amount of graphics, music, etc. appeared in it. Websites are built using new technologies, such as Flash, i.e. they do not contain text as such.
Moving from site to site or from page to page is accomplished using hyperlinks.
For addressing on the WWW, a URL is used. In general, a URL is written as
protocol://serveraddress (hostdomain):[port]/path/filename
Consider, for example, the address: http:// www. rea. ru/ new/ index. htm. Here:
http- defines the protocol, i.e. method of document transmission. HTTP is a protocol that is used to work with hypertext documents;
www. rea. ru- server address, where www is the node on which the site is located, gea andru- names of second and third level domains;
new- directory (path) to the desired file;
index. htm- file name, where htm- his type.
The port number is not used in this case, and the data is assumed to be located on the standard port for this protocol.
Often in the browser address input field it will be enough to enter only the server address ( www. rea. ru). The HTTP protocol will be added by default. Also, by default, the index file from the root directory will be opened.
Browsers
Browsers(browser) are browser programs that can be used to view WWW resources. Browsers can also be used to view HTML files and some other types of files without being connected to the Internet.
Browsers can interpret addresses (URLs), language markers HTML, and also understand several Internet protocols, such as HTTP, FTP.
The most popular browsers include Microsoft Internet Explorer, Netscape Navigator, Opera.
2.6. Microsoft's family of Internet programs
The Microsoft family of programs for working on the Internet was created in a fairly short period of time - from 1995 to 1997 and was initially inferior in popularity to programs from Netscape Communications. However, after the release of a series of programs InternetExplorer, and then integrating them into the Windows 98 operating system, the situation changed dramatically. This especially applies to the Russian-language part of the Internet. It is estimated that more than 70% of users currently use Internet Explorer programs. Each program in the family is designed to solve a specific problem, but their user interface is very similar, which makes the learning process easier. The family of Internet programs includes:
reviewer InternetExplorer- WWW document viewer, local network or intranet;
program for messaging and working with newsgroups OutLookExpress;
program NetMeeting- a means of holding conferences via the Internet or in a local network with calling capabilities, voice and video transmission;
program NetShow, allows you to reproduce multimedia documents on the Internet;
program FontPageExpress- document editor in HTML language.
Over the past year, we have seen many new trends in the world of web design. In this article, I will focus on site navigation that modern web designers implement to make a site not only attractive, but also understandable for visitors. These navigation trends work well for various types sites. And these types of menus reflect well on different forms and screen sizes.
Look at this variety and find interesting ideas for your next projects!
Sticky navigation
Navigation is designed to help users get from point A to all other points on the site. And keeping the navigation menu in a fixed location allows users to navigate the site from anywhere on the page. Many websites "stick" their main navigation to the top of the screen. When a user scrolls down to explore content, the menu is always in front of their eyes.
This has become easy to implement thanks to CSS and jQuery plugins, and many website themes now come with a sticky navbar by default. Fixed navigation is also convenient for mobile users, where the site is longer and thinner.
How to use it?
If you have a website with a lot of navigation elements, then this option is suitable for you. This is a surefire way to keep visitors on your site longer and increase overall page views.
However, make sure that the navigation bar does not take up too much space. It should not be so large that it blocks major parts of the page's content. US Magazine got around this problem by making its navigation bar smaller, making it less intrusive.
Mega menu
Mega menus have become popular with the rise of magazine-style websites. Mega menus are different from regular drop-down lists and typically contain multiple columns of content. This method works well if used wisely, but it is not suitable for every site.
Why use them?
Visitors can get an idea of your blog or website by viewing related content. If you can provide more content in a mega menu, then why not?
This trend doesn't work for mobile devices, because there is not enough space on the screen. But many people still browse the Internet on desktop computers and laptops, so there is a wide audience for the mega-menu.
Universal navigation
Some companies operate or own multiple brands and include universal navigation throughout their website. Disney, for example, owns theme parks, creates games, and produces movies along with TV shows. It makes sense to keep this universal navigation on every page, regardless of brand, to draw attention to other Disney products.
And this trend is not limited to conglomerates or holding companies. It is sometimes used in networks of websites, such as those owned by New York Media. Another good example- in the Mashable header, which links to all the brand's international sites.
Why use this?
If you work with a large network of products or brands, it can be useful to link them all together to create a single brand identity. Universal navigation can encourage visitors to look at other products.
Vertical sliding navigation
There are a growing number of websites that use vertical navigation, and in some cases it actually works well. This is especially popular with portfolio sites or creative agencies that push the boundaries of traditional web design.
The AWARD example above is a fantastic use case for vertical navigation. At the same time, its visibility is maintained at any time. There's no boring hamburger here - clear icons are visible on the side. This is an experimental approach to navigation design, but can work on websites with a creative target audience.
Why use this?
Try this technique only if you're going for a full-screen layout that deviates from traditional design.
Working vertical navigation is not easy to create from scratch, and it is difficult to make it work in responsive projects. However, if you are interested in experimenting and the desire to try new ideas is very strong, then vertical menus could be a good solution.
Hidden menu
Every web designer should know about hamburger icons and how to use them in responsive design. But as people become more familiar with the hamburger icon, more and more sites are constantly hiding the navigation from view.
A little strange: the hamburger does not make life easier for the user at all, it does not allow him to immediately open links to other pages of the site. However, it clears screen space by removing navigation from view. There have been various studies that indicate that most users do not welcome hidden menus. But this trend may be changing with more people using smartphones and knowing the meaning of this icon.
Why use this?
Best scenario for hidden menu- This is a high-tech audience. These visitors recognize the hamburger icon, and they know it means “click here for menu.” So if you're developing a tech blog or starting a B2B online agency, this could work. But if not, think carefully before taking this approach and make sure you're not sacrificing convenience for style.
Responsive Menus
When designing a website, there is no way to avoid using mobile navigation - because your site is 100% likely to be viewed on a mobile device. Designers often hide some navigation links on mobile phone to help menus work better on small screens.
But many sites are following the new trend of keeping all navigation elements using drop-down menus. This usually requires a hamburger icon with toggle icons for dropdown links.
You will only see this technique on mobile screens or in small browser windows. For example, Politico's mobile site uses plus signs (+) to indicate submenus next to each link.
Why use this?
Visitors should be able to view the entire website, no matter what device they are using. By maintaining submenus, you can offer a broader browsing experience.
Just make sure each submenu is clearly indicated by an icon, a color change, or something visual. Visitors need to know whether the menu opens by clicking on a link or whether they will be sent to a new page.
Article carousels
This trend is becoming increasingly popular on blogs and major news sites. Many of these sites can publish dozens, if not hundreds, of new articles every day.
Adding a simple carousel to the top of the page gives visitors the opportunity to check out the latest articles. These stories can be updated dynamically. They can be created in the form of thumbnails or any other option that you like. You can see examples in any Vogue article.
Why use this?
If you are developing a content-heavy blog, this trend can do wonders for the user experience. Visitors can learn about the latest stories, and this menu encourages visitors to explore more than one story per visit. As a result, this will increase the average total time on site. Most blogs that publish a lot of content want to increase traffic, and carousels are a great way to do this.
Google loves longreads, and it forces authors to publish more detailed guides on almost all issues. This works great for web content, but it can ruin the reading experience. To simplify the situation, use a table of contents - links to sections of the article at the very beginning. The most prominent example is Wikipedia, which has used ToC from the very beginning.
Why use this?
The main reason to use a table of contents is to improve usability. Longer articles are becoming the norm, but the user may not need to read all 5,000 words. They are also useful in SERP rankings because Google can suggest referral links based on the table of contents. It's a win-win approach.
Angular Links
It's an interesting navigation trend and it's spreading quickly. It seems like every startup and professional business is using this style to create navigation that turns out to be intuitive and symmetrical.
Typically used styles:
- Small letters
- Sans-serif fonts
- Additional horizontal spacing
- White or very light shade
This design trend has become a signature style for clean, crisp, and professional-looking navigation.
Why use this?
This menu just looks professional; it is noticeable and unobtrusive, and inspires a sense of trust. If you're designing a startup or corporate website, this trend is probably the best design style for your navigation. But be careful: the site should not look soulless, or like a copy of other projects.
Single Page Dot Navigation
The rise in popularity of one-page websites has given rise to many new trends. One of them is dot navigation: a series of circular icons located on the left or right side of the screen. Each of these points represents a different section of the site. And since the layout is one long page, these links are highlighted to indicate the user's current position. I really like this idea, but I wonder if people understand what these dots mean and how to use them.
Why use this?
If you are designing a one-page layout, we would recommend using sticky navigation. This makes it easier to see what each slide is and what information is on the page.
But if you can't (or don't want to) use the top navigation, then these dots are a good thing too. Or better yet: combine both! Or even include text next to the dots. There are many options and they can work well.
What kind of navigation do you like?
A good navigation system will help you find your way. It is extremely important that good system navigation helped you navigate network objects (sites:)) without headaches. While there are some exceptions, most websites would be broke or even disappear without fine system page management.
Do you have a plan for your website handy? Let's do one unpleasant thing. Place it in a separate window and keep the window open while you read this article. It's time to put your page management system under scrutiny. We will find out whether you are losing potential users by misleading and misleading.
Ready? Let's test your site by answering some fundamental questions.
Important questions
How much worry and worry goes into finding a successful navigation system style for the layout of website pages? When discussing website web usability, you will probably hear that an effective management system must answer a number of basic questions that arise from the user:
''Where I am?''
For the average website visitor, this question comes first. It occurs for perhaps one thousandth of a second, since everyone, when following a link, first of all tries to find their way. Therefore, one of the main tasks of the navigation system is to draw attention to the place on the site page where the answer to this question is located.
If the navigation system fails to orient the visitor, the visitor's confusion calls into question the usefulness of the site.
Question for those who currently have a website open: Is the current page indicated in your menu items?
The easiest way to tell about the user's location is to mark the corresponding menu item or highlight the button in a different color.
Repetition works wonders!
Even if there is a heading on the current page, graphically changing the corresponding menu item will not be superfluous at all, since repetition works wonders.
‘’Where have I been?’’
Discoloration or darkening of visited links is not always the only and most The best way mark the pages you viewed.
Breadcrumbs do a great job of making it easy and quick for a visitor to determine their current location on the site.
Wufoo uses them most effectively on its tour pages:
Thanks to hierarchical navigation, adding a new layer of pages does not present much complexity. It simply attaches to the end of the chain. Most likely, you will not undertake to design a website using this type of navigation system yourself. Breadcrumbs are more of a means of orientation than navigation through site objects. Use them as an additional element, but for something less dynamic, leave the main navigation system.
‘’Where can I go?’’
The user needs to know where he can go from the current page. This becomes especially important if your visitor is looking for something specific. And disappointment is the right way to drive a visitor away from the site.
‘’Why should I follow this link?’’
Simply specifying menu items is not always enough. Additional Information for each menu item will prompt the user about the contents of the page. Additional details can be either in the form of subtext or in the form of a hint line that pops up when you move the cursor to any menu item.
An example would be SimpleBits.com. I would like to note that if it weren’t for the signature “recent entries” under the SimpleBits item, I would hardly have guessed that this link opens blogs:
As Steve Krug writes in the book Don’t Make Me Think that usability does not always mean over-explanation. He also notes that the average Internet user no longer has to write ""Type here keyword"" when he needs to use the search field. This is where standards and conventions work together.
Avoid any confusion
“Mystery Meat” navigation relies on the use of ambiguous or incomprehensible menu designs. Just as the steering wheel turns, so do different directions in the design of navigation systems. And such a trend also appeared for a reason. When using the ''mystery meat'' menu, the user has to navigate on his own, guessing and experimenting. Intuition and reason are not required at all.
As you can see, you can be creative while still sticking to tradition. But this type of navigation is far from both:
Conclusion
Take another look at your site. Now, based on a number of specific indicators, you can evaluate the usefulness of your site. Maybe some sections of this or that page lack additional clarity?
I hope you liked this article :), and you will never create similar sites: and :)
P.S. Pictures are clickable;)
The effectiveness of a web project, the possibility of generating income or profit from the site, is directly proportional to the navigation system on it. Site navigation is at the core of holistic web design, along with site layout and structure. Whatever navigation you choose for the project, a little love and creativity will not harm, but rather will only leave you with pleasant emotions from traveling through the site. Today we will look at various navigation examples.
The most popular and still relevant “guides” to sites are rollovers (from the English rollover). They can be played with graphics, or simply represent a text hyperlink. Rollovers, as a rule, help the user answer the question “Where have I been before?”
Navigation on the site can be vertical, horizontal and combined. Regardless of the choice of navigation type, if it contains the main thing - logic, you can encourage visitors to view those pages of the site that the owner himself considers a priority. A well-designed navigation system allows the user to navigate the site without thinking about their actions.
Convenient navigation is:
- the ability to get to the most important pages of the site in just one click;
- a maximum of three clicks to go from the source to the desired page on the site;
- use of standard and generally accepted navigation elements;
- visual highlighting and effectiveness of navigation elements;
- the ability for the user to get to the page he needs in several ways (duplicating navigation elements).
Whatever navigation you choose for the project, a little love and creativity will not harm, but rather will only leave you with pleasant emotions from traveling through the site.Online portfolio of a photographer in the form of a book. Multi-colored square buttons serve as a transition to the site pages, and a fan flips through the pages. This is one of the few cases when waiting for pages to load is not at all boring.
Web design from Ukraine. You can enjoy your desktop with navigation elements forever.
Actress Sarah Hyland's website is a true reflection of her personality. The sketches used as menus are perfect for this page!
You don't need to understand Spanish to appreciate the aesthetic side of this site's hand-drawn menu. A nice “negligence” gives the project extravagance.
The creative agency is original in everything. Navigation menu in the form of a measurement scale.
A vibrant travel agency website with an equally colorful and memorable menu.
An unusual site for a man with an unusual hobby. Web project of an amateur cartographer.
The menu items seem to be hand-drawn, right?
It’s not for nothing that menu items are indicated by icons, because this project is dedicated to icons for websites.
Internet project for posting a portfolio. When you click on any menu item, the picture “retracts”.
Another original menu presentation.
Everything ingenious is simple.
Not a menu, but a complete mosaic. Unusual and practical.
Each figure on the page conceals something.
A site of ready-made projects of houses and cottages with visual materials, access to which is carried out in one click.
The most original hand-made studio.
LECTURE 1.
WEB BASICS: SITES, NAVIGATORS AND NAVIGATION
This course is for those who are determined to master HTML (the language of website design), and most importantly, to adopt those design rules that not only increase the number of visitors to hypertext pages, but also improve the “ecology” of the global information network. In the modern world, a real website building boom has erupted. Everyone has their own pages on the Internet: government agencies, large companies, small entrepreneurs, shops, libraries, schools, kindergartens, nurseries, the President of Russia and Pyotr Myachikov. You're probably thinking about it too!
Really, why not? Everyone is welcome on the Internet! You too can build your own virtual home. Or, together with friends, create a cozy nest for your school, and then go to visit each other.
What knowledge and skills do you need to have to successfully master the proposed course?
It is assumed that a novice designer can:
Ø launch and shut down a computer application;
Ø switch between on-screen application windows and transfer information via the clipboard from one window to another;
Ø write and edit texts on a computer;
Ø edit graphic information;
Ø well, and some other stuff from the usual baggage of a home computer user.
None prior knowledge HTML, website design, design, and programming are not expected.
The first lecture contains introductory material. It describes the web space for a novice user - a person who, keeping up with technological progress, intends to use the Internet in his daily activities.
Concept of web space
Web space is a global collection of sites. The site is located on a server, the servers are connected to each other using communication channels.
Website concept
Website- this is a collection of hypertext pages (usually having a tree structure) to represent an enterprise, firm (corporate sites), to represent schools (school sites), private
persons (personal sites). The site can carry out commerce (online stores), provide information services (sites for searching information,
libraries, help systems, mailing lists, training). In the modern world, a website becomes a business card of both an organization and an individual.
The hypertext pages that make up the site are written on a special HTML language(Hyper Text Markup Language - “H-T-EM-EL”, or “ash-TE-EM-El”, English or Latin transcription is used). This language is not, strictly speaking, a programming language, although it is interpreted by the browser. HTML tools are used to instruct the browser in what form to display text and graphics on the screen, and also allow you to write hyperlinks on pages.
HTML markup (unlike, for example, Word markup) is quite tolerant of different platforms, operating systems and computer power. This allows you to use it as a basis for building websites on the Internet, where the variety of platforms, operating systems and computers is very large.
Websites are viewed using a browser - a special computer program.
Hyperlink is a sensitive area on the screen. When you click on such an area, a hypertext transition occurs - the browser loads another page (it can be located on any server on the world wide web).
The sensitive area can be a piece of text (usually highlighted in blue and underlined), a picture or a fragment of a picture. When the mouse cursor enters the hyperlink's area of effect, it is easy to see - it changes its shape to a pointing finger.
View site
Used to view site pages special program viewing - browser (browser). The browser interprets instructions written by developers in normal text file(standard htm and html extensions), and displays the document on the screen.
Variety of browsers Modern hypertext documents are increasingly equipped with multimedia tools: graphics high resolution, sound, video, various special effects, interactivity (dialogue with the user).
Accordingly, browser developers are adding support for these new hypertext technologies to their products.
However, there are browsers that do not support graphics at all, such as the Lynx text browser. Voice browser pwWebSpeek is designed for blind people. Such people do not see the picture, but get an idea about it by hearing its description. There are browsers that use tactile Braille I/O. Some users access the Web by phone. This is how the Web-on-Call Voice Browser system works, for example.
IN Lately It's becoming fashionable to have it in your car on-board computer with internet connection. Since the user's eyes are busy with the road, a speech synthesizer is connected to the browser.
Of the large number of existing browsers, the most popular is Microsoft Internet Explorer(about 90% of users). Its super popularity is mainly due to the fact that this browser is part of the operating system Windows systems and therefore does not require additional funds and installation efforts on the computer.
Control Microsoft browser Internet Explorer (version 6.0)
When you launch the browser, a window opens (Fig. 1), which contains:
Ø window title;
Ø main menu;
Ø toolbar;
Ø address panel;
Ø window working area (a web page is displayed in it);
Ø status bar.
Rice. 1. Browser window
Entering an address
The address of a document (hypertext page) on the network - URL (Uniform Resource Location, universal resource locator) - is written in address bar browser. To enter an address, you need to click on the address bar and type the document URL into it from the keyboard, for example, http://www. *****
Reading the page
The loaded page (document) may contain information presented in the form of text along with pictures (less often sound and video). After activating a hyperlink in a document, another document is downloaded, which may be located on the same or another network server. Since the Internet is slow, loading a page can take from several seconds to several minutes (depending on the size of the page, the speed of the communication channel and the stability of the network at the time of viewing).
Text links in a document usually have two highlights at the same time: blue and underlined. When the link is activated, its color changes to red. The link informs you that it is starting to work. If the link has already been clicked, its color becomes more muted (purple).
Using different colors to display hyperlinks allows for better orientation when browsing websites. For example, a document may have several different links to the same page. Viewing a document using any link will “color” all links to it purple, which is a hint to the user about places on the site that have already been visited.
In modern website design, another technique for designing hyperlinks is often used: sensitive text is highlighted in color, and the underline appears only when the cursor hovers over the link.
We must not forget that a link can also be a picture (for example, made in the form of a button). A clear indication that an area on the page is a link is when the cursor transforms into a pointing finger while hovering over the sensitive area.
Browser main menu
File
Basic operations of the File menu (Fig. 2):
Ø writing the current page to disk;
Ø Printing the current page.
Rice. 2. File menu
Edit
The Edit menu allows you to perform operations (Fig. 3):
Ø copying selected elements to the Windows clipboard;
Ø search on the current page.
Rice. 3. Edit menu
The View menu allows you to perform operations (Fig. 4):
Ø control appearance browser;
Ø choice of encoding and font size;
Ø viewing the HTML code of the page;
Ø stop loading the page;
Rice. 4. View menu
Favorites
Allows you to work with “bookmarks” (addresses of pages remembered by the user).
Service
The Service menu allows (Fig. 5):
Ø configure your browser;
Ø call additional services.
Rice. 5. Menu Service
Reference
Access to reference information.
Toolbar
The toolbar (Fig. 6) includes buttons for frequently used commands (they duplicate the main menu items).
Rice. 6. Browser Toolbar
Back and Forward buttons
The browser stores the “path” along which the user views pages. The Back and Forward buttons allow you to move backwards and forwards through this story, respectively.
Stop button
When a document does not load for a long time (server problems), the user changes his mind or understands from the first lines that the document is not needed, you can click on
“Update” button
This command sometimes helps when the download is obviously taking a long time (network or server failure). However, this button is most often used by web developers to see changes after editing an htm file.
Home button
This button loads the browser’s “home” page, the one that the browser loads automatically upon startup. The “home” page is set by the user in the browser settings.
Search button
Favorites button
Add a bookmark to the current page or load a document using an existing bookmark.
Print button
Prints the current page.
Customizing the Toolbar
The settings panel can be accessed through the menu View/Toolbars/Customization (or by clicking right click by toolbar):
Rice. 7. Toolbar settings window
The toolbar (right) can be shaped as desired using presets (left).
Browser settings
The settings panel is called up through the Tools/Internet Options item in the main menu.
General Tab
The tab view is shown in Fig. 1.8.
Rice. 8. General tab of the browser settings panel
Homepage
Set by entering (copying) the desired URL in the “Address” field.
“Advanced” tab
Section “Multimedia”
If you are only interested text information pages, but you don’t want to spend time and money on graphics, uncheck the box in the “Display pictures” line.
Rice. 9. Item “Display pictures”
“Programs” tab
In field " HTML editor"install" text editor"Notebook".
Rice. 10. Notepad editor for quick view page code
Site view cost
Different providers charge different fees for using the network. Some charge by kilobytes, others by the time of Internet connection. In any case, the kilobyte size of a page is directly proportional to the number of kopecks required to view it.
Site structure
Let's look at the site structure using an example
In a browser window with a loaded site, you can highlight the following important elements (Fig. 11):
Ø Window title. The window title is the same as the page title.
Ø Site title. Located at the very top of the page.
Ø Logo. Typically located in the top left corner of the page. On the second pages, the logo is a link to the Main (start) page.
Ø Horizontal navigation menu of the site. Usually located under the site title.
Ø Vertical navigation menu. Usually located under the logo.
Rice. 11. Elements of a hypertext document
The site consists of pages
Just like a printed publication, such as a book, a website is made up of pages. Site pages are files with the extension htm (html). A website page is often called a document. Like the book, the site has one home page(input
dot, Homepage, home page). This page is indicated as the site address.
Unlike a regular book, the site's pages are rarely flipped in order. Thanks to hypertext transitions, the user moves from page to page according to context (by meaning, by the need to receive only the information that relates to the topic of interest).
Exercise
Try using a browser connected to the Internet to go to the website *****
Sites with a hierarchical structure
Hierarchy is dependence by subordination. This structure is more often than others (chain, table) used to organize website pages. Typically, sites have a special page called “Site Map”, where the hierarchy of pages is shown as a system of nested lists. Nesting reflects the hierarchical layout of the site, and list entries are hyperlinks to corresponding pages.
The user sees the complete logical structure of the site and has the ability to get to any page with one click (Fig. 12).
Rice. 12. Site map
Site navigation systems
Moving around the site (navigation) should be organized clearly and conveniently for the user. At the same time, navigation techniques on the right sites are the same for all its pages. The exception is when the site has independent subsites - they can use their own navigation scheme.
Convenient navigation
Navigation is convenient if you can easily answer three questions on any page of the site.
Ø Where am I? The user clearly understands where he is located within the site.
Ø Where can I go? From each page you can get to any other page, bypassing the Home page.
Ø Where is the menu? The user does not have to scroll the page to access navigation elements.
The books listed below will be very useful for working on courses:
1. . Web design. HTML, BHV-Petersburg, 2003.
2. Dmitry Kirsanov. Web design. St. Petersburg: Symbol, 1999.
Loading...
