Archiwa kategorii: Narzędzia

MockFlow – aplikacja online do tworzenia interfejsów

mockflow

MockFlow jest aplikacją webową do tworzenia interfejsów stron internetowych oraz mapy sieci.  Pozwala na przyspieszenie procesu planowania, szybsze projektowanie i udział innych w budowaniu interfejsu użytkownika.  Interfejsy można budować również na urządzenia mobilne. Aplikacja wyposażona jest w dziesiątki komponentów i setki ikon. Działa online przez przeglądarkę, ale można również zainstalować wersje desktopową. Dostęp do wersji online jak i desktopowej odbywa się przez zalogowanie do konta, które na początku trzeba założyć. Nie trzeba zaczynać projektu od zera, aplikacja udostępnią gotowe szablony zrobione przez innych użytkowników. Niestety aplikacja jest płatna i w darmowej wersji pozwala na utworzenie tylko jednego projektu.

mockflow

Link: http://www.mockflow.com/

jQuery-Notes – dodawanie notatek w jQuery i PHP5

jquery-notes

Skrypt do dodawania notatek do zdjęć. Notatki dodaje się przez umieszczenie ramki na zdjęcie. Ramkę możemy powiększać , aby lepiej zaznaczyć obszar który zamierzamy komentować. Następnie możemy wpisać tytuł notatki, treść i link. Ostatnim krokiem jest zapisanie notatki lub anulowanie. Skrypt jest napisany w php5 i jQuery, umożliwia w kodzie, modyfikacja  wielu ustawień. Skrypt nie wymaga bazy danych, notatki są zapisywane na dysku w formacie JSON.

jquery-notes

Wymagania: jQuery, PHP5
Demo: http://jquery-notes.rydygel.de/samples.php
Licencja: CC

SVG Edit – edytor grafiki SVG w przeglądarce

svg-edit

SVG (Scalable Vector Graphics)  jest  formatem zapisu dwuwymiarowej grafiki wektorowej. Powstał on z myślą o zastosowaniu go na stronach WWW. Dzięki SVG możemy zapisywać grafikę w formie kodu podobnego do XML. Jednak pisać grafikę kodem jest trudno. łatwiej jest ją narysować. Z pomocą przychodzi nam  SVG Edit. To aplikacja online dostępna przez przeglądarkę. Działa prawie tak samo jak program Paint w Windowsach, z tą różnicą że w SVG Edit jest łatwiejszy w obsłudze :)

svg-edit

Strona Projektu: http://code.google.com/p/svg-edit/
Link: http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html

Jak zrobić gradient w IE – dwa generatory

css3-Generator-2

Gradient zawsze sprawia kłopoty w przeglądarce Internet Explorer. IE nie obsługuje go z wykorzystaniem stylów CSS. Aby uzyskać gradient w IE możemy to zrobić na dwa sposoby. Pierwszy trudniejszy, polega na użyciu filtrów dostępnych tylko w IE. Drugi łatwiejszy sposób to użyć wcześniej przygotowanego tła. Bez względu na to jakiego sposobu użyjemy, możemy skorzystać z dwóch generatorów, które pomagają nam wygenerować gradient dla IE, właśnie z wykorzystaniem tych metod, omawianych wyżej.

css3-Generator

css3-Generator-2

Ultimate CSS Gradient Generator (filtry IE)
Link: http://www.colorzilla.com/gradient-editor/

CSS gradient generator
Link: http://www.display-inline.fr/projects/css-gradient/

CSS3 menu – Darmowa aplikacja do generowania menu w CSS3

css3menu

Bardzo ciekawa aplikacja, dzięki której będziemy mogli wygenerować memu na naszą stronę. Program daje możliwość dowolnego zagnieżdżania pozycji w menu. Do wyboru mamy kilkanaście rodzai szablonów w stylu MAC i Android. W każdym szablonie możemy zmieniać kolory, wielkość i rodzaj czcionek, zaokrąglenia rogów. Każde z menu widać dobrze na wszystkich przeglądarkach. Na koniec warto wspomnieć, że kod memu nie zawiera kodu JavaScript., wszystko działa w oparciu o kod CSS3 i zdjęcia tła.  Program dostępny jest na systemach operacyjnych Windows i MAC za darmo.

css3menu

Wymagania: Windows lub MAC
Link: http://www.css3menu.com

CSS3make – Proste generowanie stylów CSS3

css3maker

Bardzo ciekawa i zgrabnie zaprojektowana aplikacja do generowania kodu CSS3. Zaletą aplikacji jest to, że nie trzeba pisać kodu CSS. Wybieramy jedynie odpowiednie opcje, przesuwamy suwaki, i od razu widzimy żądany efekt. Aplikacja podzielana jest na kilka generatorów ułożonych w zakładkach. Poszczególne generatory stylów pozwalają tworzyć zaokrąglenia, gradienty, animacje, przekształcenia, cienie, czcionki. Nie wszystkie generatory dobrze działają na wszystkich przeglądarkach. W poszczególnych generatorach widać, które przeglądarki obsługują dane styl CSS3.

css3maker

Link: http://www.css3maker.com

Pure CSS* – Pasek postępu w jQuery

Pure CSS* Progress Bar jQuery

Skrypt  Pure CSS* opiera się o czasowe przesuwanie paska. Jednak w tym przypadku, algorytm zdaje się symulować wrażenie dłuższego pobieranie czegoś z sieci. Działa to bardzo fajnie, a przez zmianę paru parametrów, można wydłużać i skracać przesuwanie się paska. Wygląd również jest bardzo ciekawy,  pasek widać dobrze na wszystkich przeglądarkach oprócz IE8, w której brak zaokrągleń rogów oraz cieni. W IE9 źle widać tło paska (a z nowym IE9 miało być tak pięknie :) ).

Pure CSS* Progress Bar jQuery

Wymagania: jQuery
Link: http://github.com/ivanvanderbyl/ui-progress-bar
Demo: http://skunkworks.ivanvanderbyl.com/
Licencja: Darmowa