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 #3 – WP-Flex, BrandColors, Derby MVC, trunk8, DbNinja

Roundup #3 - WP-Flex, BrandColors, Derby MVC, trunk8, DbNinja

WP-Flex

W ostatnim czasie pojawia się sporo tego typu szablonów do WordPressa. Mam tutaj na myśli możliwość dopasowywania się do aktualnego rozmiaru okna przeglądarki, poprzez wykorzystanie techniki “responsive design”. Jest to naprawdę bardzo przyjemna droga do prezentacji treści we właściwy sposób na urządzeniach mobilnych oraz desktopach.

WP-Flex – A blank and responsive boilerplate for WordPress


BrandColors

Jest to tak naprawdę katalog, który w swojej pracy docenią szczególnie osoby, które projektują grafikę. Kolekcja zawiera bowiem dokładne dane odnośnie kolorystyki używanej przez wiodące marki i serwisy na rynku.

BrandColors – A Gallery Of Major Brand Color Codes To Get Inspired


Derby MVC

Nie mylić z bazą danych o takiej samej nazwie! Derby MVC to lekki framework oparty o wzorzec MVC i Node.js, który pozwala na budowanie aplikacji działających w czasie rzeczywistym. Interakcja pomiędzy użytkownikami przebiega natychmiastowo, więc możliwe jest tworzenie na przykład narzędzi do pracy nad projektami bezpośrednio w przeglądarce. Myślę też, że tego typu frameworki to przyszłość jeśli chodzi o aplikacje w przeglądarce. Wszystko za sprawą mechanizmów push, które są w stanie wysyłać informacje od serwera do klienta i dynamiczne odświeżanie widoku.

Build Realtime & Collaborative Apps with Derby MVC


trunk8

Jest to rozszerzenie do biblioteki jQuery, a które pozwala – jak sama nazwa wskazuje – na manipulację długością wyświetlanego tekstu. Proste i wygodne w obsłudze narzędzie, które pozwoli zaoszczędzić nieco czasu podczas tworzenia podobnej funkcjonalności na naszej stronie.

trunk8 – A text truncation extension to jQuery


DbNinja

Jest to odpowiednik znanego pewnie wszystkim phpMyAdmin. DbNinja napisane zostało przy użyciu PHP i służy do administracji bazą danych MySQL bezpośrednio z okna przeglądarki. Całość prezentuje się bardzo dobrze i wygląda nieco na odświeżoną wersję wspomnianego phpMyAdmin. Przypomina trochę aplikację na PC, niżeli klienta webowego. Sam używam desktopowego narzędzia jakim jest HeidiSQL – polecam! Naprawdę bardzo ułatwia i przyspiesza pracę.

DbNinja – Web-Based MySQL Manager App With A Desktop-Like Interface


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

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]

Roundup #1 – Node 0.8.6, Axon, NextFlow, Autobahn, jQuerin Grid Builder, Best Ampersand, jQuery Zoom, Mousetrap, JustGage

Roundup - mrzepinski.pl - Programin is funJako, że różnego rodzaju narzędzi, pluginów, wtyczek itp. pojawia się w Internecie każdego dnia całe mnóstwo – postanowiłem więc, że będę je zbierał i publikował co jakiś czas w jednym wpisie, oznaczonym kategorią Roundup.


Node.js - JavaScript platform

Node 0.8.6

Wydane zostało kolejne stabilne wydanie platformy JavaScript, jaką jest Node.js. Framework zbudowany na bazie silnika V8, na którym działa także Chrome, oznaczony został numerem 0.8.6.


Axon

Biblioteka dla Node.js, pozwalająca wysyłać i odbierać  wiadomości.


NextFlow

Kolejna biblioteka dla Node.js, która pozwala sterować przepływem danych w aplikacji. Skierowana głównie do deweloperów CoffeScript.


AutobahnJS

AutobahnJS

Bibioteka JavaScript implementująca The WebSocket Application Messaging Protocol (WAMP).

AutobahnJS relies on Promises for asynchronous programming. A promise is an object that represents the eventual value returned from the completion of an operation.


jQuerin Grid Builder

Jak sam nazwa wskazuje – jest to biblioteka jQuery, która pozwala na interaktywne budowanie wyglądu strony w oparciu o tzw grid design. Po skończonej pracy możemy sobie wygenerować kod HTML + CSS i kontynuować pracę nad praktycznie gotowym layoutem.


Best Ampersand

Best Ampersand is a simple jQuery plugin that adds ampersand classes for better ampersand fonts. Inspired by Dan Cederholm.


http://mrzepinski.pl/wp-content/uploads/2012/08/jquery-zoom.jpg

jQuery Zoom

Biblioteka jQuery pozwalająca na powiększanie obrazków na stronie. Wykorzystuje ona zdarzenia mouseover lub mousedown.


Mousetrap – Keyboard shortcuts in Javascript

Mousetrap

Prosta biblioteka JavaScript, która pozwala na przechwytywanie skrótów klawiszowych w przeglądarce i przypisywanie im konkretnych akcji do wykonania.


Animated SVG Gauges With JS: JustGage

JustGage

Biblioteka JavaScript, wykorzystująca SVG do budowania animowanych czujników, mierników itp. na swojej stronie.


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