xuv's notebook

Side notes, howtos and random bits of information related to Julien Deswaef's projects

User Tools

Site Tools


projects:design_with_git

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
projects:design_with_git [2014/11/28 14:56] Julien Deswaefprojects:design_with_git [2016/11/04 03:04] (current) – [NYC] Julien Deswaef
Line 21: Line 21:
 This project is about designing a multi-platform tool, build on top of Git and web technologies, but adapted to a designer's workflow using a vector based data model. So that designers of any kind can experiment remote collaboration on larger visual project and be giants themselves. This project is about designing a multi-platform tool, build on top of Git and web technologies, but adapted to a designer's workflow using a vector based data model. So that designers of any kind can experiment remote collaboration on larger visual project and be giants themselves.
  
- 
-===== History of development ===== 
-==== Medialab Prado ==== 
- 
-This idea has been looping around in my head for a while and <del>I'd like to present it</del> it has been selected for the **Tools for a read-write world** [[http://medialab-prado.es/interactivos|Interactivos?'13 at Medialab Prado]]. 
- 
-[[projects:design_with_git:medialab_prado|Text for the open call]] 
- 
-Draft for the [[projects:design_with_git:medialab_prado_forum|Medialab Prado forum]] call for collaborators. 
- 
-[[projects:design_with_git:medialab_prado_log|Medialab Prado Log]] 
  
 ===== Some examples of designers using Git ===== ===== Some examples of designers using Git =====
Line 38: Line 27:
   * [[http://eptcomic.com/ept1movie.htm|Animating a git repository]] The successive commits during a  24 pages comic creation using Inkscape has been animated into a [[http://www.youtube.com/watch?v=WY9A2mug4dw|2 min movie]]    * [[http://eptcomic.com/ept1movie.htm|Animating a git repository]] The successive commits during a  24 pages comic creation using Inkscape has been animated into a [[http://www.youtube.com/watch?v=WY9A2mug4dw|2 min movie]] 
   * [[https://github.com/raphaelbastide/Terminal-Grotesque|Terminal Grotesque]] is an open source font by Raphaël Bastide available on Github. Many design works by Raphaël are available on github which encourages collaborations and forking.   * [[https://github.com/raphaelbastide/Terminal-Grotesque|Terminal Grotesque]] is an open source font by Raphaël Bastide available on Github. Many design works by Raphaël are available on github which encourages collaborations and forking.
-  * [[http://osp.constantvzw.org|Open Source Publishing]], a graphic design studio using open source tools, has a [[http://git.constantvzw.org/|git repository]] for all their projects. OSP has a crowdfunding campaign to improve and develop their inhouse collaboration tool called [[http://www.kisskissbankbank.com/visual-culture-a-tool-for-design-collaboration | Visual Culture]].+  * [[http://osp.constantvzw.org|Open Source Publishing]], a graphic design studio using open source tools, has a [[http://git.constantvzw.org/|git repository]] for all their projects. OSP has a crowdfunding campaign to improve and develop their inhouse collaboration tool called [[http://www.kisskissbankbank.com/visual-culture-a-tool-for-design-collaboration | Visual Culture]].
  
 +===== History of development =====
  
-===== The case for SVG, Inkscape and Git ===== 
  
-SVG is a becoming a wildly used format. Most modern browsers can display it. The format has been around for quite a while and many (if not all) graphic softwares support it. It's also quite an easy human readable format. 
  
-Inkscape is also becoming a well respected graphic tool in the open source design community. It can import and export multiple graphic file formats. The interface is quite easy to apprehend and it uses SVG as a base file format. Inkscape is also extendable and uses python as scripting language. Inkscape is a tool used by webdesigners, illustrators, font designers and graphic designers in general. 
  
-Git is the trending version control system of today. His popularity (with websites like Github or Gitorious) and distributed capabilites make it a tool of choice for every designer concerned with efficient production workflow and collaboration. 
  
-As stated, SVG and Inkscape are already well interdependent. It seems obvious and almost trivial to integrate the features of git to this already excellent tool.   +==== Medialab Prado ====
-==== Possible integrations of Git into Inkscape ==== +
-  * Have the basic git commands integrated in the GUI (like init, add, commit, branch, push pull,...) +
-  * Have the commit history displayed as a list or graph so the designer can go back in time and recall older versions. +
-  * Have a special viewer that can display the differences between two commits in different ways.+
  
-=== Graphical Diff Suggestion ===+This idea has been has been submitted and selected for the **Tools for a read-write world** at [[http://medialab-prado.es/interactivos|Interactivos?'13 at Medialab Prado]].
  
-Very cool project!+  * [[projects:design_with_git:medialab_prado|Text for the open call]] 
 +  * Draft for the [[projects:design_with_git:medialab_prado_forum|Medialab Prado forum]] call for collaborators. 
 +  * [[projects:design_with_git:medialab_prado_log| Daily report and notes during development at Medialab Prado]] 
 +  * [[http://xuv.github.io/design-with-git/ | Prototype application ]] resulting from the 2 weeks residence at Medialab Prado
  
-As a "getting started" idea for a graphical diff of two commits, here's 
-a way to use ImageMagick's "compare" tool via git-difftool. 
  
-First, a python script (//e.g// compare.py) to render the two SVGs to bitmaps +===== Related pages ===== 
-via Inkscape and then do the final diff via ImageMagick:+  * [[projects:design_with_git:file_formats|About file formats and data model]] 
 +  * [[projects:design_with_git:inkscape|The case for SVG, Inkscape and Git]] 
 +  * [[projects:design_with_git:notes|Random notes]]
  
-<code python> 
-#!/usr/bin/env python 
-import sys, os 
- 
-inkscape = "inkscape" 
- 
-local = sys.argv[1] 
-remote = sys.argv[2] 
-tempdir = "/home/markv/gittemp/" 
-localpng = tempdir+"local.png" 
-remotepng = tempdir+"remote.png" 
- 
-if(not (remote.endswith(".svg") and (local != "/dev/null"))): 
-    os.system("xxdiff %s %s" % (local, remote)) 
-else: 
-    os.system(inkscape+" "+local+" --export-png="+localpng+" -w600 -h900 -C -bffffff -y1.0") 
-    os.system(inkscape+" "+remote+" --export-png="+remotepng+" -w600 -h900 -C -bffffff -y1.0") 
-    os.system("compare "+localpng+" "+remotepng+" - | display") 
-    os.remove(localpng) 
-    os.remove(remotepng) 
-</code> 
- 
-Then add a hook like this to your .gitconfig: 
- 
-<code> 
- 
-[difftool "compare"] 
-        cmd = "/home/markv/bin/compare.py $LOCAL $REMOTE - | display" 
-</code> 
- 
-Then "git difftool -y -t compare" will display bitmaps of changed SVGs, one at a time, 
-highlighting changed regions in red. 
- 
-Hope this helps, 
- 
---Mark 
- 
-Thx Mark. Will look into that. If you want to give a hand during the worshop, you're welcome. 
- --- //[[juego@requiem4tv.com|Ju]] 2013/02/07 01:25// 
- 
-=== Possible screenshots === 
-{{:projects:design_with_git:designwitgit-graphviewer.png?nolink|}} 
- 
-===== Related pages ===== 
-  * [[projects:design_with_git:file_formats|About file formats and data model 
-]] 
-=== Visual libs to try out === 
-  * http://visjs.org/examples/timeline/05_groups.html 
  
projects/design_with_git.1417182994.txt.gz · Last modified: 2014/11/28 14:56 by Julien Deswaef