Skocz do zawartości

Zawartość z najwyższą reputacją


#455 [Web-Talk.pl] Rangi na forum

Napisane przez zonic w 16 kwiecień 2013 - 12:55

Nazwa pliku: Rangi na forum (Web-Talk.pl)

Plik Dodał: zonic

Plik wysłano: 16 kwi 2013

Kategoria pliku: Darmowe pliki graficzne

 

Przedstawiam Wam pierwszą, bezpłatną paczkę od web-talk.pl.
Rangi dla forum dyskusyjnego. Paczka zawiera zarówno pliki .png rang jak i w pełni edytowalne pliki .PSD ze wszystkimi warstwami.

Zabrania się odsprzedaży plików jak i ich rozpowszechniania za pośrednictwem innego portalu niż web-talk.pl

Podgląd:

web-talk-pl-rangs.png

 

Kliknij tutaj aby pobrać plik


  • 10


#3461 [poradnik] Jak stworzyć formularz AJAXowy z filtrem anty-bot

Napisane przez unbreak w 26 styczeń 2014 - 13:49

W tym poradniku pokażę jak stworzyć prosty formularz kontaktowy, obsługiwany ajaxem, czyli bez konieczności przeładowywania strony.
 
Zaczniemy od htmla, przedstawiam najprostszy formularz chyba z możliwych:
HTML (index.html)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	
	<title>AJAX FORM</title>
	<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="js.js"></script>
	<style>
		.error{color:#f00;border:1px solid #f00;}
	</style>
</head>
<body>
	<form id="actionForm" action="send.php" method="post">
	Imię: <input type="text" name="name" id="name" placeholder="Podaj swoje imię" /><br />
	Temat: <input type="text" name="subject" id="subject" placeholder="Podaj temat kontaktu" /><br />
	Wiadomość: <textarea name="message" placeholder="Wpisz wiadomość"></textarea><br />
        Czy lew jest psem czy kotem? <input type="text" name="question" placeholder="Odpowiedz na pytanie" /><br />
	<button type="submit">Wyślij</button>
	</form>
</body>
</html>

 
Teraz w php odbierzemy informacje przesłane z formularza:
PHP (send.php)

<?php 
//zapisujemy otrzymane wartości do zmiennych
$name = isset($_POST['name']) ? $_POST['name'] : '';
$subject = isset($_POST['subject']) ? $_POST['subject'] : '';
$message = isset($_POST['message']) ? $_POST['message'] : '';
$question= isset($_POST['question']) ? $_POST['question'] : '';

//na wstepie sprawdzamy czy formularz nie zostal wypelniony przez bota:
if( !in_array(strtolower($question),array('kot','kotem') ) ){
	echo json_encode(array('status'=>false,'errors'=>array('question'),'msg'=>"Ty bocie ty!"));
    exit;
}

//przygotowujemy sobie zmienne do zwrocenia
$status = true;
$error = array();
$msg = 'Dziękujemy zapraszamy ponownie';

//tutaj robimy walidację jaką chcemy, ja upewniam się że pole 'name' składa się z przynajmniej 3 znaków i składa się jedynie z liter, liczb, spacji oraz '-'
if( !preg_match("/^([a-zA-z0-9 -]{3,})$/",$name) ){
	//w przypadku niepoprawnego pola ustawiamy status na false i do tablicy $error dodajemy name pola z bledem
	$status = false;
	$error[] = 'name';
}

//tutaj upewniam się ze tytul nie jest pusty
if( !preg_match("/^(.+)$/",$subject) ){
	//w przypadku niepoprawnego pola ustawiamy status na false i do tablicy $error dodajemy name pola z bledem
	$status = false;
	$error[] = 'subject';
}

//tutaj upewniam się ze wiadomosc ma przynajmniej 10 znaków
if( !preg_match("/^((.*){10,})$/",$message) ){
	//w przypadku niepoprawnego pola ustawiamy status na false i do tablicy $error dodajemy name pola z bledem
	$status = false;
	$error[] = 'message';
}

//jeżeli wystąpił jakiś błąd zmieniamy komunikat
if( !$status ){

	$msg = "Proszę wypełnić formularz poprawnie";

}else{
	
	//tutaj robimy co chcemy robić w przypadku poprawnych danych, np zapisujemy do bazy, wysyłamy maila, etc.
	//możemy tu też sprawdzać czy docelowa akcja się powiedzie i jeżeli nie to zmieniamy status na false i msg na konkretną informacę

}

//wyświetlamy wynik całej operacji jako json
echo json_encode(array('status'=>$status,'errors'=>$error,'msg'=>$msg));
exit;

 
Jeżeli teraz wysłalibyśmy taki formularz to strona by się przeładowała do pliku send.php i otrzymalibyśmy goły json z wynikami operacji. Żeby to zmienić potrzebny nam jest odpowiedni skrypt JavaScript (musimy mieć załączoną bibliotekę jquery).
JAVASCRIPT (js.js)

$(document).ready(function(){
	$("form#actionForm").submit(function(e){
		e.preventDefault(); //
		var form = $(this);
		$.post(
			form.attr('action'),
			form.serialize(),
			function(r){
				if( r.status ){
					form.html(r.msg);
				}else{
					alert(r.msg);
					form.find('.error').removeClass('error');
					for( var i=0;i<r.errors.length;i++ ){
						var name = r.errors[i];
						form.find('input[name="'+name+'"],textarea[name="'+name+'"]').addClass('error');
					}
				}
				
				return;
			},
			'json'
		);
	});
});

Przeanalizujmy źródło js:
3: e.preventDefault() - dzięki tej linijce formularz się nie wyśle standardową akcją
5: $.post -  wysyłamy formularz za pomocą AJAXA, requestem POST (można użyć $.get)
6: form.attr('action') - ustawiamy cel wysłania formularza na taki jaki jest w htmlu ustawiony action
7: form.serialize() - przetwarzamy wartosci wszystkich pol formularza na stringa i przekazujemy je do skryptu php
8: function® - jako parametr callback-u (funkcji wywołanej po otrzymaniu odpowiedzi od serwera) podajemy odpowiedź serwera
9: if( r.status ) - sprawdzamy czy w ospowiedzi jest ustawiona wartość status na true
10: form.html(r.msg) -  jeżeli powyższe tak to wyświetlamy w miejsce formularza podziękowanie
jeżeli powyższe nie to:
12: alert(r.msg) - wyświetlamy błąd
13: form.find('.error').removeClass('error') - usuwamy wszystkim elementom formularza klasę 'error'
14-17: for(...){ ... } - przelatujemy przez wszystkie błedy i błędnym polom ustawiamy klasę error - za mocą css wyrózniamy te pola
22: 'json' - jako ostatni parametr funkcji post podajemy typ danych jakie otrzmyamy od serwera
 
DEMO: http://web-talk.pl/demo/933-formularz/

DOWNLOAD: Załączony plik  formularz.zip   4,45 KB   0 Ilość pobrań
Jeżeli masz jakieś propozycje zmian lub rozbudowy, czekam na informację.
 

Poradnik jest własnością autora zgodnie z ustawą z dnia 4 lutego 1994 roku o prawie autorskim i prawach pokrewnych. Publikowanie ich na innych forach i serwisach internetowych bez wiedzy i zgody autorów jest surowo zabronione.


  • 6


#819 [PSD] Darmowe, minimalistyczne ikony dla WWW

Napisane przez jack98 w 09 lipiec 2013 - 00:06

IKONY


  • 4


#6331 [AngularJS] Pierwsze starcie

Napisane przez Yeoman w 09 lipiec 2014 - 20:48

Siemanko!

 

Mam chwilę aby podzielić się z wami podstawami o AngularJS, którego mam nadzieje zacznie używać więcej ludzi w Polsce :)

 

Link do strony domowej: https://angularjs.org/

 

AngularJS to JavaScriptowski framework MVW, wypluty przez google, który jest dość łatwy w uzyciu, bardzo szybko wykonamy rzeczy, które w czystym JS zajmują o wiele więcej czasu i posiada on bardzo dużo plusów na tle pozostałych z tej kategorii.

 

Dobra, pierwsze co to zacznijmy od 'zainstalowania' biblioteki. Stwórzmy prosty dokument z dodanym frameworkiem:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mój pierwszy skrypt!</title>
    <script src="https://code.angularjs.org/1.2.19/angular.min.js"></script>
</head>
<body>
    // document body here!
</body>
</html>

Jesli mamy już stworzony plik, który zawiera plik z AngularJS, teraz czas na wykonanie kilku prostych poleceń, które 'ożywią' nasz dokument!

 

Piwersze z nich to dodanie 'ng-app' jako wbudowanej dyrektywy, która definiuje naszą aplikacje. Wszystko pomiędzy tą dyrektywą co związane jest z Angularem, będzie brane pod uwagę przy wykonywaniu skryptu :)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mój pierwszy skrypt!</title>
    <script src="https://code.angularjs.org/1.2.19/angular.min.js"></script>
</head>
<body>
    <div ng-app>
        <input type="text" ng-model="q">
        <span>{{q}}</span>    
    </div>
</body>
</html>

Tutaj mamy do czynienia także z wbudowaną dyrektywą jaką jest ng-model. Generalnie prefiks 'ng' jest zarezerwowany dla wbudowanych dyrektyw w tym frameworków.

ng-model definiuje model danych, które są sprawdzane pod kątem zmian oraz przetwarzane w tym frameworku. Działanie to jest trawione w definicji zwanej digest cycle ale o tym troszkę później. ng-model można określić jako model danych wysyłanych do rdzenia frameworka :) Czyli jak wpiszemy w pole tkstowe tekst, Angular przetrawi go i zwróci wynik końcowy natychmiast.

 

Jak widać, użyłem także tagów {{ }} typowych dla AngularJS, pomiędzy nim, w prostszy sposó (co nie znaczy że najlepszy) definiujemy naszą treść, którą Angular wypluje - dobrym porównaniem jest 'echo' w PHP.

 

Tutaj można zobaczyć proste demo: http://jsfiddle.net/5Tb88/

 

Czyż nie jest łatwe ? Jest. Jednakże to jest początek góry lodowej, która czeka nas do wyuczenia, jeśli chcemy oczywiście cokolwiek tworzyć w tym frameworku.

 

To są akurat podstawy podstaw, opisane moimi słowami, myślę że to taki przedsmak tego co opiszę w następnych tematach. Chciałbym je rozdzielić na więcej i mniejszych tematów, ponieważ z doświadczenia wiem, że z tym co za dużo to i nie zdrowo.

 

Także nie długo kolejna część, bardziej treściwa na temat ogólnie dyrektyw, wbudowanych dyrektyw w AngularJS oraz stworzymy jakiś prosty skrypcik, który będzie korzystał z ich mocy :)

 

Tymczasem zachęcam do czytania przede wszytskim dokumentacji i powodzenia w nacue tym, którzy są zainteresowani w tym temace :)


  • 4


#4967 Lista darmowych katalogów SEO - aktualna

Napisane przez zonic w 11 kwiecień 2014 - 20:44

Kiedys sie korzystalo z darmowek. Teraz to strach tykac nawet i te platne.
Jak masz dobry content to i ruch sam przyjdzie.

Powiedział to kolega od warezów...


  • 4


#4666 Opinie o gnum.pl?

Napisane przez gnum.pl w 26 marzec 2014 - 00:01

Moim zdaniem słaby hosting, nie przypadł mi do gustu i miałem z nim dużo problemów. Najlepiej jest postawić na linuxpl.com lub speedhost.pl

 

 
 
Panie TROLU jak mógł Panu nie przypaść do gustu nasz hosting i jak mógł przynieść dużo problemów skoro u nas nie ma hostingu.
Zajmujemy się wyłącznie domenami :)

  • 4


#18 Najlepsze narzędzia pomagające dobrać kolorystykę projektu www

Napisane przez zonic w 28 luty 2013 - 22:41

Masz problem z dobraniem kolorystyki dla nowego layoutu? Sprawdź poniższą listę narzędzi.

1. COLOROTATE
2. ADOBE KULER
3. Color scheme designer
4. Colour lovers
5. COLOR BLENDER
6. Color munki
7. Color wizard
8. Color exploler

Sam osobiście korzystam z Adobe Kuler. Mam nadzieję, że lista się przyda.
  • 4


#1410 [TUTORIAL] IPB - Wysuwany facebook like box

Napisane przez zonic w 07 wrzesień 2013 - 21:12

Jeśli chcemy stworzyć na swoim forum wysuwany Like Box Facebooka to możemy skorzystać z wtyczki:

Facebook Slide Fanpage

Instalujemy to rozszerzenie i w zasadzie możemy cieszyć się Like Boxem.

Niestety czasami efekt wysuwania nie działa. Wtedy musimy zrealizować następujące kroki:

- Wybieramy nasz styl w panelu administracyjnym i przechodzimy do pliku indoFacebookSlide

- Odnajdujemy w tym pliku poniższy fragment:

 

<!--		<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type='text/javascript'>!window.jQuery && document.write('<script src="{style_images_url}/js/jquery.min.js"><\/script>')</script> -->

 

i usuwamy tagi komentarza. (tj. <!--- oraz -->)

I voila! Teraz powinno wszystko hulać :)


  • 4


#12390 Instalacja Gulp.js na lunuxie

Napisane przez karolgorecki w 31 styczeń 2016 - 14:54

Instalujesz Gulpa globalnie czyli "npm install -g gulp"

Wchodzisz do swojego katalogu z projektem i tam już powinieneś mieć package.json - wtedy byś tylko zrobił "npm i" i by zainstalowało wszystkie zależności.

Jeśli go nie masz to robisz od początku czyli "npm init". Potem możesz dodać te swoje dev zależności: "npm install --save-dev gulp" itd.

Gulpfile też powinien być w głównym folderze ale chyba ścieżki musisz w nim poprawić.

Jak potrzebujesz tylko proste rzeczy robić to Gulp czy Grunt jest zbędny. Wszystko możesz zrobić przy pomocy npm'a.


  • 4


#11347 Organizacja kodu JS

Napisane przez writen w 21 wrzesień 2015 - 15:20

W tym przypadku słówko this wskazuje na element, który został kliknięty.

Możesz tą metodę wywołać po prostu tak: Locate.setAttributes()


  • 4


#11211 [Trick-CSS] Jak ostylować radio i checkbox? (+ efekt transition)

Napisane przez writen w 25 sierpień 2015 - 12:58

Jak nadać własne style elementom input radio i checkbox?

 

Wbrew pozorom nie jest to trudne zadanie. Jednak wiele osób nie wie jak to zrobić, bowiem nie da się nadać stylów tym elementom w standardowy sposób. Taki sposób nie zadziała:

input[type=checkbox] {
background: red;
border: 1px solid red;
}

Jak więc osiągnąć zamierzony efekt?

 

Jest to bardzo proste. Zazwyczaj elementowi input towarzyszy label i to on przejmie rolę tego pola.

<input type="checkbox" name="custom1" id="custom1"> <label for="custom1"> Label</label>

Dlatego więc ukryjemy nasz input właściwością display: none i najzwyczajniej ostylujemy element label. Nie możemy jednak zamienić całego label, ponieważ wewnątrz może znajdować się tekst opisujący nasze pole. Użyjemy do tego celu pseudoklasy :befor, po to żeby pole checkbox znalazło się przed naszym opisem.

label:befor powinien mieć pozycję absolutną, aby móc dokładnie ustalić jego położenie, a także być elementem blokowym (display: block). Reszta stylów (wysokość, szerokość, kolory) zależą od naszego uznania. Dodatkowo w poniższym przykładzie została dodana właściwość transition, dzięki temu osiągniemy efekt płynności podczas zaznaczania naszych pól.

 

W celu określenia co ma się stać gdy element będzie zaznaczony lub zablokowany należy użyć pseudoklas, kolejno :checked i :disabled

 

W celu uzyskania zamierzonego efektu należy zmienić, według uznania, właściwości background-colorborder-colorwidthheight. Zachęcam do eksperymentowania.

 

Demo: http://jsfiddle.net/writen/9L9bamcs

input[type=checkbox], input[type=radio] {
    display: none; /* ukrywamy nasz input */
}

input[type=checkbox] + label, input[type=radio] + label {
    position: relative;
    padding-left: 23px; /* margines wewnętrzny - trzeba zrobić trochę miejsca dla naszego pola */
}

input[type=checkbox] + label:before, input[type=radio] + label:before {
    position: absolute;
    content: "";
    display: block; /* koniecznie element blokowy, aby móc nadać odpowiednie wymiary */
    width: 10px;
    height: 10px;
    top: 0; /* ustalamy pozycje */
    left: 0;
    cursor: pointer; /* dodamy jeszcze odpowiedni kursor */
    transition: all .4s ease;
-webkit-transition: all .4s ease;
background-color: #cccccc;
    border: 3px solid #cccccc;
}

/* checkbox */
input[type=checkbox] + label:before {
    border-radius: 2px;
}

/* radio */
input[type=radio] + label:before {
    border-radius: 50%; /* aby input radio był okrągły */
}

/* gdy zaznaczony */
input[type=checkbox]:checked + label:before, input[type=radio]:checked + label:before {
    background-color: #ffffff;
}

/* gdy zablokowany */
input[type=checkbox]:disabled + label:before, input[type=radio]:disabled + label:before {
    background-color: #b6b6b6;
    border-color: #b6b6b6;
}

/* gdy zaznaczony i zablokowany */
input[type=checkbox]:checked:disabled + label:before, input[type=radio]:checked:disabled + label:before {
    background-color: #cccccc;
    border-color: #b6b6b6;
}

  • 4


#9817 Simple Hosting - Podwajamy przestrzeń

Napisane przez SiXwishlist w 16 marzec 2015 - 16:22

Dobra wiadomość !!!

Mamy przyjemność ogłosić pewne zmiany dla planów hostingowych na SiXwishlist, Podwajamy przestrzeń dla "Simple Hosting" :

UP1 - było 1GB  teraz wynosi 2GB
UP2 - było 2GB teraz wynosi 4GB
Up3 - było 3GB teraz wynosi 6GB
UP4 - było 4GB teraz wynosi 8GB
UP5 - było 5GB teraz wynosi 10GB
UP6 - było 6GB teraz wynosi 12GB
UP7 - było 7GB teraz wynosi 14GB
UP8 - było 8GB teraz wynosi 16GB
UP9 - było 9GB teraz wynosi 18GB
UP10 - było 10GB teraz wynosi 20GB

http://sixwishlist.com/ - Total freedom


  • 3


#962 [Photoshop] Zamiana kolorowego elementu na czarno-biały

Napisane przez zonic w 29 lipiec 2013 - 21:39

Od siebie dodam, że bardzo podobny efekt można osiągnąć przechodząc do menu Image -> Adjustments -> Desaturate. Pozbawiamy w ten sposób zdjęcie nasycenia.

Jednak nie zawsze taki efekt jest wystarczający. W przypadku zdjęć warto bardziej nad nimi popracować, aby odpowiednio dopasować kontrasty etc.


  • 3


#9330 Pomoc w głosowaniu w konkursie :)

Napisane przez unbreak w 06 luty 2015 - 09:09

Poszedł głos. Coś chyba zostaje w tyle :P


  • 3


#891 Jak dodać ramkę fanów Facebook na stronę?

Napisane przez Quaniq w 24 lipiec 2013 - 17:57

Witam wszystkich,

w tym poradniku chciałbym Państwu zaprezentować, jak w łatwy sposób można dodać ramkę fanów (like box) z profilu facebook, na Waszą stronę WWW.

 

1. Wchodzimy do strefy developerów facebooka: https://developers.f...ugins/like-box/

 

2. Po wejściu na podaną stronę, pojawia się okienko do konfiguracji like boxa:

 

v80n.png

 

Opis opcji:

 

Facebook Page URL - w tym miejscu wklejacie link do Waszego profilu Fan Page na Facebooku.

Width / Height (szerokość / wysokość) - wymiary ramki.

Show Faces - czy miniaturki zdjęć fanów mają pokazywać się w ramce. 

Color Scheme - kolorystyka ramki (jasna / ciemna ).

Stream - czy wpisy z Fan Page mają pokazywać się w ramce.

Show Border - czy okienko ma mieć obramowanie.

Header - czy nagłówek "Znajdź nas na Facebooku" ma być wyświetlany w ramce.

Get Code - generuje kod ramki.

 

3. Gdy wszystko mamy skonfigurowane, klikamy Get Code, pojawia nam się okienko z kodem i kilka zakładek, przechodzimy do zakładki IFRAME, kopiujemy kod:

 

oy0u.png

 

4. Kod który skopiujecie, wklejacie w szablonie Waszej strony w miejscu, gdzie ma pojawić się Wasz Like Box.

 

To wszystko co musieliście zrobić. Pozdrawiam i dzięki za skorzystanie z poradnika. 

 

Ps. Poradnik może wydawać się banalny, lecz nie każdy może wiedzieć jak taką czynność wykonać. 


  • 3


#6030 Wasze propozycje poradników

Napisane przez Yeoman w 23 czerwiec 2014 - 18:22

Przecież portable to tylko wersja, której nie musisz instalować i jak każda inna, nie kupiona jest piratem :P

 

A nawiązując do tematów, które podałeś powyżej to są 'takie se' :P

 

Ja myślałem nad poradnikami dla automatyzacji pracy frontendu, o angularJS, coffeescript, nodeJS, testowaniu javascript i może coś więcej.


  • 3


#5172 Podcasty od webMASTAH.pl

Napisane przez zonic w 20 kwiecień 2014 - 09:41

Bardzo ciekawa inicjatywa. Zapraszam do odsłuchania, komentowania i dyskutowania :)

Odcinek 1:
 

00:00 – Jakość kodu vs czytelność kodu vs wiedza czytającego
20:40 – Czy PHP stał się “prawdziwym” językiem?

 

Odcinek 2:
 

00:00 – standardy kodowania – czy ułatwiają czy utrudniają nam życie? Czy są w ogóle potrzebne? Czy nie jest to zwyczajny przerost formy nad treścią?
13:10 – “perfekcjonizm” – o dziwnej przypadłości dotykającej developerów czyli pogoni za doskonałością własnego kodu. Czy ma to wpływ na wydajność i jakość kodu? Jaki? Czy jest to dobre czy złe? Kiedy warto powiedzieć sobie “dość”?


  • 3


#376 [Photoshop] Jak stworzyć layout WordpPrees w PS

Napisane przez programer w 07 kwiecień 2013 - 00:53

Efekt końcowy:

myraidpro-wp-tut-img-preview.jpg

 

Link do poradnika: PORADNIK


  • 3


#10977 inline bbcode 'code'

Napisane przez unbreak w 16 lipiec 2015 - 14:33

jestę testę
 
użycie:
[c]TESKT[/c]
Zonic prośba o wrzucenie grafiki http://web-talk.pl/p...images/code.png do katalogu public/style_extra/bbcode_icons będzie można to dodać do szybkiego użycia :) THX
  • 3


#10745 Animacja ruchu po koordynatach - canvas

Napisane przez writen w 17 czerwiec 2015 - 19:55

Czy chodziło ci o taki efekt? http://jsfiddle.net/writen/exenqqdo/8/

Nie wiem co to ma być za mini gra, ale podoba mi się :)


  • 3