Wpisy

Jak przygotować zdjęcia na stronę internetową?

Zdjęcia na stronie internetowej to najważniejszy element, który przyciąga uwagę potencjalnego klienta. Dlatego tak ważna jest jakość tych zdjęć, pamiętając jednak że musimy zachować umiar, bo wysoka jakość zdjęcia wiąże się z dłuższym wczytywaniem pliku. Jak w takim razie zachować kompromis mając odpowiednią jakość i wielkość pliku grafiki?  Na to pytanie odpowiem w tym wpisie.

Kiedyś większość komputerów była z monitorami 17 calowymi, a maksymalna szerokość stron wynosiła zaledwie 980 px. Dziś wielkość ekranów na których wyświetlane są strony internetowe jest tak rożna, że trudno jest dostosowywać się do każdego z nich. Co prawda najlepiej by było gdyby nasza grafika wszędzie szybko się ładowała bez skalowania, ale jest to raczej niemożliwe.

Dla urządzeń przenośnych typu tablet, smartfon potrzebujemy innego rozmiaru pliku grafiki dla laptopów innego i jeszcze innego dla monitorów w zestawach komputerowych.

Jaki rozmiar zdjęć na stronę internetową?

Zdjęcie na baner zajmujący cały ekran, zalecam szerokości 2000px

Zdjęcie na standardowy baner, zalecam szerokości 1400px

Zdjęcia produktów:

  • Nie większe niż: szer. 1500px, wys. 1000px
  • Nie mniejsze niż: szer. 750px, wys.500px

Jaki typ pliku grafiki?

Plik jpg jest najpopularniejszym rodzajem pliku graficznego umieszczanego ma stronie internetowej, głównie ze względu na dobrą jakość i małą wagę.

Plik png zapisuje grafikę lepszej jakości niż jpg. Dodatkowo png posiada możliwość zapisu przezroczystego tła, czego nie ma w plikach jpg. Wielkość pliku png jest większa niż jpg.

Typ pliku zależy więc od efektów jaki chcemy uzyskać. Inne rodzaje plików możemy pominąć, no chyba że zależy nam na animacji to zapisujemy jako gif.

Jaki program do obróbki grafiki?

Polecam Gimpa, jest darmowy i posiada wszystkie niezbędne funkcje potrzebne do przygotowania grafiki na stronę internetową.

Z płatnych programów polecam Photoshopa, chyba każdy słyszał o tym narzędziu i jego możliwościach.

Jak zrobić zdjęcia produktów na stronę internetową?

No i najważniejsze zdjęcie – to od niego wszystko się zaczyna. Zdjęcie powinno być wykonane starannie, najlepiej na jednolitym kontrastowym tle z odpowiednim oświetleniem. Jednolite tło łatwo można wyciąć i wstawić inne, lub zapisać zdjęcie bez tła jako png.

Przy dobrze zrobionym zdjęciu nie będą potrzebne sztuczki w Photoshopie wystarczy Gimp jeśli byśmy chcieli wprowadzić zmiany lub dodać napis czy logo. No właśnie logo – warto oznaczyć swoje zdjęcia poprzez dodanie logo jako znaku wodnego lub po prostu wstawić w rogu zdjęcia.


Jeśli masz pytania odnośnie tworzenia grafiki, zdjęć lub po prostu potrzebujesz pomocy w przygotowaniu grafiki na stronę internetową napisz wiadomość lub dodaj komentarz do tego wpisu.

STRONNET Sylwia Płonka

"Firmy, które rosną dzięki rozwojowi i ulepszeniom, nie zginą." Henry Ford

Zasady projektowania strony internetowej

Główne cechy dobrej witryny to przejrzystość, szybkie działanie oraz łatwa obsługa.

Czynniki wpływające na jakość strony

Cel strony – tworzona strona musi mieć cel, nie tworzymy przecież witryny internetowej dla samego kaprysu.

Sprawność działania witryny – źle działająca strona, posiadająca dużo błędów i długi czas ładownia będzie spostrzegana jako nieatrakcyjna. Użytkownik nie podejmie się czytania,  bo zanim strona się załaduje zdąży przejść na inną stronę.

Zrozumiałość witryny – zarówno w treści jak i zasadach funkcjonowania oraz w nawigacji.

Najczęstsze problemy projektowania witryn internetowych

  1. Korzystanie z Flash – technologia ta nie jest zalecana ponieważ strona w Flash wymaga pobierania i instalowania dodatkowych pluginów w celu wyświetlenia strony.
    Animacje odtwarzane w cyklu ciągłym dekoncentrują użytkownika i rozpraszają jego uwagę.
  2. Ograniczenie autonomii użytkownika poprzez:
  • zmianę sposobu funkcjonowania przycisków
  • niezgodne przekierowania
  • stosowanie „wyskakujących” okienek
  • stosowanie okien pełnoekranowych.
  1. Zbyt długi czas ładowania strony
  2. Reklamy
  3. Źle rozplanowana nawigacja np. brak przycisku „powrót do strony głównej”
  4. Strona główna nie zawiera wszystkich istotnych dla użytkownika linków
  5. Używanie linków w rodzaju „kliknij tutaj”.

Rola projektanta strony internetowej

Projektant strony www tworzy interfejs służący do komunikacji pomiędzy swoim klientem (właścicielem serwisu) a użytkownikiem.  W tym celu musi zapewnić użytkownikowi poczucie swobodnego poruszania się po stronie i wzbudzić w nim pozytywne uczucia np. poprzez użycie odpowiednich kolorów.

Przy projektowaniu strony musimy wiedzieć do kogo adresowany jest projekt, znać:

  • wiek odbiorcy
  • zainteresowania
  • wymagania (standardy jakości)
  • częstotliwość korzystania z Internetu
  • jakiego używa sprzętu.

Projektowanie wstępne

Zaczynamy od strony głównej i nawigacji. Projekt powinien mieć konstrukcję pozwalającą na łatwe dodawanie nowych elementów oraz zmiany ich kolejności.
Najważniejsze informacje umieszczamy na górze strony, tak aby były widoczne w całości, bez konieczności przewijania. Używamy krótkich zdań, wyróżniając ważne zwroty i słowa. Odwracamy logikę tekstu – wnioski umieszczamy na początku strony.

Pamiętaj, że czytanie na ekranie sprawia większą trudność niż czytanie na papierze, stąd tendencja użytkowników do prześlizgiwania się wzrokiem po tekście w poszukiwaniu informacji. Długie teksty należy dzielić na krótsze i rozdzielać je nagłówkami.

Jak pisać na stronie?

  1. Stosuj nie więcej niż 3 rodzaje czcionek.
  2. Odnośniki tekstowe tak zwane linki pozostaw ich typowy wygląd.
  3. Unikaj tworzenia odnośników z całych zdań.
  4. Unikaj czcionek szeryfowych stosując czcionki proste.
  5. Podobnie unikaj czcionek dekoracyjnych i kursyw.
  6. Nie stosuj wyśrodkowywania tekstu oraz wyrównywania do prawej strony.
  7. Kolory tła zbliżone do koloru tekstu lub nadmiernie z nim kontrastujące zmniejszają czytelność tekstu.
  8. Ciemny tekst na białym tle jest bardziej czytelny niż biały tekst na ciemnym tle.

 

STRONNET Sylwia Płonka

"Firmy, które rosną dzięki rozwojowi i ulepszeniom, nie zginą." Henry Ford

Jak zrobić stronę internetową dostosowaną do urządzeń mobilnych

Opisujemy jak zrobić stronę internetową, tak zwaną wizytówkę. jak zrobić stronę internetowąZastosujemy kodowanie HTML5, w celu uzyskania jak najbardziej aktualnej wersji, oraz dostosujemy stronę do urządzeń mobilnych.

Dlaczego warto pamiętać o użytkownikach urządzeń mobilnych takich jak smartfony i tablety? Dlatego, ponieważ zwiększa się ich ilość. Twoja wizytówka internetowa powinna być dostosowana do tych urządzeń.

strona internetowa html5

Jak zrobić stronę internetową w HTML5

 

Twoja strona internetowa – część HEAD

W części HEAD wpisujemy informacje, które nie są widoczne w treści strony, ale są bardzo istotne dla poprawności dokumentu HTML, a tym samym dla pozycjonowania.

 

<head>
  <meta charset="UTF-8">        
  <title>Tytuł Twojej strony</title>        
  <meta name="Description" content="Opis strony" />
  <meta name="Keywords" content="Słowa kluczowe" />
  <style>Style strony</style>        
</head>

Kodowanie znaków

Kodowanie UTF-8  umożliwia poprawne wyświetlanie polskich znaków na stronie internetowej. Warto zwrócić uwagę na kodowanie pliku. Sam meta-tag może nie odpowiadać za poprawność kodowania, ponieważ jest to informacja dla przeglądarki. Jeśli taki problem się pojawi to przy pomocy edytora zmieniamy definicję strony kodowej – na przykład z iso-8859-2 na UTF-8.

<meta charset="UTF-8">

Meta-tagi

Description – to opis strony, który wyświetla się w wynikach wyszukiwarek. Jeśli go nie posiadamy to robot indeksujący pobiera opis z treści strony. Długość opisu nie powinna przekraczać 160 znaków. Więcej informacji na ten temat można znaleźć w naszym poradniku Pozycjonowanie stron internetowych.

Keywords – to słowa kluczowe występujące na stronie internetowej. Ten meta-tag obecnie przez wyszukiwarkę Google nie jest brany pod uwagę.

<meta name="Description" content="Opis strony" />
<meta name="Keywords" content="Słowa kluczowe" />

Tytuł strony internetowej

Tytuł strony internetowej pojawia się w wynikach wyszukiwania oraz w zakładce okna przeglądarki. Tytuł jest tym elementem, który zdecydowania wpływa na pozycjonowanie strony. Jego długość nie powinna przekraczać  60 znaków, a wykorzystane słowa kluczowe powinny być umieszczone w treści strony. Więcej informacji można znaleźć w poradniku Pozycjonowanie stron internetowych.

<title>Tytuł Twojej strony</title>

Style strony

<style>Style strony</style>

Twoja strona internetowa – część BODY

Teraz przedstawiamy jak zrobić stronę internetową w części BODY stosując HTML5

<body>
  <header>
    ...
  </header>
  <nav id="menu">
    ...
  </nav>
  <article>
    ...
  </article>
  <footer>
    ...
  </footer>
</body>

Nagłówek strony

<header>
  <h1>Nazwa firmy</h1>
  <h2>Krótki opis firmy.</h2>
  <img src="baner.jpg" alt="nazwa grafiki" />
</header>

Menu strony

<nav id="menu">
  <a href="#">O firmie</a>
  <a href="#oferta" >Oferta</a>
  <a href="#kontakt" >Kontakt</a></li>
</nav>

Treść strony

<article>
  <h2>O firmie</h2>
  <p>
  </p>
</article>
<article>
  <h2>Oferta</h2>
  <p>
  </p>
</article>
<article>
  <h2>Kontakt</h2>
  <p>
  </p>
</article>

Stopka strony

<footer>
  <p> Nazwa firmy &copy; 2016 </p>
</footer>

 

Jeśli masz trudności w kodowaniu HTML i CSS i nie wiesz  jak zrobić stronę internetową to skontaktuj się z nami, a my profesjonalnie wykonamy to zlecenie.

Dla zainteresowanych samodzielnym tworzeniem strony – darmowa strona internetowa – udostępniamy plik index.html.

Plik po pobraniu należy uzupełnić o treść oraz grafikę. Następnie umieścić na serwerze wraz z plikami jpg.

 

 

STRONNET Sylwia Płonka

"Firmy, które rosną dzięki rozwojowi i ulepszeniom, nie zginą." Henry Ford

Tworzymy szablon WordPress – strona internetowa

,

Jak zrobić stronę internetową własny szablon WordPress?

Strona HTML w WordPress składa się z kilku części:

Z nagłówka strony, gdzie zawarte są informacje takie jak tytuł strony, opis, słowa kluczowe i inne takie jak autor strony. Określony jest sposób kodowania znaków, dla języka polskiego stosujemy utf-8. Podany jest link do stylów strony i innych potrzebnych funkcji. Strona HTML generuję się przy pomocy funkcji wywołanych w kodzie PHP, np. wp_head(). WordPress posiada mechanizmy uzupełniania tej części szablonu strony o różne pliki oraz style zainstalowanych wtyczek. Jeśli pominiemy funkcję wp_head() to włączone wtyczki mogą nie działać lub ich działanie będzie nieprawidłowe.

W przedstawionym darmowym szablonie WordPress menu wstawione zostało tutaj, za pomocą kodu

<?php wp_nav_menu(array('sort_column' => 'menu_order', 'theme_location'=>'menu')); ?>

 

nagłówek – header.php

<!DOCTYPE html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> szablon WordPress<meta name="Description" content="OPIS STRONY" />
 <meta name="Keywords" content="SŁOWA KLUCZOWE STRONY" />
 <meta name="Author" content="AUTOR" />   <link rel="stylesheet" href="../wp-content/themes/FOLDER - SZABLON STRONY INTERNETOWEJ/style.css" type="text/css" />   <title><?php bloginfo('name'); ?></title>
 <?php wp_head(); ?> //  funkcja wgrywa wszystkie ustawienia wordpress dla head. 
</head>  <body>   <header>
 <nav><?php wp_nav_menu(array('sort_column' => 'menu_order', 'theme_location'=>'menu')); ?></nav>
 </header> 

Więcej

STRONNET Sylwia Płonka

"Firmy, które rosną dzięki rozwojowi i ulepszeniom, nie zginą." Henry Ford