› Tag › strona internetowa › 10 wyników

[css] przeźroczyste tło

Jak otrzymać efekt przeźroczystego lub częściowo przeźroczystego tła na stronie www, które będzie działać w każdej przeglądarce i w każdym systemie operacyjnym?

Na początek warto przyglądnąć się rozwiązaniu tego problemu z użyciem CSS3, który jest obsługiwany przez coraz większą ilość przeglądarek i powoli staje się dobrą alternatywą dla wszystkich “obejść” , “how-to” i wszelkich modyfikacjach pod konkretne przeglądarki.

Aby otrzymać efekt przeźroczystego tła (i tylko tła, bez tekstu ani żadnego innego elementu wewnątrz), wystarczy po prostu zamienić paletę barw ze zwykłego RGB (domyślny) na RGBA (RGB + Alpha) następującym kodem:

background-color: rgba(255,0,0,0.5);

Niestety jak to na proste rozwiązanie przypadło – nie działa wszędzie 😉

Jest jednak prosty i sprawdzony (a przede wszystkim uniwersalny) sposób na uzyskanie efektu przeźroczystego tła na stronie www:  czytaj całość

uniwersalne przekierowanie .htaccess

Temat przekierowania 301 w .htaccess (z www na bez www lub odwrotnie) wałkowany jest na wielu portalach, ale ciężko dokopać się do jego ogólnej postaci, w której jeden kod działa dla wszystkich domen.

Przypomnijmy jak wygląda standardowy kod przekierowania 301 w .htaccess (w tym wypadku z bez-www na www):

RewriteEngine On
RewriteCond %{HTTP_HOST} ^webowiec.net
RewriteRule ^(.*)$ http://www.webowiec.net/$1 [R=permanent,L]

Po utworzeniu pliku .htaccess w katalogu głównym serwisu o treści podanej powyżej, serwer przekieruje wszystkie zapytania z adresu:
http://webowiec.net na adres: http://www.webowiec.net

Edytując w tym kodzie adres strony z “webowiec.net” na własny, otrzymamy działający ale jednorazowy kod przekierowania – działający tylko w 1 domenie.

Jak zrobić ogólne przekierowanie htaccess bez podawania za każdym razem adresu strony?  czytaj całość

[html5] Tło strony na pełnym ekranie

Specyficzne projekty wymagają specyficznych rozwiązań. Jednym z nich jest konieczność uzyskania obrazkowego tła strony na całym ekranie, niezależnie od rozdzielczości ekranu.
Z pomocą przychodzi HTML5, a właściwie CANVAS (którego możliwości sprawdzaliśmy np. tutaj: [canvas] Gradient HSV – pełen zakres kolorów

Schemat działania jest następujący:
1. Tworzymy element CANVAS
2. Wczytujemy grafikę/obrazek, który chcemy umieścić jako tło strony
3. Importujemy grafikę do elementu CANVAS, nadając mu wymiary ekranu
4. Exportujemy element CANVAS do elementuw sekcję: background-image czytaj całość

[c++] config file – wczytywanie zmiennych z pliku tekstowego

Problem: jak wczytać zmienne do c++ znajdujące się w pliku tekstowym a następnie używać ich w programie?

Rozwiązanie: utworzyć klasę, która wczyta plik tekstowy, przydzieli każdą przetworzoną wcześniej linię do dynamicznej tablicy, której kluczem będzie nazwa zmiennej.

Wykorzystanie:
zawartość pliku “plik_konfiguracyjny.txt

opcja1 wartosc1
opcja2 wartosc2

  czytaj całość

[html] jak wstawić flash na stronie

Działający we wszystkich przeglądarkach kod HTML od do wklejenia na stronę wyświetlający animacje swl (flash):

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://fpdownload.macromedia.com​/pub/shockwave/cabs/flash/swflash.cab​#version=8,0,0,0″ width=”100″ height=”80″>
<param name=”movie” value=”x.swf” />
<param name=”quality” value=”high” />
<embed src=”x.swf”
quality=”high”
type=”application/x-shockwave-flash”
width=”100″
height=”80″
pluginspage=”http://www.macromedia.com/go/getflashplayer” />
</object>

Wystarczy zmienić zaznaczone w kolorze wartości, odpowiednio wysokość, szerokość oraz adres do pliku .swl (UWAGA! do umieszczenia animacji na stronie wystarczy TYLKO plik .swl! Plik .fla zachowaj na swoim dysku w celu późniejszych zmian, nie musisz wgrywać go na serwer).

[html] Ukrywanie linków w Google

Prosty, szybki, skuteczny i przede wszystkim legalny sposób na ukrycie linków w wyszukiwarce google.

Dlaczego ukrywać linki przed wujem Google? Oczywiście ukrywanie linków nie jest dozwoloną praktyką, ale niektóre linki np. nie są całkowicie związane z tematyką strony (button statystyk odwiedzin), lub są zaczepione o banner reklamowy, itp..

W takich przypadkach Google pozwala na dodanie atrybutu, dzięki któremu silnik wyszukiwarki traktuje link jako “odnośnik bez pokrycia” czyli praktycznie brak odnośnika. Takim atrybutem jest rel=”nofollow”.

Jednak nawet po dodaniu rel-a większość botów (np. systemy wymiany linków) nadal będzie traktować link jako “zwykły link wychodzący” obniżający wartość SEO strony. Jest na to prosty sposób! Wystarczy…  czytaj całość

[css] [html] zaokrąglenia

Prosta i ciekawa funkcjonalność, która z pewnością poprawi walory Twojej strony internetowej czy bloga.

Do obsługi zaokrągleń w CSS służy parametr “border-radius“, którego wartością jest rozmiar promienia krzywizny zaokrąglenia (lub dwa promienie w przypadku zokrągleń eliptycznych). Jako, że parametr jest składnikiem CSS3, musimy dodać “zamienniki” (-webkit-border-radius oraz -moz-border-radius), które będą zrozumiałe dla przeglądarek nie obsługujących w pełni polecań CSS3.  czytaj całość

Kurs CSS dla niecierpliwych [cz 2/2]

Kontynuacja przyspieszonego kursu dla niecierpliwych. Część 1/2 – Kurs CSS dla niecierpliwych 1/2

Zakładam, że znasz lub zapoznałeś/aś się już wstępnie z podstawami HTML, wiesz do czego on służy i co się z nim robi 😉 Zakładam również, że wiesz co kryje się pod pojęciem CSS. Jeśli tak nie jest, zapraszam do pierwszej części kursu: kurs css 1/2.

W 2giej części skupię się na połączeniem CSS z HTML. Powiem o tym jak połączyć styl CSS z kodem HTML w prosty i przejrzysty sposób, oraz kilka przydatnych rzeczy dla początkujących.

  czytaj całość

Kurs CSS dla niecierpliwych [cz 1/2]

Co to jest CSS, po co go używać, jak go używać..
CSS – stylizowanie różnych elementów HTML, inaczej mówiąc: wizualizowanie/nadawanie odpowiedniego wyglądu strony www.

Zaczynając kurs CSS (nawet ten, przyspieszony) zakłądam, że znasz podstawowy HTML (a – link, b – pogrubienie, itp). Jeśli tak nie jest, po prostu przeczytaj kurs i spróbuj je poznać, w środkowej części kursu będzie nawiązanie do niektórych znacnzików HTML-a.

  czytaj całość

Kody szpiegujące – optymalizacja strony

Ciągnąc dalej temat kodów wychodzących / kodów szpiegujących, nie można pominąć chyba najważniejszej kwestii czyli optymalizacji kodu.

Jeszcze jakiś czas temu, powiedzmy przed dwoma laty, projektowanie stron internetowych sprowadzało się jedynie do poprawności wizualnej, opcjonalnie standaryzacją kodu wg W3C, kilka dni spędzonych nad kursem HTML-a, podstawowe informacje o CSS, i własna strona internetowa nie stanowiła już większego problemu.

 

Jednak dziś, aby móc dopisać do swoich osiągnięć kolejną witrynę www, należy nico bardziej się wysilić, oprócz oprawy graficznej godnej XXI wieku, niebanalnych stylów CSS, fruwających bajerów JavaScript czy w końcu całych systemów CMS, musimy zadbać o to aby nasza strona była “dobrze zoptymalizowana” – przyjazna zarówno użytkownikowi jak i botom wyszukiwarek, tak aby użytkownik miał możliwość szybkiego i bezproblemowego dotarcia do strony.

 

Dziś skupimy się na powiązaniu optymalizacji strony z kodami zewnętrznymi.

Każdy kod wychodzący z naszej witryny to kolejny tzw “obiekt”, który przeglądarka musi pobrać, aby wyświetlić stronę użytkownikowi. W przypadku obiektów wewnętrznych, czyli: stylów CSS, kodów JS, obrazków, które są na serwerze razem ze stroną, przeglądarka pobiera je wszystkie hurtem, czyli w 1 sesji, co sprawia, że pobierają się dość szybko i bezproblemowo.

W przypadku obiektów wychodzących, przeglądarka jest zmuszona nawiązać całkiem nowe połączenie z serwerem, na którym dany obiekt się znajduje, pobrać go, dołączyć do strony i dopiero zabrać się za pobieranie dalszej części witryny. Jest to więc kolejne zbędne połączenie jakie wykonuje przeglądarka.

 

Kody szpiegujące – obiekty wychodzące, o tyle są niebezpieczne dla optymalizacji, że nigdy nie wiadomo ile dokładnie czasu będą się ładować.

Przykładów nie trzeba wcale długo szukać, wystarczy przeglądnąć kilka najpopularniejszych stron. Dość łatwo zauważymy, że jakaś strona ładuje się długo.. Jest to właśnie przyczyna kodów szpiegujących.

 

Podsumowując: im mniej wychodzących obiektów na naszej stronie, tym szybciej ona będzie się ładować naszym użytkownikom, oraz automatycznie tym większą popularność będzie miała nasza strona. Nie zapominajmy, że użytkownicy lubią szybkie strony!

 

Kurs css

  • Kurs CSS dla niecierpliwych [cz 1/2]

    Co to jest CSS, po co go używać, jak go używać.. CSS - stylizowanie różnych elementów HTML, inaczej mówiąc: wizualizowanie/nadawanie odpowiedniego wyglądu strony www. Zaczynając kurs…

  • Kurs CSS dla niecierpliwych [cz 2/2]

    Kontynuacja przyspieszonego kursu dla niecierpliwych. Część 1/2 - Kurs CSS dla niecierpliwych 1/2 Zakładam, że znasz lub zapoznałeś/aś się już wstępnie z podstawami HTML, wiesz do czego…