Posted by
on 16 April 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:
Posted by
on 26 January 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: 
formularz.zip 4.45KB
0 downloads
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.
Posted by
on 09 July 2013 - 00:06
Posted by
on 09 July 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
Posted by
on 11 April 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...
Posted by
on 26 March 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
Posted by
on 28 February 2013 - 22:41
Posted by
on 07 September 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ć
Posted by
on 31 January 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.
Posted by
on 21 September 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()
Posted by
on 25 August 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-color, border-color, width, height. 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;
}
Posted by
on 09 January 2015 - 18:03
Można wrzucić przy rejestrowaniu zadanie z całką...
Tak wiem, inteligencja to nie to samo co mądrość
Ustaw sobie takie coś na budzik rano cwaniaku 
żeby go wyłączyć jebnij całkę
Posted by
on 07 October 2014 - 18:15
Siemano.
Troche mnie nie było tutaj, a obiecałem że będę dalej pisał w tym temacie. Mam chwilę wolnego czasu na napisanie wprowadzenia do dyrektyw a więc..
Na początku chciałbym wytłumaczyć w prosty sposób czym jest dyrektywa i po co nam do szczęścia.
Dyrektywy w AngularJS to nic innego jak custom elements, które posiadają własą konfigurację, mogą (aczkolwiek nie jest to wymagane) posiadać własny kontroler, mają możliwość odizolowania scope'a (przykładowo jeśli mamy dwie dyrektywy, które są kontrolowane przez scope'a rodzica, między kontrolerami, o których wspomniałem wcześniej), posiadają przydatne metody do kompilowania oraz metody linkujące i wiele innych, które będę w miare czasu opisywał.
Opisywane dyrektywy przydatne sa do tworzenia reużywalnych komponentów. Pomyślmy że mamy zegarek, który ma swoje zadanie, odlicza czas itp. - możemy go użyć w każdym innym projekcie, który jest pisany w AngularJS. Zastosowań jest mnóstwo. Ale tu nie będę przytaczał przykładów, sami sobie poszukacie 
Poniżej wyjaśnie kilka podstaw, stworzymy własną dyrektywe.
Moja dyrektywa - pierwszy zapis
<moja-dyrektywa></moja-dyrektywa>
Wygląda dziwnie, bo w normalnie w HTML'u nie mamy takiego tagu. Chyba że sztucznie go stworzymy za pomocą JS'a. To tylko zapis w HTML'u, który nic nie znaczy, dopóki nie zarejestrujemy w pliku JS naszej dyrektywy.
Rejestrowanie dyrektyw wygląda następująco:
1. Nie możemy zapomnieć o tym aby dyrektywa była dzieckiem całej aplikacji:
var app = angular.module('myApp', []);
2. Teraz możemy zadeklarować naszą dyrektywe:
app.directive('mojaDyrektywa', function() {
// Kod
});
Info: Zauważmy, że zapis jest bardzo podobny do zapisu kontrolera. Dyrektywa przyjmuje także dwa parametry. Nazwa oraz funkcja zwrotna (tzw. callback) Jedno bardzo ważne w tym wszystkim jest by uważać na nazwe dyrektywy w HTML'u oraz w JS. W HTML używamy myślnika a w JS używamy po prostu camelCase zamist odstępów. Jeśli dyrektywa jest krótka, wtedy można wpisać jedno słowo, np. moje etc. To bardzo ważne, ponieważ początkujący programiści często popełniają ten błąd a później marudzą że nie działa i zniechęcają się bardzo szybko 
Świetnie. Teraz wiemy jak deklarować dyrektywy, wiemy czym one są, a więc przechodzimy dalej.
Konfiguracja dyrektywy
Wyjaśnie tutaj prostą konfigurację, ponieważ jest sporo do opisywania w tej kwestii.
Pierwszy parametr naszej konfiguracji będzie restrict (string).
Info: Dyrektywa zwraca nam obiekt, w którym wklepujemy naszą konfiguracje.
var app = angular.module('myApp', []);
app.directive('mojaDyrektywa', function() {
return {
restrict: "E"
};
});
restrict to pole, które określa w jakim formacie angularJS ma czytać dyrektywe. Mamy kilka możliwości:
E: Oznacza element:
<moja-dyrektywa>
A: Oznacza atrybut:
<div my-directive>
C: Oznacza klasę:
<div class="moja-dyrektywa">
M: Oznacza komentarz
<– directive: moja-dyrektywa –>
Info: Zaleca się unikać komentarzy jako parametru dla restrict ponieważ nie wyglądają dobrze oraz starsze IE nie radzą sobie z tym. Także poleca się aby unikać C jako klasy, ponieważ nie wygląda to dobrze w kodzie. W tym przypadku to kwestia gustu. Najbardziej zalecane są pozostałe czyli E oraz A.
Wartości dla tego pola można łączyć:
restrict: "EA"
W tej chwili mamy stworzoną dyrektywe. Zastosujmy kolejny parametr aby to jakoś wyglądało - dodamy treść naszej dyrektywy poprzez pole template (string/function).
var app = angular.module('myApp', []);
app.directive('mojaDyrektywa', function() {
return {
restrict: "E",
template: "<p>Treść!</p>"
};
});
Ta operacja pozwoliła nam wkleić pomiędzy naszą dyrektywe dowolny kod HTML. Demo
Jednak jeśli zobaczymy źródło w kodzie HTML, nasza dyrektywa się nie zmieni. Nie zostanie tam nic 'zappendowane' ani nic.
Możemy także użyć funkcji w tym przypadku:
var app = angular.module('myApp', []);
app.directive('mojaDyrektywa', function() {
return {
restrict: 'E',
template: function(tElem, tAttr) {
tElem.text('Treść!');
}
};
});
Funkcja przyjmuje dwa parametry. Pierwszy określa element (element do którego dyrektywa jest przypisana) lub atrybut. Strorzyliśmy wynik jak w przypadku pierwszym. Demo
Info: Możemy także przełamywać wiersze w tym polu.
var app = angular.module('myApp', []);
app.directive('mojaDyrektywa', function() {
return {
restrict: 'E',
template: '\
<div>\
<a href="#">Jakiś link...</a>\
<p>Moja treść</p>\
</div>\
'
};
});
Efekt możecie przetestować tutaj: Demo - Niestety nie wygląda to fajnie i lepiej użyć templateUrl zamiast template. templateUrl przyjmuje string, gdzie przekazujemy ścieżkę do pliku HTML lub funkcje która musi zwrócić ścieżkę do pliku HTML.
Dobrze. Mamy jakiś tekst, jakąś dyrektywe. Zróbmy jakąś operacje na niej poprzez metode compile oraz link, które będą zarazem zakończeniem tej części wpisu.
Metoda compile wykonuje się przed metodą link co jest bardzo przydatne np. do wcześniejszego manipulowania drzewem HTML'a, a metoda link jest używana np. do rejestrowania zdarzeń.
Compile wykonuje się zanim dyrektywa dostanie swoje 'serce' i jeśli postanowimy go uzyć, wtedy metoda link jest ignorowana i aby ją używać, musimy ją wywołać z metody compile.
Popatrzmy na przykład wspólny:
var app = angular.module('myApp', []);
app.directive('mojaDyrektywa', function() {
return {
restrict: 'E',
template: '<p>Lorem ipsum...<span></span></p>',
link: function(scope, elem, attr) {
elem.find('span').text('dodatkowy text');
}
};
});
Czy wpiszemy tam link czy compile, wynik będzie taki sam: Demo
Jednak jeśli chcemy użyć obu metod możemy je zadeklarować następujuąco:
Info: Metoda compile nie przyjmuje parametru scope, przy czym metoda link przyjmuje więc hierarhia parametrów będzie inna jeśli zmieniemy nazwe pola z link na compile - patrz niżej.
var app = angular.module('myApp', []);
app.directive('mojaDyrektywa', function() {
return {
restrict: 'E',
template: '<p>Lorem ipsum...<span></span></p>',
compile: function(elem, attr) {
elem.find('span').text('dodatkowy text');
return function(scope, elem, attr) {
elem.on('click', function() {
alert('Jestem klikalny!');
});
};
}
};
});
Ta część jest chyba najbardziej skomplikowana jak na pierwszy raz.
Konkluzja
Na tą chwilę mamy już jakieś pojęcie o konfigurowaniu naszej dyrektywy (chociaż to o wiele za mało). Więcej opcji opiszę w osobnym temacie, który będzie kontynuacją. Mam nadzieje że jest to czytelne a wszelkie błędy proszę zgłaszać albo w temacie (przede wszystkim pytania odnośnie tego co napisałem ), albo prywatnie. Dziękuje za uwagę. Zapraszam wkrótce na kolejną część!
Pozdrawiam!
Posted by
on 07 March 2013 - 11:28
Posted by
on 23 January 2014 - 19:15
Która wersja?
Aplikacje > Shoutbox > Settings > Global
Tam masz "Archive clock format" można tam ustawić 12 lub 24h o to Ci chodzi?
+ lub tak jak pisze zonic, zależy o co konkretnie Ci chodzi
Polecam Today Time Format ustawić na:
{--}, %H:%M
Posted by
on 11 December 2013 - 19:56
@up
Naprawdę wierzysz, że do testów?
Nulleda można pobrać tutaj: http://sh.st/oif6
Posted by
on 13 May 2016 - 21:39
Bo spotykam sie czasem z czymś takim że wchodzę na stronę i jest info w stylu że "strona jest offline, przeglądasz scachowaną wersję" To też jest ta sama usługa?
CDN to zewnętrzny dostawca treści, które u niego zamieścisz i będziesz korzystał z jego zasobów.
Pod tym kątem cloudflare oferuje trochę więcej niż utrzymanie .img (swoją drogą dopiero w płatnych planach)
Najważniejsze to pod pewnym kątem zabezpieczenie przed atakami DDoS, cache-owanie strony (o czym wspomniałeś) i dodatkowe serwery DNS, przyspieszające ładowanie w przypadku serwisów globalnych. Reszta to już dodatkowe usługi. Tylko przy 20$/mies to byle byznesmien popuka się w głowę, kiedy tyle z vatem płaci rocznie za hosting w PL 
Posted by
on 12 December 2015 - 14:01
Akurat źle trafiłeś z Gruntem bo on służy do automatyzacji pracy przy tworzeniu np. aplikacji a nie jest sam frameworkiem do ich tworzenia. Po prostu zamiast powtarzać jakieś czynności typu kopiowanie plików, łączenie lub minifikowanie skryptów itd automatyzujesz to sobie za pomocą Grunt.js. Odpalasz sobie potem takiego "taska" (czyli zadanie) z linii komend i on robi to za ciebie.
I po prostu chciałbym się dowiedzieć, jakie front-end'owcy tworzą apki i jakie frameworki JS są do tego najbardziej przyjazne
W sumie nie jest łatwo odpowiedzieć na takie pytanie. Możesz faktycznie podejść do tego hardcorowo jak sugeruje unbreak i machnąć taką apkę w node.js. Niby będzie to javascript ale to już nie front-end bo tam będziesz robił wszystko sam od A do Z. Może tobie bardziej chodzi o jakieś frameworki front-endowe za pomocą których robi się aplikacje? Tutaj też nie ma jednoznacznej odpowiedzi bo zależy co bedziesz robił. Jak będziesz robił np. one-page'ową appkę dla dajmy na to strony o filmach ze skomplikowanym systemem głosowania, ocen i wyświetlania statsów to możesz skorzystać z Angular.js czyli frameworka MVC, który pozwoli Ci rozbić mechanizmy działania takiej appki na właśnie model - czyli strukturę danych, view - czyli prezentację tych danych dla usera i controller - czyli warstwa łącząca oba powyższe, która w odpowiedzi na interakcję użytkownika z widokiem (view) zmienia strukturę danych(model) i na odwrót. Taka struktura aplikacji mniej więcej gwarantuje, że po miesiacu pisania jej i po kilku tysiącach linii kodu nadal wiesz co robisz Kolejny przykład, jak masz do zrobienia jedynie część interfejsu aplikacji w której musisz zaprezentować dane w jakiś atrakcyjny wizualnie sposób a same dane Cię nie interesują bo to już problem back-endu to np. wybierasz sobie jakiś Data Visualisation framework typu InfoVis i za jego pomocą prezentujesz te dane w postaci wypasionych migających słupków. Jeśli masz do zrobienia grę przeglądarkową to wybierasz sobie np. framework Phaser dzięki któremu zamiast pisać setek linii kodu aby stworzyć fizykę dla danego obiektu napiszesz tylko:
game.physics.startSystem(Phaser.Physics.ARCADE) game.physics.arcade.enable(player); game.physics.arcade.gravity.y = 200; sprite.body.bounce.y = 0.95;
i w efekcie twój obiekt zacznie spadać jakby pod wpływem grawitacji po czym zacznie się odbijać.
Oczywiście jeśli jesteś masochistą to wszystko to się da napisać w czystm js. Tylko po co. W ostateczności można napisać swój własny framework ale to zazwyczaj nie jest one-man job...mimo że w wielu wypadkach tak to się właśnie zaczyna.
EDIT: ja pierdziele jak zapisałem tego posta i zobaczyłem jego rozmiar to dopiero sobie pomyślałem: "Chłopie czy ty nie masz co robić w sobotnie popołudnie..? 
Posted by
on 20 April 2015 - 08:27
Od razu mówię, że musi to być wyjątkowo idiotoodporne tzn. od strony usera musi być bardzo proste do obsługi
Tym samym nawet customfields odpadnie.
Pozostaje własnoręczne stworzenie guzika do tinymce.
http://code.tutsplus...ttons--wp-30182
https://www.gavick.c...-custom-buttons
W drugim tutku masz dostępne pliki do pobrania; może przyspieszą robotę.
Posted by
on 06 April 2015 - 18:46
Generalnie powinneś troche uporządkowac kod.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>strona</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body oncontextmenu="return false" onselectstart="return false" onselect="return false" oncopy="return false" ondragstart="return false" ondrag="return false" onbeforeprint="document.body.style.visibility = 'hidden'; alert('Wydruk jest niedostępny!')" onafterprint="document.body.style.visibility = 'visible'">
<div id="wrappaer"></div>
<div class="body"></div>
<div class="top"></div>
<div class="flag1"></div>
<div class="flag2"></div>
<div class="flag3"></div>
<div class="butt"></div>
<div class="line"></div>
<footer></footer>
</body>
</html>
Następnie sugerowałbym dodać elementy flag oraz button do jakiegoś diva w którym będą się znajdować, zamiast dodawać to jeden pod drugim. Przykładowo:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>strona</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body oncontextmenu="return false" onselectstart="return false" onselect="return false" oncopy="return false" ondragstart="return false" ondrag="return false" onbeforeprint="document.body.style.visibility = 'hidden'; alert('Wydruk jest niedostępny!')" onafterprint="document.body.style.visibility = 'visible'">
<div id="wrappaer"></div>
<div class="body"></div>
<div class="top">
<div class="flag1"></div>
<div class="flag2"></div>
<div class="flag3"></div>
<div class="butt"></div>
</div>
<div class="line"></div>
<footer></footer>
</body>
</html>
I z tego poziomu nadać dla klasy top pozycję relatywną, a dla jego elementów pozycję absolutną i je pozycjonować. Wtedy zawsze będą miały ograniczenie jakim jest szerokość elementu o klasie top.
.top{
width: 804px;
height:143px;
margin-left: auto;
margin-right: auto;
background-image: url(../images/1.png);
position: relative;
}
.top .flag1 {
width: 24px;
height: 24px;
position: abosulte;
right: 0;
top: 0;
background-image: url(../images/4.png);
}
.top .flag2 {
width: 24px;
height: 24px;
float: left;
absolute;
right: 24px;
top: 0;
background-image: url(../images/5.png);
}
.top .flag3 {
width: 24px;
height: 24px;
position: absolute;
right: 48px;
top: 0;
background-image: url(../images/6.png);
}
.top .butt {
width: 95px;
height: 26px;
position: absolute;
right: 72px;
top: 0;
background-image: url(../images/7.png);
}
Pozycjonuj wedle uznania za pomocą top i right
Projekt zonic Kodowanie MediaInfini
Community Forum Software by IP.Board 3.4.6
Licensed to: Web-talk.pl