Autor: hostingi

Jak stworzyć własny wirtualny dysk w internecie

hostingi

Większość z nas wie, co to jest ten wirtualny dysk (tzw. chmura), wielu używa dysków Google Drive czy OneDrive. Największą zaletą tego typu rozwiązań jest to, że masz dostęp do swoich plików praktycznie na całym świecie. Wystarczy urządzenie z dostępem do internetu. Niestety wadami tego typu rozwiązań, jest niewielka pojemność dyskowa (w wersjach darmowych), brak pełnej kontroli czy możliwość zablokowania dysku przez zewnętrznego dostawcę.

Dlatego w tym artykule opiszę, jak stworzyć własny prywatny dysk wirtualny. Zaletą tego rozwiązania jest pełna niezależność. Od Ciebie zależy, jaką pojemność będzie miała Twoja prywatna chmura. Do tego możesz sam zdefiniować jaki ma mieć adres, używając własnej domeny internetowej. No i najważniejsze będzie to dysk, tylko na Twoją wyłączność. Będziesz mógł przechowywać na nim własne pliki, filmy, zdjęcia czy muzykę.

Oczywiście do tego będziesz potrzebował hostingu i domeny internetowej (jeśli chcesz mieć swój indywidualny adres wirtualnego dysku), co oczywiście jest płatne. Jeśli masz już hosting, to można to zrobić jego ramach. Natomiast jeśli nie masz, możesz wykupić w dobrej cenie, o czym poniżej.

Opiszę to w dwóch sposobach. Pierwszy będzie szybszy i prostszy, natomiast drugi sposób będzie opisywał ręczną instalację dysku na serwerze. Do celów artykułu wybrałem według mojej opinii, najciekawszy skrypt – ownCloud. Jest on na licencji Open Source, czyli jest w pełni darmowy.

1 sposób (prostszy i szybszy)

Jeśli nie masz jeszcze wykupionego hostingu i domeny, pod swój własny wirtualny dysk, polecam wybrać taki, który ma w swojej ofercie dostępne autoinstalatory w tym ownCloud. Dzięki temu zainstalujesz skrypt jednym kliknięciem. Takim hostingiem jest m.in. Seohost.pl, który polecam. Oczywiście najpierw będziesz musiał założyć konto klienta, wykupić hosting i domenę, a następnie zaparkować domenę w Seohost. Domena nie jest wymagana. Jeśli Ci na tym nie zależy, możesz użyć domyślnego adresu, który jest dostarczany bezpłatnie do każdego serwera hostingowego. Jeśli będziesz potrzebował maszyny z mocniejszymi zasobami sprzętowymi, możesz również pomyśleć o hostingu VPS.

Gdy już masz to wszystko zrobione, wystarczy się zalogować za pomocą panelu administracyjnego DirectAdmin. Wchodzisz w lewym menu w Polecane aplikacje -> WordPress. W otwartej stronie wybierasz Katalog aplikacji i niżej w kategorii Aplikacje dla Zdjęcia i Pliki klikasz w ownCloud i +instaluj tę aplikację. Oczywiście w tej kategorii jest więcej skryptów chmurowych, możesz je sobie potestować. My natomiast skupmy się na ownCloud. Po jego wybraniu, otworzy się formularz instalacyjny, który trzeba wypełnić tak jak na obrazku poniżej:

autoinstalator owncloud w seohost.pl

Właściwie wybierasz tylko domenę, na której ma być zainstalowany skrypt oraz dane administratora – login, hasło i e-mail, za pomocą których będziesz się logować na dysk. Pozostałe ustawienia mogą pozostać domyślne. Po kliknięciu + Zainstaluj, robota jest już skończona. Masz już osobisty dysk wirtualny do przechowywania plików. Wystarczy wejść na adres domeny i się zalogować.

logowanie owncloud

Po zalogowaniu masz dostęp do panelu w którym możesz tworzyć swoje foldery, dodawać pliki czy je udostępniać. Słowem wszystko to co możliwe jest w innych systemach chmurowych.

panel użytkownika owncloud

Istnieje również dodawanie nowych użytkowników, jeśli chciałbyś przydzielić dostęp do dysku innym osobom. Skrypt posiada polską wersję językową, ale niestety zdarzają się nieprzetłumaczone fragmenty.

2 sposób (ręczna instalacja)

Drugi sposób przeznaczony jest raczej dla bardziej doświadczonych webmasterów, którzy poradzą sobie z założeniem bazy danych, wrzuceniem plików źródłowych na serwer przez FTP itp. Oczywiście do tego wszystkiego musisz posiadać serwer hostingowy z obsługą PHP i baz danych MySQL.

W pierwszej kolejności, ściągnij pliki źródłowe (w ZIP) ownCloud ze strony – Download Server Packages – ownCloudhttps://owncloud.com/download-server/

Rozpakuj je na swoim komputerze i wgraj wszystkie pliki na serwer poprzez FTP lub wgraj paczkę i rozpakuj bezpośrednio na serwerze jeśli masz taką możliwość, co będzie szybszym rozwiązaniem. W międzyczasie w panelu swojego hostingu utwórz bazę danych w MySQL (nazwa bazy, użytkownik i hasło), która będzie niezbędna do działania tego systemu chmurowego.

Gdy już masz wszystko, wystarczy wejść na domenę (lub subdomenę) która kieruje na folder z plikami skryptu. Po wejściu pojawi się okienko instalacyjne w którym, utworzysz konto administratora oraz będziesz mógł wpisać parametry serwera MySQL lub SQLite.

Po wpisaniu nazwy użytkownika i hasła, kliknij w Storage & database. Rozszerzy się formularz, w którym należy zaznaczyć rodzaj bazy danych (MySQL), następnie użytkownika bazy, hasło, nazwę bazy i host (najczęściej jest to localhost), które wcześniej utworzyłeś w panelu hostingowym.

Jeśli tego nie zrobiłeś, zawsze możesz zaznaczyć opcję SQLite, wtedy dane te nie będą potrzebne, a instalacja sama stworzy bazę danych w systemie plików. Po kliknięciu w przycisk Finish setup, nastąpi finalizacja instalacji, która potrwa kilkanaście sekund. Jeśli wszystko będzie w porządku, wyskoczy okno do zalogowania się na wirtualny dysk ownCloud. Gotowe.

Co ciekawe dostęp do własnej chmury, którą przed chwilą zainstalowałeś, możesz mieć nie tylko przez przeglądarkę internetową z dowolnego komputera na świecie, ale również przez aplikacje na smartfona, za pomocą której można przeglądać pliki i synchronizować je z serwerem.

Jak wstawić znak wodny w HTML na stronie?

hostingi

Wstawianie znaku wodnego najczęściej praktykuje się w różnego rodzaju grafikach i zdjęciach, gdzie trzeba oznaczyć obraz nazwą autora lub logo firmy, która wykonała dane dzieło. Ale co jeśli chce ktoś umieścić taki znak wodny, pod tekstem na swojej stronie www? Można to w prosty zrobić za pomocą tandemu HTML+CSS.

Na początek potrzebny Ci będzie plik graficzny, który chcesz wrzucić pod tekst. Ważne żeby to był plik z przezroczystością (png lub gif). Jeśli będzie na białym tle, to również może być, ale tylko pod warunkiem że tło na stronie również jest białe. W innym przypadku będzie to źle wyglądało.

W naszym przypadku użyjemy tej grafiki:

przykładowa grafika pod znak wodny

Następnie trzeba zdefiniować w CSS tak, aby powyższy obrazek stworzył tło pod blokiem tekstowym. Do tego wystarczy użyć reguły background-image. Poniżej pełen listing HTML+CSS w którym pomocniczo, dodane jest jeszcze kilka innych reguł:

<html>
<head>
<style type="text/css">
p {
	border: medium solid back;
	font-size: 30px;
	background-color: #F5F5F5;
	background-image: url(znak-wodny.png);
	background-size: contain;
	background-repeat: round;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>

Pogrubioną czcionką zaznaczyłem fragment kodu, odpowiedzialnego za działanie skryptu. W efekcie uzyskasz takie coś:

przykład wstawiania znaku wodnego w html i css

Jak widać trochę obrazek gryzie się z tekstem, bo powinien być trochę bladszy i najlepiej w jasnoszarym kolorze. Ale tutaj bardziej chodzi o pokazanie na przykładzie.

Teraz wyjaśnię poszczególne linijki:

background-color: #F5F5F5; – ustalanie koloru tła akapitu, w przykładzie lekko szary
background-image: url(znak-wodny.png); – tutaj najważniejsza linijka w której wstawiasz lokalizację pliku graficznego na serwerze, który posłuży jako tło czyli znak wodny
background-size: contain; – tutaj ustala się wielkość obrazu, można ustawić ręcznie w jakim rozmiarze ma się wyświetlać, albo wybrać jedne z gotowych przełączników:
– contain – skalowanie do największego rozmiaru, który zmieści się w obrębie pola tekstowego (z zachowaniem proporcji)
– cover – skalowanie do najmniejszego rozmiaru
– auto – wyświetlanie w pełnym rozmiarze
background-repeat: round; – ustawianie powtórzeń obrazka oraz jego orientacja:
– repeat-x – powtarzanie, orientacja w poziomie, może być urwany
– repeat-y – powtarzanie, orientacja w pionie, może być urwany
– repeat – powtarzanie w obu kierunkach, urwany
– space – dostosowanie aż do wypełnienia obszaru, bez urywania, rozłożenie równomierne
– round – skalowanie w taki sposób żeby nie urywać
– no-repeat – bez powtarzania

Oczywiście opcji jest jeszcze więcej, można je znaleźć w oficjalnej dokumentacji CSS. Chociaż użycie powyższych instrukcji w zupełności wystarczy, aby umieścić dowolny plik graficzny na stronę w postaci znaku wodnego.

Jak zrobić kilka linków na jednym obrazku? [HTML]

hostingi

Webmasterzy dość często umieszczają linki w obrazkach na stronie, dzięki czemu grafika zdaje się aktywnym hiperłączem. Gdy ktoś w nią kliknie, przenosi się na wcześniej zdefiniowaną w linku podstronę lub stronę zewnętrzną. Ale czy można dodać kilka takich odnośników na jednym obrazku w HTMLu? Jak najbardziej można, i nazywa się to mapowanie obrazu od nazwy znacznika <map>, który jest za to odpowiedzialny.

Dzięki temu że znacznik <map> definiuje się w języku HTML, to wszystko dzieje się po stronie przeglądarki użytkownika, a nie serwera na którym stoi strona www. Za jego pomocą ustala się ile, jakie i w którym miejscu obrazka, mają być aktywne odnośniki do innych podstron.

Teraz zróbmy taką mapę na przykładzie prostej grafiki, zawierającej trzy kwadratowe ikonki. Tak żeby każda z ikonek była aktywnym linkiem.

Poniżej kod źródłowy:

<img src="grafika.png" usemap="#mapalinkow" alt="mapa hiperłączy" />

<map name="mapalinkow">
<area href="index.html" shape="rect" coords="49,46,178,170" alt="Strona główna" />
<area href="podstrona1.html" shape="rect" coords="265,46,392,170" alt="Podstrona 1" />
<area href="podstrona2.html" shape="rect" coords="471,46,598,170" alt="Podstrona 2" />
</map>

I tak, najpierw zdefiniowałem w znaczniku <img> to, że grafika ma być zmapowana i nadałem jej nazwę usemap="#mapalinkow". Dopiero niżej znajduje się właściwa struktura mapy, która tworzy trzy różne hiperłącza na grafice.

Poniżej przykład działania (najedź kursorem myszki):

mapa hiperłączy Strona główna Podstrona 1 Podstrona 2

Jak widzisz, każdy z żółtych kwadracików tworzy obszar obrazu z aktywnym odsyłaczem do różnych podstron, natomiast szare pole wokoło jest zwykłą częścią grafiki.

Wróćmy jeszcze do listingu. Zauważ że do stworzenia odnośników, nie użyłem elementu <a> tylko <area> ze znacznikami shape i coords.

Atrybut shape="rect" oznacza że obszar ma być prostokątny, natomiast w coords określasz jego dokładny zakres za pomocą czterech liczb całkowitych, oddzielonych przecinkiem. Liczby te, są wymiarami elementu od krawędzi obrazka, wyrażone w pikselach:

mapowanie linków na obrazku wymiary

coords="49,46,178,170"

Pierwsza liczba 49 – odległość pomiędzy lewą krawędzią obrazka a lewą krawędzią kwadratu
Druga liczba 46 – odległość pomiędzy górną krawędzią obrazka a górną krawędzią kwadratu
Trzecia liczba 178 – odległość pomiędzy lewą krawędzią obrazka a prawą krawędzią kwadratu
Czwarta liczba 170 – odległość pomiędzy górną krawędzią obrazka a dolną krawędzią kwadratu

Jeśli chciałbyś ustawić na grafice obszar kołowy, używasz wtedy atrybutu circle, natomiast jeśli kształt miałby być wielokątny trzeba użyć atrybutu poly.

No i na koniec ostatnia ciekawa opcja. Jeśli chciałbyś aby pozostała część zdjęcia (w naszym przypadku wszystko wokoło na szaro), również gdzieś odnosiła, możesz na końcu użyć atrybutu default:

<area href="reszta.html" shape="default" alt="Strona defaultowa" />

Jak widzisz mapowanie obrazu dość łatwo zrobić w HTMLu. Jedyną wadą tego rozwiązania jest to, że na pierwszy rzut oka nie widać na zdjęciu, że posiada ono w sobie 3 niezależne linki. Jest to widoczne dopiero po najechaniu kursorem myszki. Dlatego warto ten fakt odnotować na swojej stronie internetowej lub zaznaczyć graficznie na zdjęciu.