— WITAJ INTERNAUTO —
Jeśli jesteś programistą, web developerem lub po prostu pasjonatem technologii www, to dobrze trafiłeś. Bowiem tu znajdziesz praktyczne narzędzia, które będą stanowić solidną bazę do rozwoju Twoich projektów.
W sekcji zakładek udostępniłem kilka funkcji, które pozwolą zaoszczędzić czas i zautomatyzować część procesów. Dekoder HTML pomoże w dekodowaniu i enkodowaniu tekstu, co jest szczególnie przydatne przy pracy z danymi z sieci. Jeśli potrzebujesz generatora haseł, mam tu prosty, ale funkcjonalny sposób na stworzenie bezpiecznych i losowych haseł. Natomiast narzędzie do zliczania samogłosek i znaków w tekście umili pracę z dokumentami.
Znajdziesz tu również skrypt jQuery, do implementacji dynamicznych elementów na stronach internetowych, szybki quiz edukacyjno-rozrywkowy, kalkulator do obliczania stężenia procentowego roztworu, licznik odwiedzin strony dla miłośników statystyk oraz kalendarz świąt aby nie umknęło żadne ważne wydarzenie.
Celem tej strony jest dostarczenie prostych narzędzi do wsparcia kreatywności, produktywności i nauki. Niezależnie od tego, czy jesteś początkującym czy doświadczonym programistą, mam nadzieję, że to miejsce będzie dla Ciebie pomocne, a każda praca z webowymi projektami stanie się szybsza, łatwiejsza i bardziej efektywna.
— KODOWANIE I DEKODOWANIE TEKSTU/HTML —
— ZLICZANIE ZNAKÓW W TEKŚCIE —
— GENERATOR HASEŁ —
— DYNAMICZNE WCZYTYWANIE TREŚCI STRON INTERNETOWYCH —
Poniższy skrypt jest moją autorską modyfikacją skryptu stworzonego przez Jesse Shawl, który umożliwia dynamiczne i płynne wczytywanie kontentu strony bez konieczności przeładowywania całej jej zawartości, co znacząco przyspiesza interakcję z witryną.
Skrypt bazuje na bibliotece jQuery. Ułatwia ona manipulację elementami DOM (ang. Document Object Model) oraz obsługę zdarzeń w dokumencie HTML, przez to staje się bardziej uniwersalny i łatwiejszy do integracji z różnymi frameworkami i pluginami. Dodatkowo, użycie jQuery upraszcza korzystanie z AJAX (ang. Asynchronous JavaScript and XML), a to pozwala na asynchroniczne ładowanie danych z serwera i eliminację konieczność odświeżania całej strony. Takie podejście umożliwia płynne dodawanie nowych elementów treści, takich jak np. artykuły, obrazy, czy komentarze, bez zakłócania pracy użytkownika na stronie.
Skrypt zoptymalizowany pod kątem, m.in.:
MagnificPopup — biblioteka umożliwiająca tworzenie okienek modalnych i galerii.
JwPlayer — zaawansowany odtwarzacz audio i wideo.
VegasSlideshow — prosty sposób na dodanie interaktywnych slajdów tła z animacjami.
MediaElementJs — odtwarzacz multimedialny z obsługą HTML5/Flash.
PrismJs — lekka i szybka biblioteka do podświetlania składni w kodzie źródłowym.
NiceScroll — łatwa personalizacja pasków przewijania.
Formularz kontaktu, księgi gości, itp. — efektywna interakcja z użytkownikami.
Sklep internetowy — dynamiczne ładowanie produktów, koszyka, finalizacji oraz potwierdzenia zakupu. Możliwa integracja z Inpost, Pocztex a także z systemami płatności online.
Jedną z kluczowych zalet tego skryptu jest jego współpraca z biblioteką Bootstrap. Dzięki tej integracji, skrypt wykorzystuje wbudowane komponenty i klasy CSS, takie jak siatki, przyciski, modale czy powiadomienia, co skraca proces tworzenia aplikacji webowych. Dodatkowo, taka współpraca pozwala na tworzenie responsywnych, estetycznych i funkcjonalnych interfejsów dopasowanych do różnych rozdzielczości ekranów.
Konfiguracja skryptu jest łatwa i elastyczna w dostosowaniu do indywidualnych potrzeb. Można go zaadoptować dla różnych typów stron, od prostych blogów, przez sklepy internetowe, aż po bardziej zaawansowane interfejsy webowe. Integracja z AJAX i możliwość wczytywania treści w tle sprawiają, że jest to rozwiązanie idealne do tworzenia dynamicznych witryn wymagających płynności i minimalizacji czasów ładowania.
Dzięki zastosowaniu tego skryptu, użytkownicy mają poczucie, iż strona staje się bardziej interaktywna i szybsza w działaniu.
index.html
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Dynamic Page Replacing Content</title>
<meta charset="utf-8">
<link href="css/prism.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/script.js"></script>
<script src="js/prism.js"></script>
<style>
pre {
max-height: 500px;
}
</style>
</head>
<body>
<div id="wrapper">
<nav>
<ul>
<li><a class="ajax" href="index.html">Home</a></li>
<li><a class="ajax" href="about.html">About</a></li>
<li><a class="ajax" href="services.html">Services</a></li>
<li><a class="ajax" href="contact.html">Contact</a></li>
</ul>
</nav>
<div class="loader"></div>
<div class="load-here">
<a class="ajax" href="hello.html">Hello!</a>
</div>
</div>
</body>
</html>
script.js
// load-script
$(document).ready(function(){
$.fn.ajax();
$.prismJs();
});
// main-script
// based on https://jesse.sh/rethinking-dynamic-page-replacing-content
// script with custom modification made by https://roberturbaniak.pl
// in case of use keep above information
$.fn.ajax = function(){
if (history.pushState){
$("#wrapper").on("click", ".ajax", function(){
var loadLink = $(this).attr("href");
history.pushState(null, null, loadLink);
loadContent(loadLink);
return false;
});
window.loadContent = function(href){
$(".dropdown").removeClass("open");
$(".load-here").fadeOut(0, function(){
$(".loader").fadeIn(0);
$(this).load(href + " .load-here > * ", function(e){
document.title = e.match(/<title>([^<]*)/)[1];
$(".loader").delay(250).fadeOut(0);
$(this).delay(250).fadeIn(0, function(){
$.prismJs();
});
console.log(href);
});
});
}
$(window).on("popstate", function(){
loadLink = location.pathname.replace(/^.*[\\\/]/, "");
loadContent(loadLink);
});
}
}
// prism-js
// based on https://prismjs.com
$.prismJs = function(){
Prism.highlightAll();
$(window).on("load resize", function(){
$("pre").hasClass("pre");
});
}
— LICZNIK ODWIEDZIN STRONY —
Licznik pozwala na śledzenie liczby odwiedzin Twojej strony oraz wysyła automatyczne powiadomienia e-mail. Jest to przydatne narzędzie do monitorowania aktywności użytkowników witryny.
Licznik działa w oparciu o plik tekstowy counter.txt, w którym zapisywana jest aktualna liczba odwiedzin. Skrypt PHP, odporny na resetowanie, za pomocą sesji śledzi liczbę unikalnych wizyt na stronie i aktualizuje wartość przy każdej wizycie. Gdy liczba odwiedzin osiągnie zadany próg, skrypt wyśle powiadomienie e-mail z informacją o bieżących wskazaniach.
Poprawnie skonfigurowany plik counter.txt musi mieć na serwerze ustawione uprawnienia chmod z wartością 666, jest to parametr dla zapisu i odczytu dla wszystkich użytkowników, a także wartość początkową w pliku tekstowym przypisaną dowolnej liczbie naturalnej.
index.html
<?php require_once "php/counter.php"; ?>
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Page Counter</title>
<meta charset="utf-8">
</head>
<body>
<div class="page-counter">visits: <?php echo $_SESSION["visited"]; ?></div>
</body>
</html>
counter.php
<?php
// page counter
// based on http://forum.php.pl/Resetuje_mi_sie_licznik_odwiedzin_t26791.html
// script with custom modification made by https://roberturbaniak.pl
// in case of use keep above information
session_start();
$entrances = 5000;
function counter($entrances) {
if (!isset($_SESSION["visited"])) {
$name = "counter/counter.txt";
if ($file = fopen($name, "r+b")) {
flock($file, LOCK_EX);
$counter = fgets($file);
$counter++;
fseek($file, 0, SEEK_SET);
fputs($file, $counter);
flock($file, LOCK_UN);
fclose($file);
}
$_SESSION["visited"] = $counter;
}
if ($_SESSION["visited"] % $entrances == 0) {
$sender = "your@email.com";
$recipient = "your@email.com";
$subject = "Website visitor statistics";
$contents = file_get_contents("counter/counter.txt");
$message = "<b>The page visit counter has increased by:</b> $entrances views.<br><b>The current counter status is:</b> $contents views.";
$headers = "From: $sender \r\n" . "Reply-To: $recipient \r\n" . "X-Mailer: PHP/" . phpversion() . "\r\n" . "Content-type: text/html; charset=utf-8";
mail($recipient, $subject, $message, $headers);
}
}
counter($entrances);
?>
Aby uniknąć problemów z sesją licznika, należy zainicjować wszystkie aktywne sesje za licznikiem w następujący sposób:
if (!isset($_SESSION)) {
session_start();
}
— QUIZ —
Zagadka Einsteina lub zagadka rybki — zagadka znana w kilku różnych wersjach, której autorstwo przypisuje się Albertowi Einsteinowi. Podobno powiedział, że rozwiąże ją jedynie 2% populacji świata. Czasami za jej twórcę uważa się Lewisa Carolla.
5 osób różnych narodowości zamieszkuje 5 różnych domów w 5 róznych kolorach. Wszyscy jedzą 5 różnych owoców, piją 5 różnych napojów i hodują zwierzęta 5 różnych gatunków. Pytanie, której narodowości osoba hoduje w domu rybki?
W odpowiedziach w tabeli użyj słów z nawiasów przy pytaniach. Quiz zostanie uznany za rozwiązany kiedy wszystkie odpowiedzi będą poprawne.
1. Norweg zamieszkuje dom nr 1. (norweg)
2. Anglik mieszka w czerwonym domu. (anglik, czerwony)
3. Zielony dom znajduje się po lewej stronie białego domu. (zielony, biały)
4. Duńczyk pija herbatę. (duńczyk, herbata)
5. Zjadacz jabłek mieszka obok hodowcy kotów. (jabłka, koty)
6. Mieszkaniec żółtego domu zjada śliwki. (żółty, śliwki)
7. Niemiec zjada pomarańcze. (niemiec, pomarańcze)
8. Mieszkaniec środkowego domu pija mleko. (mleko)
9. Zjadacz jabłek ma sąsiada, który pija wodę. (jabłka, woda)
10. Zjadacz bananów hoduje ptaki. (banany, ptaki)
11. Szwed hoduje psy. (szwed, psy)
12. Norweg mieszka obok niebieskiego domu. (norweg, niebieski)
13. hodowca koni mieszka obok żółtego domu. (konie, żółty)
14. Zjadacz gruszek pija piwo. (gruszki, piwo)
15. W zielonym domu pija się kawę. (zielony, kawa)
— STĘŻENIE PROCENTOWE ROZTWORU —
| substancja | masa substancji [g] | stężenie [%] |
|---|---|---|
| X |
|
|
| Y |
|
|
| Z |
|
|
| SUMA |
— KALENDARZ ŚWIĄT —
| Pon | Wt | Śr | Czw | Pt | Sob | Nie |
|---|---|---|---|---|---|---|
| 25 | 26 | 27 | 28 | 29 | 30 | 1 |
2 | 3 | 4 Barbórka | 5 | 6 Mikołajki | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 Wigilia | 25 Boże Narodzenie | 26 Boże Narodzenie | 27 | 28 | 29 |
30 | 31 Sylwester | 1 | 2 | 3 | 4 | 5 |
— PROJEKT STRONY INTERNETOWEJ —
Jeśli jesteś zainteresowany projektem strony internetowej, wykonanej w WordPress lub Bootstrap, koniecznie napisz do mnie!, chętnie pomogę, zapewniając, że koszt usługi nie będzie wygórowany.