Jakub
-
Postów
1 291 -
Dołączył
-
Ostatnia wizyta
-
Wygrane w rankingu
9
Typ zawartości
Forum
Pliki
Sklep
Opinie o użytkowniku
Galeria
Odpowiedzi opublikowane przez Jakub
-
-
Witaj -
-
-
-
-
-
To portfolio jest proste ale zbyt proste bo nie ma na czym zawiesić oka. Niczym się nie wyróżnia od innych portfolii. Te dwie ostatnie pracę na stronie głównej wyglądają nijako. -
Elllooo
-
-
-
-
łap [hideplus]<div><div class="ipsMessage ipsMessage_success"> </div>[url=https://grafinity.pl/upload/pliki/textury_5638e849e2286.rar] </div>http://spacecms.eu/upload/pliki/textury_5638e849e2286.rar [/url]
<div class="ipsMessage ipsMessage_success">[url=https://grafinity.pl/upload/pliki/textury-v2_5638e67c6d2e7.rar] </div>http://spacecms.eu/upload/pliki/textury-v2_5638e67c6d2e7.rar [/url] [/hideplus]
To jest to samo co tam w temacie
-
Goha
Fajnie, że zawitałaś do nas :) -
-
-
-
Kopia mojego avka...
Witaj na forum. -
Problem rozwiązany -
-
Cześć -
Zaczynając przygodę z nową wersją języka HTML należy wspomnieć o licznych zmianach wprowadzonych w stosunku co do starszej wersji HTML4,
czyli:
- Usunięcie przestarzałych znaczników m.in:[code]<basefront>, <big>, <center>, <strike>, <frame>, <frameset>, <tt> itd..- Dodanie nowych znaczników i atrybutów, np:[/code] [code]<article>, <header>, <details>, <figure>, <nav>, <section>, <mark>, <time>, <audio>,<video>, <source>, <bdo>,<rp> itp- których zadaniem jest uprościć i zwiększyć kontrolę nad szkieletem strony.[/code]
- Uproszczenie zapisu znaczników oraz innych atrybutów, np:
wersja html5:[code]<meta charset="UTF-8" />wersja starsza:[/code] [code]<meta http-equiv="content-type" content="text/html;charset=UTF-8" />- element ?Canvas?[/code]
- Obsługa multimediów
- Rozbudowane formularze (dużo nowych typów pól)
- API
- Odejście od zasady obowiązkowego zamykania znaczników[code]<table> <tr> <td> komórka tabeli <td> komórka tabeli <tr> <td> komórka tabeli <td> komórka tabeli </table>W starszej wersji html wyskoczyły by nam krzaki, jednak HTML5 zinterpretuje to wg naszej myśli.[/code]
- Brak konieczności zamykania elementów pustych, tzn:[code] czyli zapis <br> tego typu <br/> jest w pełni poprawny- HTML5 ignoruje wielkie litery znaczników, co pozwala na napisanie np takiego kodu:[/code] [code]<p> małe czy Duże<SPAN>litery</SPan> nie mają znaczenia</P>- Wartości atrybutów nie muszą być zapisywane w cudzysłowie pod warunkiem iż nie zawierają znaków specjalnych (typu: >, -, lub spacje), jak również w niektórych wypadkach można podawać atrybut bez podawania ich wartości np:[/code] [code]<img alt="opis zalaczonego obrazka" src=obrazek.jpg> <input type="checkbox" checked>- znaczniki typu[/code] [code]<html>, <head>, <body>są opcjonalne.[/code]
Z grubsza mówiąc to jedne z ważniejszych różnic pomiędzy HTML5 a HTML4. Każdy z tych punktów można było by rozpisać na wiele stron.
<span style="font-size: 9px; line-height: normal">Źródło: hackwars.pl</span> -
Internet bez wyszukiwarek byłby stosem nic nam nie mówiących linków ? to prawda, której nie będę nawet próbował podważyć. W związku z tym, że dużo łatwiej nam jest wyszukać daną treść, niż zapamiętać i użyć długiego odnośnika, dzisiejszy artykuł ? tutorial poświęcony będzie przygotowaniu eleganckiego (i mam nadzieję ? ładnego) pola wyszukiwania. Gotowy kod HTML/CSS3 można bez problemu zaaplikować na własnej witrynie lub zmodyfikować go uprzednio, dostosowując panel do własnych potrzeb.
Zaczynamy oczywiście od dokumentu HTML. Bez zbędnego omawiania ? dodajmy pole tekstowe i przycisk wysyłania formularza.
[code]<pre xml:lang=?html4strict?><form> <input type="text" id="szukaj"> <input type="submit" value="Szukaj" id="wyslij"> </form></pre>Potrzebujemy jeszcze kodu CSS3, który sformatuje nam odpowiednio pole wyszukiwarki. W naszym arkuszu dodajmy następujący kod.[/code] [code]<pre xml:lang=?css?>form input {float: left; border: 0; margin: 0; background: none;} form #szukaj, form #wyslij {font-family: calibri; letter-spacing: -1px; font-size: 1em; padding: 10px; color: gray;} /*ZAOKRĄGLENIA*/ form #szukaj {border-radius: 3px 0 0 3px;} form #wyslij {border-radius: 0 3px 3px 0;} /*CIEŃ I USUWANIE OTOCZKI*/ form #szukaj {box-shadow: 0 0 10px silver inset; -moz-outline: none; -webkit-outline: none; -o-outline: none; outline: none; } form #wyslij {cursor: pointer;} /*GRADIENT*/ form #szukaj { background: #f2f2f2; background: -moz-linear-gradient(top, #f2f2f2 1%, #d6d6d6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f2f2f2), color-stop(100%,#d6d6d6)); background: -webkit-linear-gradient(top, #f2f2f2 1%,#d6d6d6 100%); background: -o-linear-gradient(top, #f2f2f2 1%,#d6d6d6 100%); background: -ms-linear-gradient(top, #f2f2f2 1%,#d6d6d6 100%); background: linear-gradient(to bottom, #f2f2f2 1%,#d6d6d6 100%); filter: progid :D XImageTransform.Microsoft.gradient( startColorstr=?#f2f2f2?, endColorstr=?#d6d6d6?,GradientType=0 ); } /*CIEŃ TESKTU I GRADIENT*/ form #wyslij { text-shadow: 0 0 1px white; background: #258dc8; background: -moz-linear-gradient(top, #258dc8 0%, #f9ca2f 0%, #ffea4f 0%, #f9ca2f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#258dc8), color-stop(0%,#f9ca2f), color-stop(0%,#ffea4f), color-stop(100%,#f9ca2f)); background: -webkit-linear-gradient(top, #258dc8 0%,#f9ca2f 0%,#ffea4f 0%,#f9ca2f 100%); background: -o-linear-gradient(top, #258dc8 0%,#f9ca2f 0%,#ffea4f 0%,#f9ca2f 100%); background: -ms-linear-gradient(top, #258dc8 0%,#f9ca2f 0%,#ffea4f 0%,#f9ca2f 100%); background: linear-gradient(to bottom, #258dc8 0%,#f9ca2f 0%,#ffea4f 0%,#f9ca2f 100%); filter: progid :D XImageTransform.Microsoft.gradient( startColorstr=?#258dc8?, endColorstr=?#f9ca2f?,GradientType=0 ); } /*CIEŃ TEKSTU I GRADIENT*/ form #wyslij:hover { text-shadow: 0 0 1px black; color: white; background: #82b8ff; background: -moz-linear-gradient(top, #82b8ff 1%, #18a5f2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#82b8ff), color-stop(100%,#18a5f2)); background: -webkit-linear-gradient(top, #82b8ff 1%,#18a5f2 100%); background: -o-linear-gradient(top, #82b8ff 1%,#18a5f2 100%); background: -ms-linear-gradient(top, #82b8ff 1%,#18a5f2 100%); background: linear-gradient(to bottom, #82b8ff 1%,#18a5f2 100%); filter: progid :D XImageTransform.Microsoft.gradient( startColorstr=?#82b8ff?, endColorstr=?#18a5f2?,GradientType=0 ); }</pre>[/code]
W komentarzach, pośród listingu, nazwałem najbardziej niezrozumiałe (przez początkujących) własności CSS3. Z edycją spokojnie powinniście sobie poradzić. Do zmiany gradientów polecam generator online ColorZilla.
<span style="font-size: 5px; line-height: normal"> </span></span> -
Siemanko.
W tym temacie dowiecie się jak za pomocą tylko i wyłącznie kodu, otrzymać efektowny przycisk.
Przycisk ten będzie działał we wszystkich nowych przeglądarkach (Chrome, Opera, Safari, Mozilla etc.)
<span style="font-weight: bold">1. HTML
Zaczniemy od napisania bardzo krótkiego kodu, który pozwoli nam wyświetlić button. Nie będziemy używać do tego żadnych tabelek, lecz klasy. </span>[code]<a href="adres_do_przekierowania" class="btn">Hello !</a>[/code] Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszęhttp://developerski.com/wp-content/uploads/2014/04/css3-button-tutorial-1.jpg [/img]
<span style="font-weight: bold">2. CSS
Całość będzie umieszczona w klasie ?btn?. Wszystkie niżej wypisane parametry powinieneś wpisywać właśnie w tę klasę. </span>[code].btn { }<span style="font-weight: bold">3. Styl przycisku[/code]
Na początek określimy obramowanie oraz kształt naszego przycisku. Dodamy także webkit border radius dla poprawnego działania w przeglądarkach Safari oraz Chrome. </span>
[code]padding: 10px 20px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #1f5d9b;[/code] Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszęhttp://developerski.com/wp-content/uploads/2014/04/css3-button-tutorial-2.jpg [/img]
<span style="font-weight: bold">4. Kolory/gradienty
Utworzymy teraz elementy gradientu dla naszego przycisku. Sposób działania gradientu jest bardzo prosty. Górny kolor (#87c2f0) oznacza górny kolor gradientu, zaś ten niżej dolny (#4281b9). Pierwsze tło jest dla Firefox?a drugie dla Safari i Chrome. </span>[code] background: -moz-linear-gradient( top, #87c2f0 0%, #4281b9); background: -webkit-gradient( linear, left top, left bottom, from(#87c2f0), to(#4281b9));[/code] Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszęhttp://developerski.com/wp-content/uploads/2014/04/css3-button-tutorial-3.jpg [/img]
<span style="font-weight: bold">5. Styl tekstu
Następnie w naszej klasie musimy zdefiniować rodzaj, rozmiar i wielkość czcionki. Dodalismy dla lepszego efektu także cień :
- 1 wartość ? poziomy dystans (0px)
- 2 wartość ? pionowy dystans (1px)
- 3 wartość ? rozmycie cienia (2px)
- 4 wartość ? kolor cienia (rgba(000,000,000,0.7) ) </span>[code]font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 17px; color: #ffffff; text-shadow: 0px 1px 2px rgba(000,000,000,0.7); text-decoration: none;[/code] Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszęhttp://developerski.com/wp-content/uploads/2014/04/css3-button-tutorial-4.jpg [/img]
<span style="font-weight: bold">6. Styl ?Hover?, czyli po najechaniu na przycisk
Aby dodać nowy button po najechaniu na istniejący, należy stworzyć klasę .btn:hover . W naszym przypadku zmieni się tylko kolor buttonu. </span>[code] .btn:hover { background: -moz-linear-gradient( top, #1381cf 0%, #093a63); background: -webkit-gradient( linear, left top, left bottom, from(#1381cf), to(#093a63)); }[/code] Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszęhttp://developerski.com/wp-content/uploads/2014/04/css3-button-tutorial-5.jpg [/img] -
Licznik Odwiedzin
Jak zrobić licznik odwiedzin na swojej stronie .
1.Kod w Klejamy na samej górze strony[code] <?php ob_start(); $start=microtime(); // kod do liczenia czasu ładowania strony ?>2.Później wklejamy kod gdzie chcemy umieścić nasz licznik[/code] [code] <?php ob_start(); include("licznik.php"); ?>3. Tworzymy plik licznik.php wklejamy kod podany niżej zapisujemy i wrzucamy go do public html[/code] [code]<?php ob_start(); // ========== funkcje ========== function open($name="",$trybe="r",$value="0") { if(file_exists($name)) { $file=fopen($name, $trybe); flock($file, 1); if (filesize($name)>0) return fread(fopen($name, $trybe), filesize($name)); else return $value; flock($file, 3); fclose($file); } } function save($name="",$date="",$trybe="w") { if(file_exists($name)) { $file=fopen($name, $trybe); flock($file, 2); fwrite($file, $date); flock($file, 3); fclose($file); } } // =========== ścieżki ========== $scr[0] = "licznik/ip.txt"; $scr[1] = "licznik/dane.txt"; $scr[2] = "licznik/log.txt"; // ========== zmienne ========== $aktu_ip = $_SERVER['REMOTE_ADDR']; $host = gethostbyaddr($aktu_ip); $aktu_czas = (date(G)*3600)+(date(i)*60)+date(s); //date(G)*60+date(i); 3600 = 1h; $czas_online = 600; // (10 minut) = 600 sekund $czas_opuznienia = 900; // (15 minut) = 900 sekund $data = date("Y-m-d", time()); $online = 1; $zmienna = False; $nowe_dane = ''; // =========== źródło ========== $dane = explode(chr(1),open($scr[1])); if(!strcmp($dane[2],$data)) { $tab1 = explode(chr(1), open($scr[0])); for( $x = 0; $x <= count($tab1)-2; $x+=2 ) { if(!strcmp($aktu_ip, $tab1[$x])) { if($aktu_czas - $czas_opuznienia < $tab1[$x+1]) $zmienna=True; } else { if($aktu_czas - $czas_opuznienia < $tab1[$x+1]) { $nowe_dane .= $tab1[$x].chr(1).$tab1[$x+1].chr(1); if($aktu_czas - $czas_online < $tab1[$x+1]) $online++; } } } if ($zmienna == 0) { $dane[0]++; $dane[1]++; save($scr[1],$dane[0].chr(1).$dane[1].chr(1).$dane[2]); $wszystko = "$dane[0]-".chr(1). "- $dane[1]-" .chr(1). "- $online-" .chr(1). date("- Y-m-d -" .chr(1). "- G:i :s -", time()) .chr(1). "- $aktu_ip-" .chr(1). "- $host-" .chr(1). $HTTP_REFERER .chr(1). $HTTP_USER_AGENT .chr(13).chr(10); save($scr[2],$wszystko,"a"); } } else { save($scr[0]); $dane[0]++; $dane[1] = 1; save($scr[1],$dane[0].chr(1).$dane[1].chr(1).$data); $wszystko = "$dane[0]-".chr(1). "- $dane[1]-" .chr(1). "- $online-" .chr(1). date("- Y-m-d -" .chr(1). "- G:i :s -", time()) .chr(1). "- $aktu_ip-" .chr(1). "- $host-" .chr(1). $HTTP_REFERER .chr(1). $HTTP_USER_AGENT .chr(13).chr(10); save($scr[2],$wszystko,"a"); } $nowe_dane> .= $aktu_ip.chr(1).$aktu_czas.chr(1); save($scr[0],$nowe_dane); echo "<font color=\"blue\">odwiedzin: </font><font color=#ADCAFF><b>$dane[0]</b></font> "; echo "<font color=\"blue\">dzisiaj: </font><font color=#ADCAFF><b>$dane[1]</b></font> "; echo "<font color=\"blue\">on-line: </font><font color=#ADCAFF><b>$online</b></font> "; // LICZNIK POWSTANIA STRONY //przekształcamy datę w przeszłości do formatu unix'owego $data = strtotime("2008-11-25 0:00:30"); //tu wpisz datę od kiedy ma liczyć //pobieramy bieżący czas $teraz = time(); //różnice dzielimy przez jeden dzień czyli 60 s. * 60 m. * 24 godz. $dni_r = ($teraz - $data) / (60 * 60 * 24); //część całkowita z dzielenia to liczba dni $dni_c = floor($dni_r); //resztę z dzielenia mnożymy przez dobę $godzin_r = ($dni_r - $dni_c) * 24; //część całkowita z mnożenia to liczba godzin $godzin_c = floor($godzin_r); //resztę mnożymy przez godzinę $minut_r = ($godzin_r - $godzin_c) * 60; //część całkowita to liczba minut $minut_c = floor($minut_r); //część całkowita reszty pomnożonej przez minutę to liczba sekund $sekund_c = floor(($minut_r - $minut_c) * 60); echo "<font color=\"blue\">strona istnieje: </font><font color=#ADCAFF><b>$dni_c</b></font><font color=\"blue\"> dni</font> "; // LICZNIK GENEROWANIA STRONY echo "<font color=\"blue\">ładowanie: </font>"; echo "<font color=#ADCAFF><b>"; echo round(microtime()-$start, 3); echo "</b></font><font color=\"blue\"> sek</font>";4. Na koniec utwórz 3 pliki log.txt ip.txt dane.txt w folderze licznik wrzuć je do public html i nadaj im prawa chmod 666[/code]
Powitanko ;)
w O sobie
Opublikowano
Poeta
Siemanko Piotrek