Roundup #7 – PDF Sketch Sheets, Prism, CSS3Ps, Unfolding 3D Thumbinals, Deployd, blackCalculator

Roundup #7 - PDF Sketch Sheets, Prism, CSS3Ps, Unfolding 3D Thumbinals, blackCalculator

PDF Sketch Sheets

Quickly design awesome website wireframes and mockups on our Sneakpeekit Browser©. We provide a large sketch sheets collection with many different canvasses, grids and PSD grid templates. Any sketch sheet is a ready-to-print A4 PDF template. We have included PSD Photoshop grid templates too for quickly converting your sketch in a graphic mockup.

PDF Sketch Sheets For Creating Wireframes


Prism

Prism is a new lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.

Prism – A lightweight, extensible syntax highlighter


CSS3Ps

CSS3Ps – free cloud based Photoshop plugin that converts your layers to CSS3.

Convert Your Photoshop Layers into CSS3 Styles


Unfolding 3D Thumbinals

A 3D thumbnail view concept for image slideshows: the current image gets opened up and a thumbnail view unfolds in 3d.

UNFOLDING 3D THUMBNAILS CONCEPT


Deployd

Deployd is a platform that makes building complex backends simple. Build APIs for web and mobile apps in minutes instead of days. Unlike working with a traditional backend, there’s no boilerplate, or configuration. Deployd works right out of the box. The best part is that you can run it however and wherever you want – it’s free and open source.

Build APIs for web and mobile apps in minutes instead of days


blackCalculator

blackCalculator is a jQuery plugin for create a calculator. It supports CSS customization, easy translation, two options of calculators, cross-browser, allow and disallow keyboard!

blackCalculator – A customizable jQuery calculator


[1], [2], [3], [4], [5]

Roundup #6 – Screenqueri, JZoopraxiscope, Meny, BigVideo, Really Simple Slideshow, jQuery Picture, Infinity, lorem, oriDomi

Roundup #6 - Screenqueri, JZoopraxiscope, Meny, BigVideo, Really Simple Slideshow, jQuery Picture, Infinity, lorem, oriDomi

Screenqueri

Screenqueri.es is a Pixel Perfect Tool to test your Responsive Design / Media Queries. Select from Pre-defined Screen Resolutions OR Drag Screen Handles To Go With Your Custom Screen Resolutions.

Screenqueri.es – A responsive design testing tool


JZoopraxiscope

JZoopraxiscope is a jQuery plugin for making animations from static images inspired in Eadweard Muybridge’s Zoopraxiscope.

JZoopraxiscope – A jQuery plugin for making animations from static images


Meny

A three dimensional and space efficient menu concept created with JavaScript and CSS3.

Meny – A CSS 3D fold-in menu concept


BigVideo

BigVideo.js – The jQuery Plugin for Big Background Video.

Showing Big Background Video with BigVideo.js


Really Simple Slideshow

Really Simple Slideshow is a jQuery plugin for creating image slideshows. Images are loaded dynamically as each one is required, allowing for larger slideshows without having to pre-load lots of images.

Really Simple Slideshow: A Flexible Slider Plugin


jQuery Picture

jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers. Lets hope that happens soon but in the meantime this plugin will be kept up to date with latest developments.

jQuery Picture – A Plugin For Responsive Images


Infinity

Infinity is a UITableView for the web: it speeds up scrolling through long lists and keeps your infinite feeds smooth and stable for your users. It is small, battle-tested, and highly performant. The code is hosted on Github, and distributed under the BSD License. The annotated source is available, as are demos both with Infinity turned off and on.

Infinity.js


lorem

Text generator that works with Node and browsers, and it includes optional jQuery plugin support.


oriDomi

Small script with optional jQuery support that creates an effect on images and web fonts that looks like folding paper, by using CSS 3D transforms.


[1], [2], [3], [4]

Roundup #5 – Responsive Google Map, Speakke, 3D jQuery Image Slider, Wordsmith, Peerbind, MobileCartly

Roundup #5 - Responsive Google Map, Speakke, 3D jQuery Image Slider

Responsive Google Map

Responsywne mapy od Google, przygotowane dla ekranu Retina w najnowszym iPadzie 3, to tutorial od serwisu Webdesigntuts+. Wykorzystując możliwości HTML5 i CSS3 jesteśmy w stanie stworzyć świetnie wyglądające mapy i zaprezentować je na naszej stronie. Niezwykle przydatna rzecz dla stron mobilnych, budowanych w oparciu o responsive design. Dodatkowo – dzięki meta tagom w nagłówku naszego dokumentu HTML5 dostajemy także wsparcie dla ekranów Retina.

Responsive, Retinafied Google Maps Images


Speakke

To naprawdę świetnie wyglądający player audio. Po raz kolejny wykorzystano tutaj możliwości HTML5, a pewnie będzie tak tylko częściej, w związku, że od wczoraj Flash nie jest już wspierany na platformie Android (Huraa!). Trochę CSS, kilka linii JavaScript i trochę własnych ustawień i możemy osadzić na swojej stronie pełnoprawny odtwarzacz plików audio. Poza tym – wsparcie dla wielu przeglądarek, możliwość tworzenia playlist oraz integracji z  Last.fm. Chcecie czegoś więcej?

Speakker: A Crossbrowser Audio Solution with HTML5


3D jQuery Image Slider

No i mamy kolejny ciekawy tutorial od serwisu Codrops. Tym razem jest to trzyczęściowy panel 3D, na którym prezentować możemy nasze obrazki, a zarazem osadzić możliwość ich przewijania. Całość prezentuje się bardzo efektownie. Zresztą – nie spotkałem jeszcze się na tym serwisie ze słabej jakości treścią. Myślę, że takie rozwiązanie przyda się grafikom oraz ludziom chcącym urozmaicić jakoś swoje portfolio, a może nawet i CV. Skorzystalibyście z takiego rozwiązania?

TRIPLE PANEL IMAGE SLIDER


Wordsmith

Biblioteka jQuery, która pozwala tagować słowa na naszej stronie i pobierać ich definicje z zewnętrznego serwera. Całość prosta i intuicyjna w obsłudze. Demo rozwiązania zaprezentował sam autor na swojej stronie.


Peerbind

To kolejny projekt wykorzystujący bibliotekę jQuery. Pozwala na przypisywanie zdarzeń konkretnym elementom lub strukturom na naszej stronie. Obsługuje zdarzenia już wbudowane, ale pozwala tworzyć także własne oraz definiować sposób ich działania. Demonstrację działania oraz dokumentację znaleźć można na stronie oficjalnej.

Peerbind: Share Events with All Visitors on Same Page


MobileCartly

Jest to projekt e-Commerce mający umożliwić sprzedaż naszych produktów na urządzeniach mobilnych, na platformach takich jak iPhone, Android, Blackberry, czy Windows Mobile. Jako źródło danych przyjmuje dokumenty CSV, więc dane możemy budować przy pomocy zwykłego Open Office, czy Google Docs.

Open Source Mobile E-Commerce App: MobileCartly


[1], [2], [3], [4]

Roundup #4 – Metro UI CSS, Smart Time Ago, Royal Slider, BBSearch, MDMagick, Bootswatch, Document-Bootstrap, DownloadBuilder, Strapdown, FileDrop

Roundup #4 - Metro UI CSS, Smart Time Ago, Royal Slider, BBSearch, MDMagick, Document-Bootstrap, DownloadBuilder, Strapdown

Nazbierało się trochę tego przez ostatnie dwa dni. Staram się i tak wybierać tylko niektóre i co ciekawsze projekty, bo nie byłbym w stanie opisać tutaj wszystkiego. Zapraszam do lektury kolejnego Roundup.

Metro UI CSS

Framework Metro UI CSS, który stworzony został przez jednego z twórców interfejsu Metro dla nadchodzącego Windows 8. Jest to zbiór klas CSS i elementów UI, które pozwalają zbudować genialnie wyglądający interfejs w oparciu o Metro. Posiada wsparcie dla przeglądarek: IE 9+, Chrome, Opera, Safari oraz Firefox.

Metro UI CSS – A set of styles to create a site similar to the Windows 8 Metro UI


Smart Time Ago

Dodatek do jQuery, który wykorzystując znacznik <time> z  HTML5 i funkcję JavaScript do pokazania nam ilości minionego czasu od danej daty i godziny.

 <time class="timeago" datetime="2012-07-18T07:51:50Z">about 8 hours ago</time>

Smart Time Ago – A jQuery Plugin For Relative Timestamps


Royal Slider

Jedno z wielu narzędzi do pokazu slajdów. Zbudowane w oparciu o CSS3, HTML5 oraz samą bibliotekę jQuery. Potrafi obsłużyć praktycznie każdy element na stronie – od zwykłych obrazków, po treść w formie HTML i filmiki wideo. Oprócz tego, że Royal Slider jest bardzo rozbudowany i posiada bardzo dużo ciekawych opcji, to na dodatek prezentuje się bardzo efektownie. Poza tym – wykorzystuje technikę responsive, a więc Royal Slider może być użyty do budowy wersji mobilnych stron.

Royal Slider – A Powerful, Professional And Responsive jQuery Slider


BBSearch

Narzędzie zbudowane w oparciu o JavaScript. Powoduje zamianę elementu <input> na interaktywne pole do automatycznego wyszukiwania oraz zwracania wyników na bazie Backbone.

Współpracuje także z JSONP API, takimi jak Github, czy Twitter. Przykładowe wykorzystanie można zobaczyć na stronie autora.

$('#search-input-1').bbsearch({
  url: 'https://api.github.com/legacy/repos/search/#bbsearch-query#?callback=?&'
, itemTemplate: '<p>[@<%= owner %>] <a href="<%= url %>"><%= name %></a></p>'
, resultsElement: $('#results-1')
, parse: function(response) { return response.data.repositories; }
});

MDMagick

Bardzo proste i łatwe w integracji narzędzie, zbudowane przez tego samego autora, który stworzył wyżej wspomiane BBSearch. Pozwala na przekształcenie elementów takich jak <input>, czy <textarea> w interaktywny edytor WYSIWYG treści HTML w oparciu o Markdown, który znamy chociażby z Github’a.

$('.css-selector').mdmagick();

Autor na swojej stronie prezentuje przykładowe wykorzystanie MDMagick i muszę stwierdzić, że prezentuje się ono bardzo ciekawie.


Bootswatch

Katalog darmowych szablonów do Twitter Bootstrap. Możemy dzięki temu zaoszczędzić sporo czasu na tworzenie własnego wyglądu i skorzystać z już gotowej paczki. Całość prezentuje się naprawdę dobrze.


Document-Bootstrap

Kolejny ciekawy projekt, który wykorzystując JavaScript, bibliotekę jQuery i ponownie Twitter Bootstrap daje nam tak zwany Boilerplate do tworzenia prostych i przyjemnych dla oka stron, gdzie opisywać możemy swoje projekty. Jest to skierowane głównie do deweloperów, takich jak autorzy tych wszystkich projektów, które tutaj prezentuję. Pozwala im to zaoszczędzić sporo czasu na tworzeniu takich dokumentów od nowa. Jest to też alternatwa dla Github Pages.


DownloadBuilder

Projekt wykorzystujący HTML 5 File System API do łączenia wielu plików w jeden. Mam tutaj na myśli łączenie wielu plików CSS czy JavaScript. Wpiera także łączenie plików hostowanych bezpośrednio na Github’ie. Zapytania Ajax/JSONP trzymane są w cache przy użyciu sessionStorage.


Strapdown

Strapdown.js – Creating elegant Markdown documents couldn’t be simpler

To kolejny projekt wykorzystujący Markdown do budowania prostych stron do opisu projektów. Jest to bardzo podobne narzędzie do Document-Bootstrap i na dodatek wykorzystujące Bootswatch, które także wspomniane zostało wyżej.


FileDrop

Cross-Browser Drag ‘n’ Drop File Uploader: FileDrop

Bardzo “lekka” biblioteka JavaScript do tak zwanego Drag ‘n’ Drop jeśli chodzi o uploader plików w przeglądarce. Jak sam autor przyznaje – nie wymaga wsparcia żadnych frameworków JavaScript. Wspiera za to szereg przeglądarek: Firefox 3.6, Internet Explorer 6, Google Chrome 7, SRWare Iron 4, Apple Safari 5 and Opera 11.61.


[1], [2], [3]

Roundup #2 – Circle Hover, AuthManager, HTML5 File Upload, CSSComb, HubSearch, canvas-charts, Motown

Roundup #2Circle Hover

Serwis Codrops jak zawsze dostarcza nam ciekawych artykułów. Tym razem jest to tutorial o tym, jak stworzyć ciekawe efekty :hover w formie kółek z wykorzystaniem animacji CSS oraz przejść 3D w CSS3.


AuthManager - Open Source User Authentication & Management

AuthManager

Jest to bilbioteka Open Source dla PHP. W oparciu o bazę MySQL pozwala ona na autentykację oraz zarządzanie użytkownikami, wykorzystując przy tym możliwości jakie daje nam integracja z serwisami społecznościowymi, takimi jak Facebook. Jest to narzędzie bardzo podobne do innej biblioteki dla PHP, jaką jest HybridAuth.

  • Protect your content with just few lines of code.
  • Login via Facebook Connect.
  • Spam protection using reCAPTCHA.
  • Google Analytics integration.
  • User access logs.
  • Email Templates.
  • Translation ready. Can be translated in any language.

Create a HTML5 Drag & Drop File Uploader with jQuery

HTML5 File Upload

Kolejny tutorial. Serwis InsertHTML opublikował poradnik, który pokazuje nam jak za pomocą HTML5, jQuery i kilku linijek w PHP możemy zbudować upload plików wykorzystujący technikę Drag & Drop oraz Local Storage z HTML5.


Greatest tool for sorting CSS properties in specific order

CSSComb

Jestem pewien, że każda osoba, która związana jest z pisaniem styli w CSS doceni to narzędzie. W Internecie jest wiele podobnych, darmowych serwisów, które są w stanie uporządkować nieco nasz arkusz styli. Żaden jednak nie potrafi zrobić tego w określonym porządku i wedle określonych zasad, które sami jesteśmy stanie stworzyć. To podejście stara się zmienić serwis CSSComb, który pozwala na sortowanie i robienie porządku w naszym ‘styles.css’ wedle określonej kolejności, którą definiujemy w prosty sposób przed samym użyciem narzędzia.


HubSearch is a GitHub search interface built with Bootstrap, Underscore, jQuery

HubSearch

Jest to niezależny interfejs dla GitHuba zbudowany przy użyciu między innymi Backbone, Underscore i jQuery. Pozwala na przeszukiwanie repozytoriów pod kątem konkretnego języka i słów kluczowych.


canvas-charts

Biblioteka JavaScript, która – wykorzystując HTML5 Canvas API – pozwala na budowanie wykresów. Typy tworzonych grafów to nic innego jak dodatkowe pluginy, które możemy dołączyć do interfejsu renderowania w naszym kodzie.


Motown

Kolejna biblioteka, dająca tym razem możliwość tworzenia interfejsów opartych o Metro, które pojawi się nam jesienią razem z najnowszym Windows 8. Całość zbudowana została przy użyciu  HTML, CSS i JavaScript.


[1], [2], [3], [4], [5]

Jak to zbudowałem, czyli blog od podstaw

WordPress, Reverie, motyw, wtyczkaNo i tak. Tym razem także skorzystałem z najbardziej popularnego narzędzia do tworzenia blogów. Nie jest to mój pierwszy raz z WordPress’em, a w zasadzie jest to CMS, którego używam odkąd pamiętam. Posiada wszystko czego potrzebuję i daje się łatwo skonfigurować. Jest łatwo rozszerzalny o masę różnego rodzaju wtyczek. Posiada ogromną społeczność, która pracuje nad tym, by właśnie WordPress był jeszcze lepszy.

Szablon

To co możecie zobaczyć tutaj gołym okiem, a mam na myśli większość wyglądu bloga, to nic innego jak gotowy framework, którego użyłem, by nie robić tego samemu od nowa. Ponieważ po co tworzyć coś zupełnie od zera, jeśli ktoś daje nam to w prezencie. Prawda? :)

Motyw, który wykorzystałem to Reverie. Jest to nowoczesny, a zarazem bardzo “lekki” szablon, który wykorzystuje możliwości HTML5, CSS3 oraz technikę “responsive design”. Jego możliwości dopasowywania się do konkretnej rozdzielczości urządzenia, na którym wyświetlany jest blog, możecie zobaczyć poprzez zmianę wielkości okna przeglądarki. Framework jest także bardzo prosty i na tyle dobrze napisany, że zmiany wyglądu, a co za tym idzie – kodu – nie stanowią żadnego problemu. Nawet favicona pasuje do pierwszej litery mojego nazwiska :)

Wtyczki

A więc po kolei.

  • About Me 3000 Jest to widget, który prezentuje moją sylwetkę z prawej strony. Proste, a znacznie przyspiesza formatowanie.
  • Akismet – Jest to wtyczka, która pozwala zachować porządek w komentarzach i nie dopuszczać do pojawiania się tam spamu oraz niechcianych treści.
  • All in One SEO Pack – Bardzo rozbudowana wtyczka, a tak naprawdę “kombajn” pozwalający wspomagać pozycjonowanie bloga.
  • Contextual Related Posts – Wtyczka, która pozwala na “wyciągnięcie” – na podstawie analizy treści, tagów, kategorii – podobnych wpisów do czytanego oraz wyświetlenie ich w liście pod treścią posta.
  • Disqus Comment SystemJeżeli ktoś czyta inne blogi to Disqus’a nie trzeba takim osobom przedstawiać. Jest to system komentarzy pozwalający na dużo więcej niż standardowy formularz WordPress’a.
  • Excerpt Editor Prosty edytor treści, która pojawi się na stronie głównej zamiast całości kontentu posta.
  • Google Analytics for WordPress – Pozwala na podpięcie konta Google Analytics, z którego możemy wybrać kod śledzący dla naszej strony. Dołącza także automatycznie niezbędny kod do źródła bloga.
  • Google XML Sitemaps – Generator map strony w formacie XML. Taka wygenerowana mapa wspiera działanie botów indeksujących.
  • Image Zoom – Jak sama nazwa skazuje – jest to plugin pozwalający na dołączenie modalnego box’a, który wyświetla się po kliknięciu w obrazek, zamiast przenosić do adresu obrazka.
  • Jetpack by WordPress.com – Zbiór dodatkowych narzędzi, które pozwalają wspomóc nieco działanie WordPress’a oraz wykorzystać wtyczki zbudowane na jednym kodzie.
  • Newsletter – System do obsługi newslettera. Jest to ten sam widget z prawej strony, który pozwala Wam się zapisać do subskrypcji nowych postów. Polecam :)
  • Open Graph –  Plugin pozwalający automatycznie dodawać meta tagi powiązane z protokołem Facebook’a. Bardzo przydatne narzędzie dla osób, które promują swoje wpisy właśnie w tym serwisie.
  • Primary Feedburner – Wtyczka pozwalająca zintegrować system Feed RSS z serwisem firmy Google – Feedburner.
  • SEO Smart Links + – Narzędzie to samo przeszukuje treści wpisów w poszukiwaniu słów, które można by zamienić na odnośnik do kategorii, tagów oraz innych zdefiniowanych elementów, które powiązane mogą być z innymi treściami na blogu.
  • Simple Social Buttons – Są to po prostu przyciski serwisów społecznościowych (Facebook Like, Twitter Share, Google+ Button) i pozwalające na dzielenie się treścią wpisów z innymi. Dostępne pod każdym tytułem wpisu.
  • Smart Youtube PRO – Wtyczka pozwalająca w banalny sposób na dodawanie filmów z serwisu YouTube do naszych wpisów. Wystarczy zamienić we wklejanym do wpisu adresie do filmiku początek: http na httpv.
  • SyntaxHighlighter Evolved – Wtyczka, która pozwala kolorować składnię języków programowania w wyświetlanych wpisach. Jako, że pisałem, że będzie się tutaj pojawiać czasami nieco kodu, jest to dla mnie niezbędne narzędzie.
  • SyntaxHighlighter TinyMCE Button – Obsługa wspomnianej wyżej wtyczki w domyślnym edytorze wpisów dla WordPress’a – TinyMCE.
  • upPrev – Pozwala na wyświetlenie poprzedniego wpisu w prawym, dolnym rogu okna przeglądarki. Box pojawia się, gdy tylko przeskrolujemy stronę mniej więcej do połowy.
  • W3 Total Cache – Wtyczka do obsługi mechanizmu cache w przeglądarce. Jako, że korzystam z hostingu współdzielonego, a nie z serwera dedykowanego, gdzie sam mógłbym doinstalować sobie wszelkie potrzebne narzędzia – rola wtyczki jest nieco ograniczona, ale mimo to pozwala ona nieco przyspieszyć ładowanie się strony.
  • Wordpress Comment Bubble Plugin – Wizualna prezentacja liczby komentarzy na stronie głównej bloga.
  • WP-PageNavi – Wtyczka pozwalająca na zamianę domyślnego systemu paginacji na dużo ładniejszy i bardziej przystępny dla użytkownika. Jej działanie będziecie mogli zobaczyć jak tylko pojawi się tutaj nieco więcej wpisów.
  • WP Smush.it – Biblioteka do skalowania obrazków dodawanych na bloga. Pozwala znacznie zmniejszyć objętość, zachowując przy tym jakość prezentowanych obrazków.

Zdjęcia

Jako źródło wszelakich zdjęć, obrazków służy mi serwis PhotoPin. Posiada on prosty interfejs, a hasło głosi: free photos for bloggers. Czego chcieć więcej..

Podsumowanie

Nazbierało się tego trochę, a dochodzą do tego jeszcze tak zwane “własne pola”, których obsługę zdefiniowałem w kodzie motywu. Jeżeli uważacie, że czegoś mi tu jeszcze brakuje, coś wymaga poprawy albo powinienem coś zmienić, dajcie znać w komentarzach. Dzięki :)