To strona z programami stworzonymi przy użyciu Vue, biblioteki JavaScript. Powstają z myślą o moich własnych potrzebach, a kod udostępniam tak, by można było uruchomić je na swoim serwerze. http://deko1200.mygamesonline.org/
Ilość słów: 48;
Pisanie kodu HTML w sposób logiczny i poprawny wymaga świadomości struktury oraz semantyki znaczników. Często zdarza się, że programiści nagminnie używają podstawowych znaczników, takich jak <p>, <div>, <h1>-<h6>, nie zastanawiając się nad ich odpowiednim zastosowaniem. Klucz do poprawności tkwi w zrozumieniu treści, którą chcemy umieścić na stronie, i dobraniu odpowiednich znaczników semantycznych. Takie znaczniki to na przykład <article>, <nav>, <main>, a także nagłówki <h1>-<h6>.
Schemat znaczników HTML
Poniżej przedstawiono podstawowy schemat znaczników HTML, który pomoże w tworzeniu przejrzystych i semantycznie poprawnych stron internetowych:
<html>: Główny znacznik, obejmujący całą stronę. <head>: Sekcja z meta informacjami, tytułem strony, linkami do stylów CSS, skryptami itp. <body>: Główna zawartość strony. <header>: Nagłówek strony, może zawierać logo, nawigację itp. <nav>: Nawigacja strony. <main>: Główna zawartość strony. <section>: Sekcja zawierająca powiązane tematycznie treści. <article>: Samodzielny, niezależny element treści. Nagłówki (<h1> do <h6>): Hierarchia nagłówków dla artykułu lub sekcji. <aside>: Dodatkowe treści, np. boczne panele, które są powiązane z główną zawartością. <footer>: Stopka strony, zawierająca informacje o prawach autorskich, linki do polityki prywatności itp. Korzyści z używania semantycznych znaczników Świadome wykorzystanie semantycznych znaczników poprawia dostępność strony, SEO oraz ogólną organizację i czytelność kodu. Dzięki temu użytkownicy, w tym osoby korzystające z technologii wspomagających, mogą łatwiej nawigować po stronie, a wyszukiwarki internetowe lepiej indeksują zawartość.
Struktura nagłówków w HTML
Aby określić, gdzie umieścić nagłówki <h1>-<h6> w kodzie HTML, należy zrozumieć strukturę i hierarchię treści na stronie. Oto ogólne wytyczne:
<h1> - Najważniejszy nagłówek, powinien być używany tylko raz na stronie głównej do określenia głównego tematu lub tytułu strony. <h2> - Wykorzystywany dla sekcji strony podporządkowanych <h1>, określający główne podsekcje. <h3> - Używany dla podsekcji <h2>, i tak dalej. Przykładowy kod HTML Poniżej znajduje się przykładowy kod HTML, ilustrujący poprawne stosowanie nagłówków:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykładowa strona z nagłówkami</title>
</head>
<body>
<header>
<h1>Główny tytuł strony</h1>
<nav>
<ul>
<li><a href="#section1">Sekcja 1</a></li>
<li><a href="#section2">Sekcja 2</a></li>
<li><a href="#section3">Sekcja 3</a></li>
</ul>
</nav>
</header>
<main>
<section id="section1">
<h2>Sekcja 1</h2>
<p>Tutaj jest zawartość sekcji 1.</p>
<section>
<h3>Podsekcja 1.1</h3>
<p>Zawartość podsekcji 1.1.</p>
</section>
<section>
<h3>Podsekcja 1.2</h3>
<p>Zawartość podsekcji 1.2.</p>
</section>
</section>
<section id="section2">
<h2>Sekcja 2</h2>
<p>Tutaj jest zawartość sekcji 2.</p>
<section>
<h3>Podsekcja 2.1</h3>
<p>Zawartość podsekcji 2.1.</p>
</section>
<section>
<h3>Podsekcja 2.2</h3>
<p>Zawartość podsekcji 2.2.</p>
</section>
</section>
<section id="section3">
<h2>Sekcja 3</h2>
<p>Tutaj jest zawartość sekcji 3.</p>
<section>
<h3>Podsekcja 3.1</h3>
<p>Zawartość podsekcji 3.1.</p>
</section>
<section>
<h3>Podsekcja 3.2</h3>
<p>Zawartość podsekcji 3.2.</p>
</section>
</section>
</main>
<footer>
<p>Stopka strony.</p>
</footer>
</body>
</html>
W powyższym przykładzie:
<h1> został użyty tylko raz na stronie, aby określić główny tytuł. <h2> zostały użyte dla sekcji podporządkowanych <h1>, czyli Sekcji 1, Sekcji 2 i Sekcji 3. <h3> zostały użyte dla podsekcji wewnątrz każdej <h2>, jak Podsekcja 1.1, Podsekcja 1.2 itd.
Stosowanie nagłówków zgodnie z ich hierarchią sprawia, że strona jest łatwiejsza do zrozumienia dla użytkowników oraz lepiej zindeksowana przez wyszukiwarki internetowe.
WCAG 2 – Wytyczne dla dostępności treści internetowych
Na koniec warto wspomnieć o WCAG 2, czyli zbiorze wytycznych dotyczących dostępności treści internetowych. Są one szczególnie przydatne dla osób z niepełnosprawnościami, ale także stanowią zbiór dobrych praktyk w interakcji z użytkownikiem. Zapoznanie się z tymi wytycznymi może być dla Ciebie interesującą i wartościową lekturą. Więcej informacji znajdziesz na stronie: WCAG 2.1 w języku polskim: https://www.w3.org/Translations/WCAG21-pl/.
Ilość słów: 1053;
Czasem zdarza się, że zapomnimy nazwę polecenia lub jego właściwości i musimy skorzystac ze ściągawki, takimi idealnymi podpowiedziami są specyfikacje. Standaryzacją języków takich jak HTML, CSS, XML zajmują się między innymi W3C i WHATWG. Dlatego jeśli skorzystamy z adresu html.spec.whatwg.org z pewnością znajdziemy odpowiedź na interesujące nas zagadnienie. Osobiście korzystam także z innych specyfikacji takich jak: w3schools.com i developer.mozilla.org, gdzie znajdziemy także opisy innych języków.
Zajżyjmy do W3C, gdzie dobrze zapoznamy się z możliwościami formatowania: tesktu, lub tła i obramowania. Na koniec semantyka elementów HTml 5, czyli znaczniki, które zawieają w sobie definicję, są respektowane we wszystkich przeglądarkach. Uzywamy tych elementów aby podkreślić dostępność kodu na stronie www, a także by ulepszyć strukturę, należą dop nich: article, aside, details, figcaption, figure, footer, header, main, mark, nav, section, summary, time. Po więcej udaj się pod adres technikprogramista.pl lub wpisz w wyszukiwarce zdjęć semantyka poleceń HTML.
Jeśli stawiasz pierwsze kroki w tworzeniu strony www z pomocą Bootstrap - najlepiej będzie zacząć od szablonu strony i typowych poleceń, które jasno są opisane pod oficjalnym linkiem: getbootstrap.com te same deklaracje znajdziesz pod tym adresem: bootstrapcdn.com, zwróć uwagę na wersję Frameworka, często ma to kluczowe znaczenie, natomiast w kolejnej zakładce znajdziesz rekomendacje czcionek, a także ikonek, czyli żeby korzystać z ikon Bootstrapa, musisz zaznaczyć odpowiednią deklarację.
Na stronie getbootstrap.com w dziale examples, można pobrać wszystkie motywy, dodatkowo folder "assets", zawiera wymagane style CSS.
Warto także zaglądać na bloga, gdzie dowiesz się co dzieje się aktualnie: blog.getbootstrap.com
Wspaniałe narzędzia do wypełniania Frameworka - blog.getbootstrap.com
Także na tej stronie możemy przejżeć doskonałe możliwości skryptów Bootstrap
mdbootstrap.com
Ilość słów: 1049;
Rok 2010 to czas, w którym zdecydowałem się na przerwę w twórczości internetowej, a właśnie wtedy Google zaprezentowało nowy format plików graficznych WebP.
WebP to nowoczesny format graficzny zaprojektowany z myślą o optymalizacji przesyłania i wyświetlania obrazów w internecie.
Od tego czasu format WebP zyskał popularność i jest wspierany przez większość nowoczesnych przeglądarek internetowych, takich jak Google Chrome, Firefox, Edge, oraz przez wiele narzędzi i aplikacji do edycji grafiki.
Format WebP można skutecznie wykorzystać w sklepach internetowych, portfolio, blogach i stronach mobilnych jako ikony, przyciski, bannery czy animowane ilustracje.
GIMP jest narzędziem, które pod wieloma względami dorównuje Photoshopowi, a IrfanView z wtyczką dla WebP to wyjątkowo efektywne narzędzie do edycji grafiki.
Ilość słów: 674;
Jaki chatbot AI będzie odpowiedni dla Twoich potrzeb? Istnieje wiele za i przeciw, takich jak to, czy korzystasz z internetu głównie dla relaksu, czy też zarabiasz przez internet. Postanowiłem sprawdzić, jakie odpowiedzi możemy uzyskać, zadając AI te same pytania.
"Google Bard - sprawnie zinterpretował pytanie, jednak okazało się, że nie ma dostępu do tak szczegółowych danych statystycznych. Moją ciekawość zaspokoił w 50% z innym pytaniem może poradziłby sobie lepiej."
"CzatGPT - bot doskonale poradził sobie z odpowiedzią, podając sporo szczegółów. Na przykład, obecnie w Londynie jest około 9 000 autobusów, z czego około 6 000 to dwupoziomowe autobusy. Dla porównania, w 2004 roku jeździło ich około 7 000."
CzatGPT ++++, Google Bard +++
CzatGPT, Character.AI +++
CzatGPT, Character.AI +++
CzatGPT, Character.AI +++
czatGPT +++, Character.AI ++ (czat bardziej kierował się informacjami w sieci niż własnymi przeliczeniami, uh, teraz przetestuję, Microsoft Bing Chat)
CzatGPT, Microsoft Bing Chat: +++
Bing Chat, Bard: +++
Bing Chat, Bard: +++
Bing Chat, Bard +++ (Bard jest skonstruowany tak, że rozpisuje się przy każdej odpowiedzi, natomiast Bing udziela interaktywnych linków)
Bing Chat, Bard +++ (Bard ujął to tak:
Nie istnieje taki most w rzeczywistości.
..
później:
Dlaczego taki most nie istnieje?
..
Możliwe inspiracje:
..
itd.. Bard trochę skomplikował odpowiedź, jednak prosiłem o odpowiedź w kilku zdaniach, a takie konstrukcje wbrew tłumaczeniom Barda istnieją, i Bing Chat sobie z tym radzi)
Oto ocena z użyciem plusów: (czatGPT)
Oczywiście! Oto nazwy czatbotów i ich plusy: (Bing Chat)
Ilość słów: 902;
Formularz umożliwia użytkownikom wczytanie obrazów w formacie JPG i PNG, które można następnie skompresować i skonwertować do różnych formatów.
Czasem zdarza się, że mam paczkę swoich zdjęć i potrzebuję zmniejszyć ich wagę oraz rozmiar. Umieszczam zdjęcia w galerii internetowej, więc ważne jest, aby miały zoptymalizowany rozmiar.
Walidacja weryfikuje obecność przynajmniej jednego pliku oraz wybranie akceptowanych formatów, co zapewnia lepszą obsługę użytkownika i poprawną realizację przesyłania obrazów
Ilość słów: 808;
W dużej mierze strony wspierane są językiem PHP, jest to dla mnie powszednie dla dynamicznego zarządzania treścią, korzystam także z sesji i ciasteczek. Za przewodnika wybrałem Framework Bootstrap, był to wybór intuicyjny i tak już zostało, sprawdzałem podobne Frameworki takie jak UIKit, Bulma, Tailwind CSS, Semantic UI na których opiera się Design strony, są bardzo podobne do siebie, więc polecam wybrać którykolwiek dla siebie, nie wyłączam zastosowania kolejnego Frameworka w ramach prac nad sklepem internetowym, chodzi o dostępne szablony. Przy pisaniu strony bardzo przydatne dla mnie są następujące specyfikacje: W3School, Mozilla, W3. Aktualnie wdrażam bardzo przydatne środowiska programistyczne, takie jak Ajax i MySQL.
Przy projektach stron wykorzystuję również technologię AJAX, co sprawia, że poruszanie się po stronie staje się bardziej dynamiczne. Obecnie pracuję nad skryptem PHP, który zbiera dane o użytkownikach odwiedzających stronę i zapisuje statystyki. Dodatkowo stworzyłem specjalną stronę internetową dla tego programu, którą polecam: cantori.antyki.space.
Kluczowe elementy, które zapewniają efektywny Designu strony to: responsywnośc, intuicyjna nawigacja, interaktyność, zgodność z normami. Co więcej strona powinna ładować się szybko, minimalizując czas oczekiwania użytkownika i zapewniając płynne przejścia między stronami, ale liczy się również styl i kolorystyka, powinny być atrakcyjne, zgodne z identyfikacją wizualną marki i przyjemne dla oka, zachęcając użytkowników do interakcji. Aby doświadczenie użytkownika było satysfakcjonujące niezbędna jest także optymalizacja stron internetowych pod kątem wyszukiwarek internetowych.
Aby design strony był wyjątkowy i dostarczał niezapomnianych wrażeń, warto zwrócić uwagę na kilka kluczowych aspektów technologicznych, w tym na wykorzystanie JavaScript oraz nowoczesnych frameworków JS.
JavaScript (JS) odgrywa kluczową rolę w tworzeniu dynamicznych i interaktywnych doświadczeń użytkownika. W połączeniu z technologią AJAX, JS umożliwia ładowanie i aktualizowanie treści strony bez konieczności jej przeładowywania, co znacząco poprawia płynność i szybkość działania witryny.
Interaktywność i Dynamika:
Użycie czystego JavaScriptu lub bibliotek takich jak jQuery może dodać interaktywne elementy do strony, takie jak animacje, efekty przejść czy dynamiczne aktualizacje treści. Frameworki takie jak React, Angular czy Vue.js pozwalają na budowanie bardziej zaawansowanych, jednostronicowych aplikacji (SPA), które zapewniają płynne i szybkie doświadczenie użytkownika.
Historia i Narracja:
Dzięki JavaScriptowi można tworzyć interaktywne elementy narracyjne, które angażują użytkowników i tworzą emocjonalną więź z treścią strony. Na przykład, można wdrożyć dynamiczne przewijanie lub animacje, które opowiadają historię w sposób wizualny i angażujący.
Innowacje i Personalizacja:
JavaScript może być używany do dostosowywania treści i układu strony na podstawie zachowań i preferencji użytkowników. Funkcje takie jak dynamiczne ładowanie treści czy personalizowane rekomendacje mogą znacząco wpłynąć na zaangażowanie użytkownika. Wykorzystanie najnowszych bibliotek i narzędzi, takich jak Three.js do grafiki 3D lub GSAP do zaawansowanych animacji, może wyróżnić stronę na tle konkurencji.
Dzięki takim technologiom, strona nie tylko będzie estetyczna i funkcjonalna, ale także stworzy unikalne i angażujące doświadczenia, które będą przyciągać użytkowników i zachęcać ich do dłuższego pozostania na stronie.
.png)
