Pokazywanie postów oznaczonych etykietą narzędzia. Pokaż wszystkie posty
Pokazywanie postów oznaczonych etykietą narzędzia. Pokaż wszystkie posty

Place it

Umieść swoje screeny w realistycznych warunkach w ciągu kilku sekund.


Link: https://placeit.net

Fontello

Czcionki jak ikony.


Link: http://fontello.com/

JotForm

JotForm to darmowy generator formularzy online. W wersji darmowej istnieje ograniczenie do 100 formularzy miesięcznie. Brak reklam w gotowym formularzu.


Link: http://www.jotform.com/

Prefixr

Poprawney kod CSS we wszystkich przeglądarkach w przeciągu kilku sekund!


Link: http://prefixr.com/

Can i use ..

Tabele zgodności wsparcia HTML5, CSS3, SVG na podstawie przeglądarek desktopowych i mobilnych.


Link: http://caniuse.com/

Lorem pixel

Po wybraniu rozdzielczości (i ew. kategorii) obrazka, otrzymujemy jeden adres url przedstawiający obrazek spełniający nasze kryteria. Co ciekawe, link jest jeden, natomiast z każdym odświeżeniem otrzymujemy inny obrazek.

Dopisując na końcu adresu /jakiś_tekst/, uzyskamy znak wodny w lewej części obrazka.


Link: http://lorempixel.com/

Responsive Design Bookmarklet

Poręczne narzędzie do testowania wyglądu stron przy różnych rozdzielczościach.

Aby z niego skorzystać, należy dodać button do zakładek a następnie uruchomić go na testowanej witrynie internetowej.


Link: http://responsive.victorcoulon.fr/

Drugie alternatywne narzędzie - http://www.responsinator.com/

JPEGmini

Zmniejszenie rozmiaru pliku zdjęć nawet do 5x, przy zachowaniu ich oryginalnej jakości i formatu JPEG.


Link: http://www.jpegmini.com/

Color Hailpixel

Prosty sposób eksperymentowania z kolorami.


Link: http://color.hailpixel.com/

Animate.css

Zbiór animacji CSS działających w różnych przeglądarkach do wykorzystania w swoich projektach.


Link: http://daneden.github.io/animate.css/

Narzędzia dla designerów

W zeszłym roku zainteresowałam się Syntax Highlighter'em, którego zadaniem jest przedstawiać na stronach internetowych kod (html, css, js, c, itd.) w sposób czytelny. Na Google Code możemy znaleźć alternatywę, która jest o tyle wygodniejsza, że nie trzeba za każdym razem zaznaczać jaki język wyświetlamy - wykonuje się to automatycznie.

Sekcja HEAD

Przed zamknięciem znacznika </head> linkujemy do odpowiedniego skryptu, wstawiając:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

Jeżeli chcemy skorzystać z szablonu innego niż domyślny (galeria szablonów), wówczas wpisujemy odpowiednią nazwę (w przykładzie - Sunburst):

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=sunburst"></script>

I to tyle! Właściwie ta jedna linijka załatwia nam całą sprawę.

HTML

Teraz wystarczy nasz kod, który chcemy przedstawić na stronie, umieścić między znacznikami <pre></pre>, <code></code> lub <xmp></xmp>, pamiętając o dodaniu klasy class="prettyprint"

a skrypt wykona resztę pracy za nas. <pre class="prettyprint"> Tutaj wstawiamy nasz kod HTML, CSS, lub inny Wiele linii kodu </pre>

Jeśli w powyższym przykładzie brakuje Wam numeracji każdej linii, wystarczy dodać jedną klasę.

CSS

<style> .prettyprint ol.linenums > li { list-style-type: decimal; } </style>

HTML

<pre class="prettyprint linenums">Tutaj wstawiamy nasz kod HTML, CSS, lub inny Wiele linii kodu </pre>

Koniec :)

Linki: Galeria styli, Getting started (eng.)
Download: code.google.com

Google Code: Prettify

Kiedy mamy dopiero co postawiony, czysty system operacyjny, warto skorzystać z Ninite. Na stronie znajduje się instalator z kilkudziesięcioma podstawowymi aplikacjami (do ściągnięcia w jednej paczce) w tym: przeglądarki, komunikatory, odtwarzacze (muzyka, filmy, kodeki), edytory graficzne i tekstowe, oraz inne. Wybieramy co chcemy zainstalować i instaluje nam się samo. Masa czasu zaoszczędzonego i wszystko działa jak powinno. Aż dziw, że nikt wcześniej na to nie wpadł :)
Link: http://ninite.com/

Ninite - Install/Update, must-have po formacie