Kategoria: Wyzwanie

SEO i SEM to kluczowe strategie zwiększania widoczności w wyszukiwarkach. SEO obejmuje optymalizację organiczną, w tym działania on-page związane z treścią, strukturą i meta tagami, off-page skoncentrowane na link buildingu i autorytecie domeny oraz aspekty techniczne, takie jak wydajność strony i indeksacja. SEM natomiast łączy SEO z płatnymi kampaniami, takimi jak Google Ads, co pozwala osiągnąć szybsze efekty. Audyty SEO odgrywają kluczową rolę w analizie błędów i optymalizacji strategii. Coraz większą rolę w SEO odgrywa AI, które automatyzuje analizę danych, personalizuje treści i usprawnia procesy optymalizacyjne, zwiększając skuteczność działań marketingowych.

Post #54 Deep Seek AI nowej generacji z Chin

Odkrywanie Magii DeepSeek

Deep Seek AI to nowoczesna technologia sztucznej inteligencji opracowana w Chinach, która zdobywa coraz większą uwagę na arenie międzynarodowej. Wykorzystując głębokie uczenie i zaawansowane modele językowe, takie jak Deep Seek R1 i Deep Seek V3, ta platforma zmienia sposób, w jaki użytkownicy przeszukują i analizują informacje online.

W przeciwieństwie do tradycyjnych narzędzi, Deep Seek sztuczna inteligencja bazuje na rozumieniu kontekstu i niuansów językowych. Oznacza to bardziej trafne i spersonalizowane wyniki – dokładnie to, czego oczekuje dzisiejszy użytkownik.

Jedną z kluczowych cech DeepSeek jest jego zdolność do adaptacji i uczenia się na podstawie interakcji z użytkownikiem, co stale poprawia jego możliwości wyszukiwania w czasie. Ta zdolność adaptacji pozwala DeepSeek utrzymać się na czele w szybko zmieniającym się krajobrazie online, zapewniając użytkownikom spersonalizowane i efektywne wyszukiwanie. Dzięki swojej najnowocześniejszej technologii i innowacyjnemu podejściu do wyszukiwania, DeepSeek jest gotowy zrewolucjonizować sposób, w jaki uzyskujemy dostęp do informacji online.

Deep Seek – czym się wyróżnia?

Jedną z największych zalet Deep Seek jest jego zdolność do samouczenia się. Dzięki analizie interakcji z użytkownikiem, system stale poprawia trafność wyników. To model językowy, który z czasem staje się coraz skuteczniejszy, co czyni go silnym konkurentem dla liderów takich jak ChatGPT czy Google Bard.

Wielu użytkowników zadaje to pytanie, Jakie funkcje Deep Seek różnią go od innych narzędzi AI?

głębsza interpretacja zapytań
adaptacyjny system odpowiedzi
lepsze zrozumienie języków lokalnych i kontekstu kulturowego
wersje open source dostępne dla developerów (Deep Seek open source)

Odkrywanie cudów chińskiej sztucznej inteligencji

Jako czołowy gracz w globalnym wyścigu AI, Chiny poczyniły znaczne postępy w rozwoju zaawansowanych technologii, takich jak DeepSeek. Koncentrując się na innowacjach i badaniach, chińskie firmy zajmujące się sztuczną inteligencją przesuwają granice tego, co jest możliwe w sztucznej inteligencji, torując drogę do przełomowych zastosowań w różnych branżach. DeepSeek jest świetnym przykładem chińskiej potęgi AI, pokazując zaangażowanie kraju w utrzymanie się na czele rozwoju AI.

Chińskie technologie AI, takie jak DeepSeek, nie tylko rewolucjonizują branżę technologiczną, ale także stanowią wyzwanie dla ugruntowanych graczy, takich jak OpenAI i Google. Dzięki swoim najnowocześniejszym możliwościom i innowacyjnemu podejściu do wyszukiwania, DeepSeek ustanawia nowe standardy dla wyszukiwania informacji opartego na sztucznej inteligencji. W miarę jak chińska sztuczna inteligencja nabiera rozpędu na arenie globalnej, jasne jest, że przyszłość sztucznej inteligencji będzie kształtowana przez technologie takie jak DeepSeek.

Plusy i minusy DS w porównaniu z Open AI i Google

Porównując DeepSeek z konkurentami, takimi jak OpenAI i Google, ważne jest, aby wziąć pod uwagę zalety i wady każdej technologii. Podczas gdy DeepSeek wyróżnia się zdolnością do rozumienia złożonych zapytań i dostarczania spersonalizowanych wyników wyszukiwania, może brakować mu rozległych zasobów danych i infrastruktury firm takich jak Google. Z drugiej strony, skupienie OpenAI na etycznej sztucznej inteligencji i przejrzystości odróżnia ją od innych graczy w branży, oferując inną perspektywę na rozwój AI.

Pod względem wydajności i dokładności, DeepSeek wykazał obiecujące wyniki w różnych testach i punktach odniesienia, przewyższając niektórych konkurentów w pewnych obszarach. Jednak obawy dotyczące prywatności i bezpieczeństwa danych zostały podniesione w związku z chińskimi technologiami AI, takimi jak DeepSeek, co skłania do bliższego przyjrzenia się etycznym implikacjom korzystania z tych systemów. W miarę jak krajobraz AI stale ewoluuje, kluczowe jest rozważenie plusów i minusów różnych technologii, aby podejmować świadome decyzje dotyczące ich stosowania.

Deep Seek vs ChatGPT: Kto wygrywa?

Porównując Deep Seek vs ChatGPT, warto zwrócić uwagę na kilka kluczowych różnic:

Cecha	Deep Seek	ChatGPT (OpenAI)
Pochodzenie	Chiny	USA
Dostępność open source	Tak	Ograniczona
Obsługa kontekstu	Bardzo dobra	Zaawansowana
Popularność globalna	Rosnąca	Ugruntowana
Prywatność danych	Kwestia sporna	Silnie akcentowana
Zastosowania	Wyszukiwarki, analiza treści	Generowanie treści, asystenci

Jakie są najczęstsze zastosowania Deep Seek w codzienności?

analiza danych i trendów rynkowych
generowanie treści marketingowych
inteligentne wyszukiwanie informacji naukowych
personalizacja treści w e-commerce
wsparcie w obsłudze klienta

Dlaczego i jak DeepSeek zmienia wartość na Wall Street dla amerykańskich firm!

Potencjalna wartość DeepSeek na Wall Street i dla amerykańskich firm nie może być niedoceniana. Dzięki swoim zaawansowanym możliwościom wyszukiwania i spersonalizowanym doświadczeniom użytkownika, DeepSeek ma potencjał, aby napędzać znaczący wzrost i innowacje w różnych branżach. Wykorzystując chińskie technologie AI, takie jak DeepSeek, amerykańskie firmy mogą uzyskać przewagę konkurencyjną na rynku globalnym, wykorzystując nowe możliwości wzrostu i ekspansji.

Możesz wejść na Chat Deep-Seek klikając w ten link Deep-Seek ChatBot i sprawdzić samodzielnie jak się promptuje z Deep Seek.

W miarę jak DeepSeek będzie nadal ewoluował i ulepszał się, jego wpływ na Wall Street i amerykańskie firmy będzie prawdopodobnie głęboki. Integrując DeepSeek ze swoją działalnością, firmy mogą usprawnić procesy wyszukiwania, poprawić wydajność i poprawić ogólne wrażenia użytkownika. Przy odpowiednich strategiach i partnerstwach, DeepSeek ma potencjał, aby zmienić sposób, w jaki firmy działają i wchodzą w interakcje z klientami, napędzając wartość i wzrost na rynku amerykańskim.

Deep Seek – technologia przyszłości?

Deep Seek technologia to krok naprzód w stronę inteligentnych wyszukiwarek i systemów rekomendacyjnych. Dzięki zaawansowanym algorytmom i ciągłemu uczeniu się, platforma ta może znacząco usprawnić działania wielu firm – zarówno w Chinach, jak i na Zachodzie.

Co ciekawe, coraz więcej firm w USA zaczyna integrować Deep Seek ze swoimi systemami operacyjnymi, szukając przewagi konkurencyjnej.

Jakie są wymagania sprzętowe Deep Seek?

Aby efektywnie korzystać z Deep Seek lokalnie:

min. 16 GB RAM
nowoczesny procesor (Intel i7/Ryzen 7+)
dedykowana karta graficzna (dla modeli R1/V3)
stabilne połączenie internetowe (dla usług chmurowych)

Podsumowanie

Deep Seek to znacznie więcej niż kolejna wyszukiwarka. To inteligentny ekosystem oparty na najnowszych osiągnięciach sztucznej inteligencji. Jego zastosowanie, dostępność open source, porównanie z konkurentami jak ChatGPT, a także rosnąca rola na rynku międzynarodowym czynią go jednym z najciekawszych projektów AI naszych czasów.

Jeśli chcesz być na bieżąco z najnowszymi trendami w AI i technologiach przetwarzania języka naturalnego – Deep Seek to projekt, którego nie możesz pominąć. Jeśli jesteś zainteresowany innymi mniej znanymi modelami ML zajrzyj do artykułu o wyjątkowej AI Pi

2025-04-16

Post #53 Angular Podstawy kompleksowy przewodnik dla początkujących
Angular to jeden z najpopularniejszych frameworków do tworzenia aplikacji webowych. Jeśli dopiero zaczynasz swoją przygodę z programowaniem front-endowym, ten przewodnik pomoże Ci zrozumieć podstawowe koncepcje Angulara i rozpocząć tworzenie własnych aplikacji. Angular Podstawy
Dowiedz się jakie były moje początki z Angular Angular Podstawy
Dlaczego warto uczyć się Angulara?
Angular wyróżnia się:
- Kompleksowością: Wszystko, czego potrzebujesz do tworzenia aplikacji webowych, znajdziesz w jednym miejscu.
- Stabilnością: Framework jest wspierany przez Google i rozwijany z myślą o dużych projektach.
- Wszechstronnością: Możesz tworzyć aplikacje SPA (Single Page Application) oraz aplikacje progresywne (PWA).
Jak zacząć z Angular?
Instalacja Angular CLI
CLI (Command Line Interface) to narzędzie, które ułatwia tworzenie i zarządzanie projektami w Angularze. Oto jak je zainstalować:
```
npm install -g @angular/cli
```
Po instalacji możesz utworzyć nowy projekt za pomocą polecenia:
```
ng new my-first-app
```
Uruchomienie projektu
Przejdź do folderu projektu:
```
cd my-first-app
```
Uruchom serwer deweloperski:
```
ng serve
```
Twoja aplikacja będzie dostępna pod adresem http://localhost:4200.
Podstawowe elementy Angulara
Angular opiera się na kilku kluczowych koncepcjach. Oto najważniejsze z nich:
Komponenty – Kluczowe Elementy Angular
Komponenty w Angularze to kluczowe elementy aplikacji, które odpowiadają za modularność i organizację kodu. Są to podstawowe bloki funkcjonalne, które łączą logikę z interfejsem użytkownika (UI).
Czym jest komponent?
Komponent to zestaw plików odpowiedzialny za konkretną funkcjonalność aplikacji. Składa się z:
- HTML – Określa strukturę widoku.
- CSS – Stylizuje elementy widoczne w komponencie.
- TypeScript – Zawiera logikę komponentu (np. metody, zmienne).
- Spec.ts (testowy) – Obsługuje testy jednostkowe, co zapewnia jakość kodu.
Przykładowo, komponent nawigacji może składać się z plików navbar.component.html, navbar.component.css, navbar.component.ts i navbar.component.spec.ts
Dwie główne role komponentów
Komponenty funkcyjne (z logiką):
Posiadają metody i właściwości, które pozwalają na obsługę danych, zdarzeń i interakcji użytkownika. Przykład: Formularz logowania, który waliduje dane i wysyła je do serwera. Przykładowa metoda w komponencie:
```
export class NavbarComponent {
  isLoggedIn: boolean = false;

  toggleLogin() {
    this.isLoggedIn = !this.isLoggedIn;
  }
}
```
Komponenty wizualne (UI-only)
Odpowiadają jedynie za wyświetlanie elementów interfejsu użytkownika, bez dodatkowej logiki. Przykład: Karta z obrazkiem i tekstem w galerii zdjęć. Przykład prostego komponentu wizualnego:
```
export class GalleryCardComponent {
  @Input() title: string = '';
  @Input() imageUrl: string = '';
}
```
Dobre praktyki dla początkujących
Organizacja komponentów w folderach:
Umieszczaj każdy komponent w osobnym folderze. To ułatwia nawigację i zarządzanie projektem.
Przykład struktury:
```
src/
  app/
    components/
      navbar/
        navbar.component.html
        navbar.component.css
        navbar.component.ts
        navbar.component.spec.ts
```
Zagnieżdżanie komponentów
W Angularze możesz „zagnieżdżać” komponenty, czyli umieszczać jeden komponent wewnątrz innego. Jest to kluczowa cecha pozwalająca na tworzenie złożonych interfejsów użytkownika. Przykład: Komponent navbar może zawierać komponent user-menu w swoim widoku: Kod HTML komponentu navbar:
```
<nav class="navbar">
  <app-user-menu></app-user-menu>
</nav>
```
Czy komponent jest tylko wizualny?
Decyduj, czy komponent ma pełnić jedynie rolę wizualną (np. karta, przycisk), czy też będzie posiadał logikę (np. obsługa zdarzeń, walidacja danych). To pozwala na lepsze zarządzanie kodem.
Unikaj nadmiernego zagnieżdżania
Mimo że Angular pozwala na zagnieżdżanie komponentów, staraj się nie tworzyć zbyt głębokiej hierarchii. Ułatwi to debugowanie i utrzymanie projektu.
Poniżej ilustracja przedstawiająca przykładową organizację plików w Angularze
Dodając taką sekcję z obrazem i szczegółami, wyjaśnimy w prosty sposób, jak zarządzać komponentami w Angularze.
Przykład prostego komponentu:
```
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `<h1>Witaj w Angularze!</h1>`,
  styles: [`h1 { color: blue; }`]
})
export class HelloComponent {}
```
Moduły
Angular używa modułów do organizacji aplikacji. Każda aplikacja zaczyna się od modułu AppModule.
Przykład definicji modułu:
```
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule {}
```
Routing
Routing pozwala nawigować pomiędzy różnymi widokami w aplikacji SPA. Oto jak skonfigurować prosty router:
```
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}
```
Tworzenie pierwszego formularza
Dynamiczne formularze są jedną z najważniejszych funkcji Angulara. Oto prosty przykład:
HTML:
```
<form (ngSubmit)="onSubmit()" #form="ngForm">
  <label for="name">Imię:</label>
  <input type="text" id="name" name="name" ngModel required>
  <button type="submit" [disabled]="!form.valid">Wyślij</button>
</form>
```
TypeScript:
```
import { Component } from '@angular/core';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html'
})
export class FormComponent {
  onSubmit() {
    console.log('Formularz został wysłany!');
  }
}
```
Podsumowanie
Angular to potężne narzędzie dla programistów, którzy chcą tworzyć zaawansowane aplikacje webowe. W tym artykule zapoznaliśmy się z podstawowymi koncepcjami i przykładami kodu. Teraz czas na praktykę! Możesz także odwiedzić wpis #36 gdzie przedstawiam dobry praktyczny kurs Angular z Udemy podczas którego możesz poznać praktyczne zastosowania.
2025-04-15
Post #52 Jakie są PHP i Python
Jeżeli chcesz się dowiedzieć jakie są różnice i podobieństwa PHP vs. Python ten post jest dla Ciebie.
Zacznijmy jakie są podobieństwa:
Dynamiczne typowanie
Zarówno PHP, jak i Python mają obszerne biblioteki standardowe, które ułatwiają wykonywanie typowych zadań, takich jak operacje na plikach, manipulacje stringami czy obsługa baz danych.
Obiektowość Oba języki wspierają programowanie obiektowe, umożliwiając pisanie kodu zorientowanego na klasy i obiekty.
Społeczność i dokumentacja Zarówno PHP, jak i Python mają dużą społeczność programistów, co oznacza, że dostępnych jest wiele zasobów edukacyjnych, wtyczek i wsparcia.
```
$x = 10; // PHP
```
```
x = 10  # Python
```
Wszechstronność Oba języki są szeroko stosowane w różnych dziedzinach:
PHP jest głównie używany w aplikacjach webowych po stronie serwera.
Python ma szerokie zastosowanie, od tworzenia aplikacji webowych po uczenie maszynowe i analizę danych.
Bogata biblioteka standardowa
Zarówno PHP, jak i Python mają obszerne biblioteki standardowe, które ułatwiają wykonywanie typowych zadań, takich jak operacje na plikach, manipulacje stringami czy obsługa baz danych.
Obiektowość
Oba języki wspierają programowanie obiektowe, umożliwiając pisanie kodu zorientowanego na klasy i obiekty.
Społeczność i dokumentacja
Zarówno PHP, jak i Python mają dużą społeczność programistów, co oznacza, że dostępnych jest wiele zasobów edukacyjnych, wtyczek i wsparcia.
Różnice miedzy PHP i Pythonem
Kategoria PHP Python
Cel projektowy PHP został stworzony z myślą o aplikacjach webowych. Python jest językiem ogólnego przeznaczenia (web, AI, analiza danych, automatyzacja). Składnia PHP ma bardziej złożoną składnię, czasem przypominającą C. Python stawia na prostotę i czytelność dzięki znaczeniom wcięć i minimalizacji nawiasów.
Prędkość rozwoju PHP jest mniej intuicyjny w projektach wieloplatformowych i bardziej skomplikowanych. Python pozwala na szybki rozwój aplikacji dzięki przejrzystości i wszechstronności.
PHP jest mniej intuicyjny w projektach wieloplatformowych i bardziej skomplikowanych. Python pozwala na szybki rozwój aplikacji dzięki przejrzystości i wszechstronności.
Frameworki Popularne frameworki PHP to Laravel, Symfony i WordPress. Popularne frameworki Python to Django, Flask.
Deklaracja zmiennych W PHP zmienne zawsze zaczynają się od znaku $. W Pythonie zmienne są deklarowane bez specjalnych znaków. Hosting PHP jest bardziej rozpowszechniony w klasycznych hostingach webowych. Python wymaga bardziej zaawansowanego hostingu (np. VPS, chmur).
Asynchroniczność PHP ma ograniczone wsparcie dla asynchroniczności (np. w Swoole). Python ma wbudowane wsparcie dla asynchroniczności w bibliotece asyncio.
Środowisko uruchomieniowe Najczęściej uruchamiany jako moduł serwera (np. Apache, Nginx). Python może być uruchamiany jako skrypt, aplikacja standalone lub w środowisku serwerowym.
Popularność w AI PHP nie jest szeroko stosowany w AI ani analizie danych. Python jest liderem w AI, uczeniu maszynowym, analizie danych i automatyzacji.
Przykłady kodu
PHP – Tworzenie prostego endpointu w aplikacji webowej:
```
&lt;?php
header("Content-Type: application/json");
echo json_encode(["message" => "Hello, world!"]);
?>
```
Python – Tworzenie prostego endpointu w Flask:
```
from flask import Flask, jsonify

app = Flask(__name__)

@app.route("/")
def hello():
    return jsonify({"message": "Hello, world!"})

if __name__ == "__main__":
    app.run()
```
Kiedy używać PHP, a kiedy Pythona?
PHP: Idealny do prostych i średnio zaawansowanych aplikacji webowych, szczególnie gdy hosting wymaga prostych technologii. Doskonale nadaje się do projektów opartych na CMS-ach, takich jak WordPress czy Joomla.
Python: Najlepszy wybór, gdy projekt wymaga analiz danych, uczenia maszynowego, automatyzacji lub zaawansowanych aplikacji webowych. Oba języki mają swoje mocne strony, a wybór zależy od specyfiki projektu, doświadczenia zespołu i środowiska pracy.
Najczęściej używane słowa kluczowe w PHP
if, else, elseif – instrukcje warunkowe for, foreach, while, do – pętle function – definicja funkcji class, extends, implements – definicja i dziedziczenie klas public, protected, private – modyfikatory dostępu return – zwracanie wartości z funkcji echo, print – wyświetlanie danych include, require – dołączanie plików
Najczęściej używane słowa kluczowe w Pythonie
if, elif, else – instrukcje warunkowe for, while – pętle def – definicja funkcji class – definicja klasy try, except, finally – obsługa wyjątków import, from – importowanie modułów return – zwracanie wartości z funkcji print – wyświetlanie danych with – zarządzanie kontekstem
Pełne listy słów kluczowych można znaleźć w oficjalnej dokumentacji PHP i Pythona.
Jeśli jesteś zainteresowany frameworkami, odwiedź post Frameworki PHP i Python
2025-04-14
Post #51 DB Test PHP MySql Apps
DB Test PHP MySql Apps to prosta aplikacja z zapisem do bazy w środowisku lokalnym. Tworzę projekt edukacujnie i do portfolio. Będzie zawierał dobrą dokumentację jak to przećwiczyć na swoim środowisku lokalnym.
Fukcjonalność jeszcze nieokkreślona
Obecnie zawiera tablicę users służącą do logowania – uproszonego bez potwierdzania mailowego. Pole Bio użytkownika do edycji oraz sesję i drobny feauture pokazujący w Toast ile jest zalogowanych użytkowników.
Dokumentacja Techniczna
1. Konfiguracja Projektu
Aby uruchomić projekt lokalnie, wykonałem następujące kroki:
- Pobrałem i zainstalowałem XAMPP (lub inny lokalny serwer) na swoim komputerze.
- Utworzyłem folder dla swojego projektu w katalogu htdocs (np. phpsandbox/test-baza).
- Skopiowałem wszystkie pliki projektu, w tym index.php, register.php, login.php i about.php, do tego folderu.
- Uruchomiłem Apache i MySQL w panelu sterowania XAMPP.
- W przeglądarce przeszedłem do //localhost:3000/phpmyadmin, aby skonfigurować bazę danych.
Konfiguracja Bazy Danych
Aby skonfigurować bazę danych MySQL i utworzyć niezbędne tabele, wykonałem następujące kroki:
Utworzyłem nową bazę danych o nazwie baza_test_login_data. W tej bazie danych utworzyłem tabelę o nazwie users z następującymi kolumnami: id – INT, klucz główny, autoinkrementacja firstName – VARCHAR(50), imię użytkownika secondName – VARCHAR(50), nazwisko użytkownika email – VARCHAR(100), unikalny, adres e-mail użytkownika password – VARCHAR(255), hasło bio – TEXT, opcjonalne pole na biografię użytkownika
Rejestracja Użytkownika
Plik register.php obsługuje rejestrację użytkownika. Działa w następujący sposób:
Gdy użytkownik przesyła formularz rejestracyjny, jego dane wejściowe są walidowane, aby upewnić się, że wszystkie pola są wypełnione. Skrypt sprawdza, czy adres e-mail już istnieje w bazie danych. Jeśli tak, wyświetlane jest ostrzeżenie. Jeśli adres e-mail jest unikalny, dane użytkownika są zapisywane, a wyświetlany jest komunikat o sukcesie. Hasło jest przechowywane w postaci haszowanej dla bezpieczeństwa, przy użyciu funkcji password_hash().
Logowanie Użytkownika
Plik login.php umożliwia zalogowanie zarejestrowanym użytkownikom:
Po przesłaniu formularza, adres e-mail i hasło są walidowane względem bazy danych. Jeśli dane uwierzytelniające są poprawne, użytkownik otrzymuje dostęp. Dla bezpieczeństwa funkcja password_verify() jest używana do porównania hasła haszowanego z bazą danych.
Walidacja i Alerty
Aby poprawić doświadczenie użytkownika, dodałem alerty Bootstrap dla komunikatów zwrotnych:
Alert sukcesu: Wyświetlany, gdy użytkownik pomyślnie się zarejestruje. Alert ostrzeżenia: Wskazuje, że adres e-mail jest już używany podczas rejestracji. Alert błędu: Wyświetlany, jeśli wystąpi błąd podczas rejestracji.
Pliki Kodu i Ich Funkcje
index.php – Strona główna aplikacji. register.php – Zawiera formularz rejestracyjny i logikę PHP do dodawania użytkowników do bazy danych. login.php – Obsługuje logowanie użytkownika i uwierzytelnianie. about.php – Strona dokumentacji technicznej (ta strona). db.php – Zawiera kod połączenia z bazą danych przy użyciu mysqli. menu.php – Pasek nawigacyjny zawarty na każdej stronie dla łatwej nawigacji.
Przykładowy Kod Połączenia z Bazą Danych
Poniżej znajduje się przykład kodu używanego do połączenia z bazą danych w db.php:
```
// ...
$conn = mysqli_connect($servername, $username, $password, $dbname);

// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
// ...
```
1. Bezpieczeństwo i Najlepsze Praktyki
Hasła są haszowane przed przechowywaniem w bazie danych dla bezpieczeństwa. Pole e-mail jest unikalne w bazie danych, zapobiegając duplikatom rejestracji. Używane są przygotowane zapytania, aby zapobiec iniekcji SQL. Dla dodatkowego bezpieczeństwa należy rozważyć implementację SSL i zarządzania sesjami użytkowników.
2025-04-11
Post #50 Glide Jak zrobić kontent slider?
Kontent slider czy w innej nazwie karuzela to treść osadzona i serwująca różny kontent po przesunięciu strzałki lub automatycznie w wyznaczonym czasie.
Jak Stworzyłem kontent slider za pomocą Glide.js
W mojej ostatniej przygodzie z frontendem postanowiłem zagłębić się w Glide.js i nauczyć się, jak zbudować slider, który będzie responsywny i prosty w implementacji. W tym wpisie podzielę się, jak dodałem zdjęcia, skonfigurowałem responsywność za pomocą @media, oraz jakie kroki pomogły mi zrozumieć tę bibliotekę.
Co to Jest Glide.js?
Glide.js to lekka i szybka biblioteka JavaScript do tworzenia sliderów i karuzeli. Jest bardzo elastyczna, co oznacza, że możemy ją łatwo dostosować do własnych potrzeb – idealna do sliderów, które mają dobrze działać na różnych urządzeniach i ekranach.
Przygotowanie Plików
Najpierw stworzyłem strukturę plików, która wyglądała następująco:
- index.html – główny plik HTML.
- css/glide.core.css oraz css/glide.theme.css – style biblioteki Glide.js.
- glide.js – główny plik JavaScript dla biblioteki.
- Folder img – zawierający zdjęcia, które chciałem dodać do slidera.
Krok po Kroku: Tworzenie Slidera
Krok 1: Dodanie HTML
W pliku index.html dodajemy podstawową strukturę slidera zgodnie z dokumentacją Glide.js. Wygląda to tak:
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slider glide.js</title>
  <link rel="stylesheet" href="./css/glide.core.css">
  <link rel="stylesheet" href="./css/glide.theme.css">
</head>
<body>
  <div class="glide">
    <div class="glide__track" data-glide-el="track">
      <ul class="glide__slides">
        <li class="glide__slide"><img src="./img/20-superfoods-640.webp" alt="20 superfoods"></li>
        <li class="glide__slide"><img src="./img/3-domowe-naturalne-przeziebienie-640.webp" alt="Przeziębienie"></li>
        <li class="glide__slide"><img src="./img/ashwaganda-telomers-640.webp" alt="Ashwaganda"></li>
        
      </ul>
    </div>
    <div class="glide__arrows" data-glide-el="controls">
      <button class="glide__arrow glide__arrow--left" data-glide-dir="<">Previous</button>
      <button class="glide__arrow glide__arrow--right" data-glide-dir=">">Next</button>
    </div>
    <div class="glide__bullets" data-glide-el="controls[nav]">
      <button class="glide__bullet" data-glide-dir="=0"></button>
      <button class="glide__bullet" data-glide-dir="=1"></button>
      
    </div>
  </div>
</body>
</html>
```
W tym miejscu każdy li to pojedynczy slajd. Dodałem kilka zdjęć i dostosowałem ich alt, by były bardziej opisowe
- Krok 2: Konfiguracja JavaScript
- Podpięcie Glide.js jest proste
- Na końcu pliku index.html dodałem skrypt inicjujący slider:
```
<script src="./glide.js"></script>
<script>
  new Glide('.glide', {
    type: 'carousel',
    startAt: 0,
    perView: 4,
    breakpoints: {
      1200: { perView: 3 },
      800: { perView: 2 },
      480: { perView: 1 }
    }
  }).mount();
</script>
```
W tej konfiguracji slider jest ustawiony jako karuzela (czyli po przewinięciu ostatniego zdjęcia wraca do pierwszego)
Ustawiłem również startAt na 0, co oznacza, że slider zaczyna od pierwszego zdjęcia. Najważniejsza część to breakpoints – dzięki nim slider dostosowuje się do szerokości ekranu:
- 1200px i więcej – wyświetlane są 4 slajdy.
- 800px do 1200px – wyświetlane są 3 slajdy.
- 480px do 800px – wyświetlane są 2 slajdy.
- poniżej 480px – wyświetlany jest 1 slajd.
Krok 3: Responsywność i ustawienie CSS @media
Glide.js samo w sobie obsługuje breakpoints, ale dodałem też własne style CSS dla img, by zdjęcia zachowywały odpowiednie proporcje i były responsywne:
```
Skopiuj kod
.glide__slide img {
  width: 100%;
  height: auto;
}
```
Dzięki temu zdjęcia dopasowują się do rozmiaru kontenera, niezależnie od szerokości ekranu
Co Nauczyłem się Pracując z Glide.js?
- Prostota – Glide.js jest bardzo prosty w obsłudze, ale jednocześnie oferuje dużo możliwości konfiguracyjnych.
- Responsywność – dzięki breakpoints i CSS łatwo stworzyć slider, który świetnie wygląda zarówno na komputerze, jak i na telefonie. Łatwość rozbudowy – Glide.js pozwala na dodawanie różnych komponentów (np. przyciski nawigacyjne, wskaźniki), co sprawia, że jest wszechstronny.
Podsumowanie
Stworzenie slidera za pomocą Glide.js to świetne doświadczenie dla każdego, kto dopiero uczy się frontendu i chce osiągnąć profesjonalne rezultaty przy minimalnym wysiłku. Cieszę się, że mogłem zrozumieć, jak działa ta biblioteka, i mam nadzieję, że ten przewodnik pomoże Wam stworzyć własny, responsywny slider.
Dajcie znać, jeśli macie pytania lub potrzebujecie pomocy – chętnie pomogę! Kliknijcie na Facebook OpenGateweb
2025-04-10
Post #49 Web-design
Profesjonalne Projektowanie Stron i Optymalizacja SEO. Twoja Droga do Sukcesu w Internecie
Szukasz sposobu na wzmocnienie swojej obecności w internecie? Nasze kompleksowe usługi web designu i SEO przynoszą realne rezultaty. Łączymy kreatywne projektowanie z wiedzą techniczną, aby pomóc Twojej firmie wyróżnić się w sieci. Dlaczego Warto Wybrać Profesjonalne Projektowanie Stron? Nowoczesny biznes potrzebuje więcej niż tylko strony internetowej – wymaga skutecznej strategii cyfrowej. Nasze usługi obejmują:
Responsywne strony internetowe działające na wszystkich urządzeniach
Indywidualne rozwiązania programistyczne Przyjazny interfejs użytkownika Strukturę zoptymalizowaną pod SEO Szybkie ładowanie stron SEO, które Przynosi Efekty
Wiemy, że widoczność w sieci jest kluczem do sukcesu. Nasza strategia SEO koncentruje się na:
- Strategicznej optymalizacji słów kluczowych
- Optymalizacji treści
- Wdrażaniu technicznych aspektów SEO
- Strategiach lokalnego SEO
- Monitorowaniu wyników
Sprawdzony Proces Działania
Analiza: Badamy potrzeby Twojej firmy i pozycję rynkową
Strategia: Tworzymy spersonalizowane podejście
Wdrożenie: Realizujemy zoptymalizowaną obecność w sieci
Monitoring: Śledzimy i poprawiamy wyniki
Gotowy na Transformację Swojej Obecności w Sieci?
Skontaktuj się z nami już dziś, aby omówić, jak możemy pomóc w rozwoju Twojego biznesu online. Nasz zespół ekspertów jest gotowy stworzyć stronę, która nie tylko świetnie wygląda, ale także osiąga wysokie pozycje w wynikach wyszukiwania. Słowa kluczowe: projektowanie stron internetowych, optymalizacja SEO, tworzenie stron www, responsywne strony, strategia cyfrowa.
Jeśli chcesz z nami porozmawiać o Twoje koncepcji napisz na kontakt@opengateweb.com
2025-04-09

Post #48 proste filtrowanie Istotope

Isotope.js

Isotope.js to biblioteka JavaScript, która umożliwia dynamiczne układanie i filtrowanie elementów na stronie internetowej. Dzięki niej można łatwo tworzyć interaktywne galerie obrazów, portfolio, czy listy produktów. Isotope.js oferuje wiele opcji konfiguracji, co pozwala na dostosowanie układu do indywidualnych potrzeb projektu.

Kluczowe funkcje Isotope.js

Dynamiczne układanie: Elementy są automatycznie układane w optymalny sposób, aby wypełnić dostępne miejsce.
Filtrowanie: Możliwość filtrowania elementów na podstawie określonych kryteriów.
Sortowanie: Elementy mogą być sortowane według różnych parametrów, takich jak data, nazwa, czy kategoria.
Animacje: Płynne animacje podczas zmiany układu, filtrowania czy sortowania elementów.

Więcej informacji na temat Isotope.js można znaleźć na oficjalnej stronie biblioteki.

Isotope

Isotope to potężna biblioteka do tworzenia dynamicznych i responsywnych układów, umożliwiająca filtrowanie, sortowanie i piękne aranżowanie elementów. Poniżej znajdziesz prosty przykład, jak używać Isotope do filtrowania elementów, sortowania ich oraz wyjaśnienia.

&lt;!DOCTYPE html>
&lt;html lang="en">
&lt;head>
    &lt;meta charset="UTF-8">
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
    &lt;title>Isotope Example&lt;/title>
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    &lt;link rel="stylesheet" href="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js">
    &lt;style>
        .grid {
            display: flex;
            flex-wrap: wrap;
        }
        .grid-item {
            width: 30%;
            margin: 5px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
        }
    &lt;/style>
&lt;/head>
&lt;body>
    &lt;div>
        &lt;button id="filter-all">Show All&lt;/button>
        &lt;button id="filter-one">Filter One&lt;/button>
        &lt;button id="filter-two">Filter Two&lt;/button>
        &lt;button id="sort-asc">Sort Ascending&lt;/button>
        &lt;button id="sort-desc">Sort Descending&lt;/button>
    &lt;/div>
    &lt;div class="grid">
        &lt;div class="grid-item" data-category="one">Item 1&lt;/div>
        &lt;div class="grid-item" data-category="two">Item 2&lt;/div>
        &lt;div class="grid-item" data-category="one">Item 3&lt;/div>
        &lt;div class="grid-item" data-category="two">Item 4&lt;/div>
        &lt;div class="grid-item" data-category="one">Item 5&lt;/div>
    &lt;/div>

    &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js">&lt;/script>
    &lt;script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js">&lt;/script>
    &lt;script>
        $(document).ready(function () {
            var $grid = $('.grid').isotope({
                itemSelector: '.grid-item',
                layoutMode: 'fitRows',
                getSortData: {
                    name: function (itemElem) {
                        return $(itemElem).text();
                    }
                }
            });

            $('#filter-all').on('click', function () {
                $grid.isotope({ filter: '*' });
            });
            $('#filter-one').on('click', function () {
                $grid.isotope({ filter: '[data-category="one"]' });
            });
            $('#filter-two').on('click', function () {
                $grid.isotope({ filter: '[data-category="two"]' });
            });

            $('#sort-asc').on('click', function () {
                $grid.isotope({ sortBy: 'name', sortAscending: true });
            });
            $('#sort-desc').on('click', function () {
                $grid.isotope({ sortBy: 'name', sortAscending: false });
            });
        });
    &lt;/script>
&lt;/body>
&lt;/html>

Code Review

Language Adjustments: Wszystkie etykiety przycisków i teksty elementów siatki zostały zmienione na język polski.

„Show All” to teraz „Pokaż Wszystko”. „Filter One” to teraz „Filtruj Kategoria 1”. „Filter Two” to teraz „Filtruj Kategoria 2”. „Sort Ascending” to teraz „Sortuj Rosnąco”. „Sort Descending” to teraz „Sortuj Malejąco”. Elementy siatki: Tekst wewnątrz elementów siatki został przetłumaczony na język polski, zmieniając „Item X” na „Element X” dla jasności.

Możesz teraz użyć tego fragmentu kodu, aby stworzyć interfejs filtrowania i sortowania dostosowany do polskojęzycznych użytkowników! Daj mi znać, jeśli potrzebujesz dalszych modyfikacji lub wyjaśnień.

2025-04-08

Post #47 Projekty wykonane
Projekty wykonane – Telomers & React portfolio
Ostatnio zrealizowałem dwa projekty, które rozbudowały zarówno moje portfolio, jak i stronę Telomers.pl.
1. Trzy strony dla Telomers.pl
Dla serwisu Telomers.pl dodałem trzy nowe strony:
- Poranne rozbudzanie: Strona skupiająca się na zdrowych porannych rytuałach. Poranne rytuały
- Witaminy i Minerały na wiosnę: Informacje na temat optymalnego doboru witamin i minerałów w sezonie wiosennym.Witaminy Minerały Suplementy
- 3 domowe sposoby na przeziębienie: Naturalne sposoby na walkę z przeziębieniem. 3 domowe spososby na przeziębienie Całość została wdrożona w krótkim czasie, a nowe treści są już dostępne dla użytkowników serwisu.
2. Aplikacja React Hooks
Stworzyłem również aplikację w React, która demonstruje wykorzystanie hooków takich jak useState, useEffect oraz useContext. Projekt polega na dynamicznej zmianie koloru tła oraz liczniku, który można zwiększać przyciskiem. W aplikacji zaimplementowane są funkcje:
- Obsługa zmiany wartości inputu z wykorzystaniem useState.
- Dynamiczna zmiana tła na podstawie wprowadzonego koloru w formacie HEX.
- Wykorzystanie kontekstu (useContext) do aktualizacji tła.
Zobacz applikację React i jej proste funkcje.
Poniżej fragment kodu aplikacji:
```
import React, { useState, useEffect, createContext, useContext } from 'react';

const BackgroundColorContext = createContext();

function App() {
  const [count, setCount] = useState(0);
  const [inputValue, setInputValue] = useState('#0e0e0e');
  const [bgColor, setBgColor] = useState('#0e0e0e');

  useEffect(() => {
    if (/^#[0-9A-F]{6}$/i.test(inputValue) || /^#[0-9A-F]{3}$/i.test(inputValue)) {
      setBgColor(inputValue);
    }
  }, [inputValue]);

  return (
    &lt;BackgroundColorContext.Provider value={{ bgColor, setBgColor }}>
      &lt;div style={{ backgroundColor: bgColor }}>
        &lt;p>Count: {count}&lt;/p>
        &lt;button onClick={() => setCount(count + 1)}>Increment&lt;/button>
        &lt;input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        &lt;BackgroundColorInput />
      &lt;/div>
    &lt;/BackgroundColorContext.Provider>
  );
}

function BackgroundColorInput() {
  const { setBgColor } = useContext(BackgroundColorContext);

  return (
    &lt;input
      type="text"
      placeholder="Input color..."
      onChange={(e) => setBgColor(e.target.value)}
    />
  );
}

export default App;
```
Całość zajęła 6 godzin i można zobaczyć efekty na telomers.pl i porfolio
2025-04-07
Post #46 Biblioteki do animacji z elementami w JavaScript
Biblioteki do Animacji z Elementami w JavaScript
Rola Animacji
W dzisiejszym dynamicznym świecie stron internetowych animacje odgrywają kluczową rolę w przyciąganiu uwagi użytkowników. Na szczęście, istnieje wiele bibliotek, które ułatwiają tworzenie efektownych animacji bez potrzeby pisania dużej ilości skomplikowanego kodu. W tym wpisie przyjrzymy się trzem popularnym bibliotekom do animacji, a następnie skupimy się na jednej z nich – Anime.js.
Trzy znane biblioteki do animacji w JavaScript
- GSAP (GreenSock Animation Platform) Jedna z najpotężniejszych i najbardziej rozbudowanych bibliotek do animacji w JavaScript. GSAP oferuje szeroką gamę narzędzi do animacji dowolnych elementów na stronie, w tym SVG, canvas, DOM i CSS. Jest często wybierana przez profesjonalistów ze względu na wydajność i elastyczność.
- Velocity.js Lekka i szybka biblioteka animacyjna, która została stworzona jako ulepszona wersja animacji jQuery. Velocity.js działa zarówno z DOM, jak i z właściwościami CSS. Idealna do prostszych projektów, gdzie szybkość i wydajność są priorytetem.
- Anime.js Niezwykle lekka biblioteka z prostym, ale potężnym API. Anime.js pozwala na animowanie właściwości CSS, atrybutów DOM, SVG oraz obiektów JavaScript. Działa z intuicyjnymi ustawieniami, co sprawia, że jest łatwa w nauce i wdrożeniu.
W Anime.js Można za jej pomocą animować właściwości CSS, atrybuty DOM, SVG, a także obiekty JavaScript. Dzięki intuicyjnemu API, tworzenie efektownych animacji staje się prostsze, a sam kod pozostaje czytelny.
Dlaczego warto korzystać z bibliotek animacyjnych?
Mimo że CSS oferuje wbudowane możliwości animacji za pomocą takich właściwości jak transition czy animation, to korzystanie z bibliotek animacyjnych, takich jak Anime.js, daje programiście większą elastyczność. Biblioteki te często mają wbudowane zaawansowane funkcje, takie jak kolejki animacji, łatwe tworzenie sekwencji czy zaawansowane kontrolowanie czasów trwania i opóźnień, co trudno osiągnąć za pomocą samego CSS.
Jak stworzyć podstawową animację za pomocą Anime.js – Krok po kroku
Stworzenie animacji z Anime.js jest bardzo proste. Poniżej krok po kroku przejdziemy przez proces dodawania animacji do elementu na stronie.
Krok 1: Dodanie Anime.js do projektu
Najpierw należy zaimportować bibliotekę Anime.js do projektu. Można to zrobić za pomocą CDN oraz poprzez pobranie biblioteki i pliku JavaScript anime.min.js i podłączenie w html.
```
&lt;script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js">&lt;/script>
&lt;script src="./js/anime.min.js">&lt;/script>
```
Krok 2: Utworzenie elementu do animacji
Załóżmy, że chcemy animować prosty element div. Stwórzmy go w HTML:
```
&lt;div class="box">&lt;/div>

&lt;style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
  }
&lt;/style>
```
Krok 3: Napisanie kodu animacji
Teraz możemy napisać kod, który za pomocą Anime.js animuje element div.
```
anime({
  targets: '.box',
  translateX: 250,   // Przesunięcie elementu o 250 pikseli na osi X
  duration: 1000,    // Czas trwania animacji (w milisekundach)
  easing: 'easeInOutQuad' // Typ wygładzania animacji
});
```
Po uruchomieniu tego kodu, czerwona skrzynka przesunie się w prawo o 250 pikseli w czasie 1 sekundy z efektem wygładzania ruchu.
Trzy przykłady animacji z Anime.js
- Przykład 1: Zmiana koloru tła
Poniżej przykład, jak zmienić kolor tła elementu z czerwonego na niebieski.
```
anime({
  targets: '.box',
  backgroundColor: '#0000FF', // Zmiana koloru tła na niebieski
  duration: 2000,
  easing: 'linear'
});
```
- Przykład 2: Animacja po krzywej (transformacja z rotacją)
Przykład poniżej pokazuje, jak animować element z obrotem.
```
anime({
  targets: '.box',
  translateX: 250,
  rotate: '1turn',  // Obrót o 360 stopni
  duration: 1500,
  easing: 'easeInOutSine'
});
```
- Przykład 3: Sekwencja animacji z opóźnieniami
W tym przykładzie animujemy najpierw przesunięcie w prawo, a następnie zmianę koloru.
```
anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  easing: 'easeInOutQuad',
  complete: function() {  // Po zakończeniu przesunięcia
    anime({
      targets: '.box',
      backgroundColor: '#00FF00', // Zmiana koloru na zielony
      duration: 1000,
      easing: 'easeInOutQuad'
    });
  }
});
```
Podsumowanie
Anime.js to doskonałe narzędzie dla programistów, którzy chcą w prosty sposób tworzyć zaawansowane animacje na stronach internetowych. Jego intuicyjne API i lekkość sprawiają, że jest świetnym wyborem zarówno dla początkujących, jak i zaawansowanych twórców. Dzięki tej bibliotece możemy animować nie tylko elementy HTML, ale także właściwości CSS, atrybuty DOM i obiekty JavaScript, co czyni ją bardzo wszechstronną.
Zachęcamy do eksperymentowania z różnymi animacjami i efektami, aby wzbogacić swoje projekty internetowe!
2025-04-06
Post #45 JavaScript DOM selections i proste funkcje
JS DOM Selections i proste funkcje
Poniższe przykłady dotyczą funkcji i operacji DOM, takich jak zaznaczanie i manipulowanie elementami. Rozumienie i wykorzystywanie selekcji oraz manipulacji DOM w JavaScript jest kluczowe, ponieważ umożliwia pełną kontrolę nad interaktywnymi elementami strony internetowej. Oto kilka powodów, dla których warto opanować te techniki w JavaScript:
Dynamika stron – interaktywność i lepsze UX dzięki JavaScript
Manipulowanie DOM w JavaScript pozwala na:
- Dynamiczne zmienianie treści (np. aktualizacja liczby produktów w koszyku za pomocą JavaScript),
- Tworzenie efektów interaktywnych (takich jak animacje czy podświetlanie elementów z użyciem JavaScript),
- Ukrywanie i pokazywanie elementów (np. rozwijane menu na stronie dzięki JavaScript).
- Jest także mechanizmem pozwalającym na dostęp do Tabel i Obiektów.
Opanowanie tych umiejętności w JavaScript sprawia, że strony stają się bardziej responsywne i przyjazne dla użytkownika, co znacząco poprawia doświadczenie (UX). Jeśli potrzebujesz przykładów kodu w JavaScript do manipulacji DOM
JavaScrip, funkcję i operacje na DOM to skrót od Document Object Model Szczególnie chcę powtórzyć zaznaczanie Select All Select Query by ID i wszystkie inne Selekcje
1. Selekcja elementów
JavaScript oferuje kilka sposobów na wybieranie elementów z DOM:
1.1. getElementById (Selekcja po ID)
```
// Wybieranie elementu po jego ID
const element = document.getElementById('myElement');
console.log(element);
```
1.2. getElementsByClassName (Selekcja po klasie)
```
// Wybieranie wszystkich elementów z daną klasą (zwraca kolekcję)
const elements = document.getElementsByClassName('myClass');
console.log(elements);
```
1.3. getElementsByTagName (Selekcja po tagu)
```
// Wybieranie wszystkich elementów o danym tagu (np. wszystkie <p>)
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs);
```
1.4. querySelector (Pierwszy element pasujący do selektora CSS)
```
// Wybieranie pierwszego elementu, który pasuje do selektora CSS
const firstParagraph = document.querySelector('p');
console.log(firstParagraph);
```
Można używać bardziej złożonych selektorów
```
const elementById = document.querySelector('#myElement');
const elementByClass = document.querySelector('.myClass');
console.log(elementById, elementByClass);
```
1.5. querySelectorAll (Wszystkie elementy pasujące do selektora CSS)
```
// Wybieranie wszystkich elementów pasujących do selektora CSS
const allParagraphs = document.querySelectorAll('p');
console.log(allParagraphs);

// Selekcja bardziej złożona
const allDivsInContainer = document.querySelectorAll('#container div');
console.log(allDivsInContainer);
```
2. Manipulacja DOM w JavaScript – Tworzenie Dynamicznych Stron
JavaScript to język, który daje życie stronom internetowym! Dzięki niemu możemy nie tylko wyświetlać statyczne treści, ale także dynamicznie je zmieniać, reagować na interakcje użytkownika i budować nowoczesne aplikacje webowe.
Aby to osiągnąć, musimy zrozumieć DOM (Document Object Model) – czyli sposób, w jaki przeglądarka widzi strukturę HTML strony. DOM zamienia kod HTML w drzewo obiektów, dzięki czemu JavaScript może je modyfikować, usuwać lub dodawać nowe elementy w czasie rzeczywistym.
Przykłady zastosowania manipulacji DOM w JavaScript:
Aktualizacja treści w czasie rzeczywistym (np. liczba lajków na przycisku)
Tworzenie efektów wizualnych i animacji
Obsługa dynamicznych formularzy i interakcji użytkownika
Tworzenie gier i aplikacji webowych
Teraz zobaczmy, jak możemy manipulować DOM w JavaScript i jakie ciekawe rzeczy możemy zrobić!
Co to jest DOM i jak JavaScript go wykorzystuje?
Wyobraź sobie, że HTML to szkielety budynku, a CSS to jego kolor i styl. JavaScript to robot, który może zmieniać wygląd budynku, dodawać okna, drzwi, a nawet przesuwać ściany.
Każdy element na stronie – nagłówek, paragraf, obrazek czy przycisk – jest w DOM reprezentowany jako obiekt, który możemy modyfikować przy pomocy JavaScriptu.
DOM wygląda jak drzewo, gdzie głównym elementem jest <html>, a jego gałęziami są <head> i <body>. Każdy kolejny element, jak <p>, <h1>, <div>, to kolejne węzły drzewa.
🎯 Przykład wizualizacji drzewa DOM:
```
php-templateKopiujEdytuj<html>
 ├── <head>
 │   ├── <title> Moja Strona </title>
 ├── <body>
 │   ├── <h1> Nagłówek </h1>
 │   ├── <p> Jakiś tekst </p>
 │   ├── <button> Kliknij mnie </button>
```
Dzięki JavaScript możemy manipulować tym drzewem – dodawać nowe elementy, zmieniać treści, a nawet usuwać elementy!
Zmiana treści i atrybutów elementów
Najprostsza manipulacja DOM to zmiana tekstu lub atrybutów elementów.
Przykład – zmiana nagłówka i linku:
```
document.getElementById("myTitle").textContent = "Nowy, dynamiczny nagłówek!";
document.getElementById("myLink").href = "https://developer.mozilla.org";
document.getElementById("myImage").src = "new-image.jpg";
```
HTML do testowania:
```
<h2 id="myTitle">Stary tytuł</h2>
<a id="myLink" href="#">Kliknij tutaj</a>
<img id="myImage" src="old-image.jpg" alt="Obrazek">
```
JavaScript sprawia, że strona zmienia się bez potrzeby przeładowania!
Tworzenie nowych elementów w DOM
Chcesz dodać nowy paragraf lub przycisk w locie? JavaScript to umożliwia!
Przykład – dynamiczne dodawanie elementu:
```
let newParagraph = document.createElement("p");
newParagraph.textContent = "To jest dynamicznie dodany paragraf!";
document.body.appendChild(newParagraph);
```
Dzięki temu możemy budować dynamiczne listy, generować karty produktów czy dodawać nowe wiadomości w czacie użytkownika.
Zmiana stylów i klas CSS
Możemy nie tylko zmieniać treści, ale też wygląd elementów poprzez style CSS.
Przykład – zmiana koloru i rozmiaru tekstu:
```
let newParagraph = document.createElement("p");
newParagraph.textContent = "To jest dynamicznie dodany paragraf!";
document.body.appendChild(newParagraph);
```
Lepszy sposób – dodawanie klas CSS:
```
document.getElementById("box").classList.add("highlight");
```
CSS:
```
cssKopiujEdytuj.highlight {
    background-color: yellow;
    border: 2px solid red;
}
```
Zamiast manipulować stylami w JavaScript, lepiej dodawać/usunąć klasy – to bardziej wydajne i czytelne!
Obsługa zdarzeń użytkownika – interaktywne przyciski!
JavaScript pozwala reagować na działania użytkownika, np. kliknięcia myszką, najechanie kursorem czy naciśnięcie klawisza.
Przykład – reakcja na kliknięcie przycisku:
```
document.getElementById("myButton").addEventListener("click", function() {
    alert("Kliknięto przycisk!");
});
```
HTML do testowania:
```
<button id="myButton">Kliknij mnie!</button>
```
Możemy dzięki temu tworzyć menu, interaktywne formularze czy nawet gry w JavaScript!
Usuwanie elementów z DOM
Czasem chcemy ukryć lub całkowicie usunąć element ze strony.
Przykład – usunięcie elementu:
```
document.getElementById("myParagraph").remove();
```
HTML do testowania:
```
<p id="myParagraph">To zostanie usunięte!</p>
```
Można to wykorzystać np. do usuwania zadań na liście „to-do” lub zamykania okienek pop-up.
Podsumowanie – Co dzięki temu zyskujemy?
Tworzymy dynamiczne i interaktywne strony internetowe
Reagujemy na akcje użytkownika
Zmieniamy treść i wygląd strony bez przeładowania
Tworzymy nowoczesne aplikacje webowe
JavaScript i manipulacja DOM to klucz do nowoczesnego front-endu!
Jeśli chcesz budować interaktywne strony i aplikacje, to musisz opanować manipulację DOM – a teraz masz solidne podstawy, by to robić!
2025-04-05

Kategoria: Wyzwanie

Odkrywanie Magii DeepSeek

Deep Seek – czym się wyróżnia?

Odkrywanie cudów chińskiej sztucznej inteligencji

Plusy i minusy DS w porównaniu z Open AI i Google

Deep Seek vs ChatGPT: Kto wygrywa?

Jakie są najczęstsze zastosowania Deep Seek w codzienności?

Deep Seek – technologia przyszłości?

Jakie są wymagania sprzętowe Deep Seek?

Podsumowanie

Dlaczego warto uczyć się Angulara?

Jak zacząć z Angular?

Instalacja Angular CLI

Uruchomienie projektu

Podstawowe elementy Angulara

Komponenty – Kluczowe Elementy Angular

Czym jest komponent?

Przykładowo, komponent nawigacji może składać się z plików navbar.component.html, navbar.component.css, navbar.component.ts i navbar.component.spec.ts

Dwie główne role komponentów

Komponenty wizualne (UI-only)

Dobre praktyki dla początkujących

Zagnieżdżanie komponentów

Czy komponent jest tylko wizualny?

Unikaj nadmiernego zagnieżdżania

Moduły

Routing

Tworzenie pierwszego formularza

Podsumowanie

Zacznijmy jakie są podobieństwa:

Dynamiczne typowanie

PHP jest głównie używany w aplikacjach webowych po stronie serwera.

Python ma szerokie zastosowanie, od tworzenia aplikacji webowych po uczenie maszynowe i analizę danych.

Bogata biblioteka standardowa

Obiektowość

Społeczność i dokumentacja

Różnice miedzy PHP i Pythonem

Kategoria PHP Python

Przykłady kodu

Kiedy używać PHP, a kiedy Pythona?

Najczęściej używane słowa kluczowe w PHP

Najczęściej używane słowa kluczowe w Pythonie

Fukcjonalność jeszcze nieokkreślona

Dokumentacja Techniczna

Konfiguracja Bazy Danych

Rejestracja Użytkownika

Logowanie Użytkownika

Walidacja i Alerty

Pliki Kodu i Ich Funkcje

Przykładowy Kod Połączenia z Bazą Danych

Jak Stworzyłem kontent slider za pomocą Glide.js

Co to Jest Glide.js?

Przygotowanie Plików

Krok po Kroku: Tworzenie Slidera

Krok 1: Dodanie HTML

W tym miejscu każdy li to pojedynczy slajd. Dodałem kilka zdjęć i dostosowałem ich alt, by były bardziej opisowe

W tej konfiguracji slider jest ustawiony jako karuzela (czyli po przewinięciu ostatniego zdjęcia wraca do pierwszego)

Krok 3: Responsywność i ustawienie CSS @media

Dzięki temu zdjęcia dopasowują się do rozmiaru kontenera, niezależnie od szerokości ekranu

Co Nauczyłem się Pracując z Glide.js?

Podsumowanie

Profesjonalne Projektowanie Stron i Optymalizacja SEO. Twoja Droga do Sukcesu w Internecie

Responsywne strony internetowe działające na wszystkich urządzeniach

Wiemy, że widoczność w sieci jest kluczem do sukcesu. Nasza strategia SEO koncentruje się na:

Sprawdzony Proces Działania

Gotowy na Transformację Swojej Obecności w Sieci?

Isotope.js

Kluczowe funkcje Isotope.js

Isotope

Code Review

1. Trzy strony dla Telomers.pl

2. Aplikacja React Hooks

Całość zajęła 6 godzin i można zobaczyć efekty na telomers.pl i porfolio

Biblioteki do Animacji z Elementami w JavaScript

Rola Animacji

Trzy znane biblioteki do animacji w JavaScript

Dlaczego warto korzystać z bibliotek animacyjnych?

Jak stworzyć podstawową animację za pomocą Anime.js – Krok po kroku

Krok 1: Dodanie Anime.js do projektu

Krok 2: Utworzenie elementu do animacji

Krok 3: Napisanie kodu animacji