5

Editing an animated clip

This article explains how to obtain from an animation programmed in CSS the equivalent effect in a clip and how editing the clip parameters is coded.

See the Programmer's manual.

 
  1. <?php $text='Paris • London • '; ?>
  2. <?php $color='#ccbb66'?>
  3. <?php $font='Slackey'; ?>
  4. <?php $fontsize=36; ?>
  5. <?php $size=240; ?>

Defines the content of the text which is displayed, the color, the font and the size of the font of the text, the size of the emblem.

  1. <?php head('font', $font); ?>

Adds the tag <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Slackey" /> to the <head> section of the HTML document. head is a function of iZend. Adapt the code to your development environment.

  1. #emblemtest {
  2.     position: relative;
  3.     overflow: hidden;
  4.     margin: 0;
  5.     width: <?php echo $size; ?>px;
  6.     height: <?php echo $size; ?>px;
  7.     font-family: "<?php echo $font; ?>", sans-serif;
  8.     font-size: <?php echo $fontsize; ?>px;
  9.     font-weight: bold;
  10.     text-align: center;
  11.     text-transform: uppercase;
  12.     color: <?php echo $color; ?>
  13. }
  14.  
  15. #emblemtest span {position:absolute;left:0;right:0;top:0;bottom:0;}

Configures the style of the text.

  1. #emblemtest {
  2.     animation: spin 5s ease-in-out 1s 2 alternate;
  3. }
  4.  
  5. @keyframes spin {
  6. from { transform: rotate(0deg); }
  7.   to { transform: rotate(360deg); }
  8. }

Programs the animation of the text.

  1. <div id="emblemtest">&nbsp;</div>

The text will be displayed in this <div>. NOTE: The &nbsp; in the <div> makes sure the font is loaded by the navigator.

  1. function draw(widget, text) {
  2.     let angle = 360/text.length;
  3.  
  4.     for (let i = 0; i < text.length; i++) {
  5.         let span = document.createElement('span');
  6.         let letter = document.createTextNode(text[i]);
  7.  
  8.         span.appendChild(letter);
  9.  
  10.         let r = i * angle;
  11.  
  12.         span.style.transform = `rotate(${r}deg)`;
  13.  
  14.         widget.appendChild(span);
  15.     }
  16. }
  1. const emblemtest = document.getElementById('emblemtest');

Assigns to emblemtest the display <div>of the text.

  1. draw(emblemtest, '<?php echo $text; ?>');

Draws the emblem.

Click in the text to start the animation.

Objective
  • Model
    • ClipModel
      • EmblemModel
  1. function EmblemModel(clipname) {
  2.     ClipModel.call(this, clipname);
  3.  
  4.     this._value = {
  5.         size:       EmblemModel.defaultSize,
  6.         text:       EmblemModel.defaultText,
  7.         textFont:   EmblemModel.defaultTextFont,
  8.         textSize:   EmblemModel.defaultTextSize,
  9.         textBold:   EmblemModel.defaultTextBold,
  10.         textColor:  EmblemModel.defaultTextColor,
  11.         duration:   EmblemModel.defaultDuration,
  12.         easing:     EmblemModel.defaultEasing,
  13.         delay:      EmblemModel.defaultDelay
  14.     };
  15. }
  16.  
  17. EmblemModel.prototype = Object.create(ClipModel.prototype);
  18.  
  19. Object.defineProperty(EmblemModel.prototype, 'constructor', { value: EmblemModel, enumerable: false, writable: true });
  20.  
  21. EmblemModel.defaultSize = 160;
  22. EmblemModel.defaultText = '';   // 'London • Paris • ';
  23. EmblemModel.defaultTextFont = 'Open Sans';
  24. EmblemModel.defaultTextSize = 22;
  25. EmblemModel.defaultTextBold = true;
  26. EmblemModel.defaultTextColor = '#cccccc';
  27. EmblemModel.defaultEasing = 'ease-in-out';
  28. EmblemModel.defaultDuration = 5;
  29. EmblemModel.defaultDelay = 1;
  30.  
  31. EmblemModel.minSize = 120;
  32. EmblemModel.maxSize = 960;
  33. EmblemModel.minTextLength = 0;
  34. EmblemModel.maxTextLength = 40;
  35. EmblemModel.minTextSize = 10;
  36. EmblemModel.maxTextSize = 60;
  37. EmblemModel.minDuration = 1;
  38. EmblemModel.maxDuration = 9;
  39. EmblemModel.minDelay = 0;
  40. EmblemModel.maxDelay = 5;
  41.  
  42. EmblemModel.easingOptions = Validator.easingOptions;
  43.  
  44. EmblemModel.prototype.validateValue = function(prop, val) {
  45.     if (prop == 'size')
  46.         return Number.isInteger(val);
  47.  
  48.     if (prop == 'text')
  49.         return typeof val === 'string' && val.length >= EmblemModel.minTextLength;
  50.  
  51.     if (prop == 'textFont')
  52.         return typeof val === 'string';
  53.  
  54.     if (prop == 'textSize')
  55.         return Number.isInteger(val);
  56.  
  57.     if (prop == 'textColor')
  58.         return Validator.validateColor(val);
  59.  
  60.     if (prop == 'duration')
  61.         return Number.isInteger(val);
  62.  
  63.     if (prop == 'delay')
  64.         return Number.isInteger(val);
  65.  
  66.     if (prop == 'easing')
  67.         return Validator.validateEasing(val);
  68.  
  69.     return true;
  70. }
  71.  
  72. EmblemModel.prototype.normalizeValue = function(prop, val) {
  73.     if (prop == 'size') {
  74.         if (val < EmblemModel.minSize)
  75.             val = EmblemModel.minSize;
  76.         else if (val > EmblemModel.maxSize)
  77.             val = EmblemModel.maxSize;
  78.     }
  79.     else if (prop == 'text') {
  80.         if (val.length > EmblemModel.maxTextLength)
  81.             val = val.substring(0, EmblemModel.maxTextLength);
  82.     }
  83.     else if (prop == 'textSize') {
  84.         if (val < EmblemModel.minTextSize)
  85.             val = EmblemModel.minTextSize;
  86.         else if (val > EmblemModel.maxTextSize)
  87.             val = EmblemModel.maxTextSize;
  88.     }
  89.     else if (prop == 'textBold')
  90.         val = val ? true : false;
  91.     else if (prop == 'textColor')
  92.         val = Validator.normalizeColor(val);
  93.     else if (prop == 'duration') {
  94.         if (val < EmblemModel.minDuration)
  95.             val = EmblemModel.minDuration;
  96.         else if (val > EmblemModel.maxDuration)
  97.             val = EmblemModel.maxDuration;
  98.     }
  99.     else if (prop == 'delay') {
  100.         if (val < EmblemModel.minDelay)
  101.             val = EmblemModel.minDelay;
  102.         else if (val > EmblemModel.maxDelay)
  103.             val = EmblemModel.maxDelay;
  104.     }
  105.  
  106.     return val;
  107. }
Objective
  • Responder
    • View
      • Clip
        • AnimateClip
          • EmblemClip
  1. function EmblemClip() {
  2.     AnimateClip.call(this);
  3.  
  4.     this._options = {duration: 0, delay: 0, easing: 'linear'};
  5. }
  6.  
  7. EmblemClip.prototype = Object.create(AnimateClip.prototype);
  8.  
  9. Object.defineProperty(EmblemClip.prototype, 'constructor', { value: EmblemClip, enumerable: false, writable: true });
  10.  
  11. EmblemClip.prototype._draw = function(text) {
  12.     while (this._widget.firstChild)
  13.         this._widget.removeChild(this._widget.firstChild);
  14.  
  15.     let angle = 360/text.length;
  16.  
  17.     for (let i = 0; i < text.length; i++) {
  18.         let span = document.createElement('span');
  19.         let letter = document.createTextNode(text[i]);
  20.  
  21.         span.appendChild(letter);
  22.  
  23.         let r = i * angle;
  24.  
  25.         span.style.transform = `rotate(${r}deg)`;
  26.  
  27.         this._widget.appendChild(span);
  28.     }
  29.  
  30.     return this;
  31. }
  32.  
  33. EmblemClip.prototype.set = function(options) {
  34.     const {size, text, textFont, textSize, textBold, textColor, duration, delay, easing} = options;
  35.  
  36.     this.setSize(size);
  37.     this.setText(text);
  38.     this.setTextFont(textFont);
  39.     this.setTextSize(textSize);
  40.     this.setTextBold(textBold);
  41.     this.setTextColor(textColor);
  42.  
  43.     this.setAnimation(duration, delay, easing);
  44.  
  45.     return this;
  46. }
  47.  
  48. EmblemClip.prototype.setValue = function(prop, val) {
  49.     if (prop == 'size')
  50.         this.setSize(val);
  51.     else if (prop == 'text')
  52.         this.setText(val);
  53.     else if (prop == 'textFont')
  54.         this.setTextFont(val);
  55.     else if (prop == 'textSize')
  56.         this.setTextSize(val);
  57.     else if (prop == 'textBold')
  58.         this.setTextBold(val);
  59.     else if (prop == 'textColor')
  60.         this.setTextColor(val);
  61.     else if (prop == 'duration')
  62.         this.setDuration(val);
  63.     else if (prop == 'delay')
  64.         this.setDelay(val);
  65.     else if (prop == 'easing')
  66.         this.setEasing(val);
  67.  
  68.     return this;
  69. }
  70.  
  71. EmblemClip.prototype.setSize = function(px) {
  72.     this.setStyle('width', `${px}px`);
  73.     this.setStyle('height', `${px}px`);
  74.  
  75.     this._width = this._height = px;
  76.  
  77.     return this;
  78. }
  79.  
  80. EmblemClip.prototype.setText = function(text) {
  81.     if (text)
  82.         this._draw(text);
  83.  
  84.     return this;
  85. }
  86.  
  87. EmblemClip.prototype.setTextFont = function(font) {
  88.     this.addFont(font).setStyle('fontFamily', `"${font}", sans-serif`);
  89.  
  90.     return this;
  91. }
  92.  
  93. EmblemClip.prototype.setTextSize = function(px) {
  94.     this.setStyle('fontSize', `${px}px`);
  95.  
  96.     return this;
  97. }
  98.  
  99. EmblemClip.prototype.setTextBold = function(bold) {
  100.     this.setStyle('fontWeight', bold ? 'bold' : 'normal');
  101.  
  102.     return this;
  103. }
  104.  
  105. EmblemClip.prototype.setTextColor = function(color) {
  106.     this.setStyle('color', color);
  107.  
  108.     return this;
  109. }
  110.  
  111. EmblemClip.prototype.setDuration = function(ms) {
  112.     this.setAnimation(ms, this._options.delay, this._options.easing);
  113.  
  114.     return this;
  115. }
  116.  
  117. EmblemClip.prototype.setDelay = function(s) {
  118.     this.setAnimation(this._options.duration, s, this._options.easing);
  119.  
  120.     return this;
  121. }
  122.  
  123. EmblemClip.prototype.setEasing = function(easing) {
  124.     this.setAnimation(this._options.duration, this._options.delay, easing);
  125.  
  126.     return this;
  127. }
  128.  
  129. EmblemClip.prototype.setAnimation = function(duration, delay, easing) {
  130.     const keyframes = [
  131.         { transform: 'rotate(0deg)' },
  132.         { transform: 'rotate(360deg)' }
  133.     ];
  134.  
  135.     const options = {
  136.         duration: duration*1000,
  137.         direction: 'alternate',
  138.         iterations: 2,
  139.         easing: easing,
  140.         delay: delay*1000,
  141.         endDelay: 0
  142.     };
  143.  
  144.     const animations = [
  145.         [this._widget, keyframes, options]
  146.     ];
  147.  
  148.     this.animate(animations, false);
  149.  
  150.     this._options.duration = duration;
  151.     this._options.delay = delay;
  152.     this._options.easing = easing;
  153.  
  154.     return this;
  155. }
  1. <?php $debug=false; ?>
  1. <?php $text='Paris • London • '; ?>
  2. <?php $color='#ccbb66'?>
  3. <?php $size=240; ?>
  4. <?php $font='Slackey'; ?>
  5. <?php $fontsize=36; ?>
  1. <?php head('font', $font); ?>
  1. <?php $id=uniqid('id'); ?>
.emblem { position: relative; overflow: hidden; margin: 0; text-align: center; text-transform: uppercase; user-select: none; } .emblem span {position:absolute;left:0;right:0;top:0;bottom:0;}
  1. <div id="<?php echo $id; ?>" class="clip">
  2. <div class="emblem"></div>
  3. </div>
  1. <?php head('javascript', '/objectivejs/Objective.js'); ?>
  2. <?php head('javascript', '/objectivejs/Responder.js'); ?>
  3. <?php head('javascript', '/objectivejs/View.js'); ?>
  4. <?php head('javascript', '/objectivejs/Clip.js'); ?>
  5. <?php head('javascript', '/objectivejs/Model.js'); ?>
  6. <?php head('javascript', '/objectivejs/Validator.js'); ?>
  7. <?php head('javascript', '/objectivejs/ClipModel.js'); ?>
  8. <?php head('javascript', '/objectivejs/ClipController.js'); ?>
  9. <?php head('javascript', '/objectivejs/AnimateClip.js'); ?>
  10. <?php head('javascript', '/objectivejs/tests/EmblemModel.js'); ?>
  11. <?php head('javascript', '/objectivejs/tests/EmblemClip.js'); ?>
  1. <?php if (!$debug): ?>
  2. (function() {
  3. <?php endif; ?>

Isolates all the code in JavaScript in a closure function if $debug is false.

  1.     const clip = new EmblemClip();
  2.  
  3.     const model = new EmblemModel();
  4.  
  5.     const container = document.querySelector('#<?php echo $id; ?>');
  6.  
  7.     clip.setManagedWidget(container.querySelector('.emblem'));
  8.  
  9.     clip.enablePlayer();
  10.  
  11.     const controller = new ClipController(clip, model);
  12.  
  13.     const options = {
  14.         size: <?php echo $size; ?>,
  15.         text: '<?php echo $text; ?>',
  16.         textColor: '<?php echo $color; ?>',
  17.         textFont: '<?php echo $font; ?>',
  18.         textSize: <?php echo $fontsize; ?>
  19.     };
  20.  
  21.     model.set(options);
  1. <?php if (!$debug): ?>
  2. })();
  3. <?php endif; ?>

Closes the function which isolates the code in JavaScript if $debug is false.

 
 
 
 0    

Type in a couple of words, e.g. Paris • London • . Press Enter to validate the text. NOTE: The text is always displayed in capital letters. Modify the size of the font. Check the box to show the text in bold. Change the font of the text by entering the name of a font from Google Fonts, e.g. Slackey or Righteous. Choose the color of the text, e.g. #CB6. Adjust the dimensions of the clip. Change the numbers of seconds of the duration of the animation and the start delay. Try different animation effects, e.g. linear ou ease-in-out. NOTE: The animation runs two times alternating the direction of the rotation. The total duration of the clip is equal to 2 times the duration of the animation + the start delay.

Click on the emblem to start the animation. Click again to pause it, to continue to play it.

Reload the page. The modifications are saved.

See Architecture of an editor.

  1. <?php $debug=false; ?>

Setting $debug to true gives access in the console of the navigator to all the components of the interface. If $debug is false, all the code in JavaScript is protected by a closure function.

  1. <?php $editor=true; ?>
  2. <?php $player=true; ?>
  1. <?php $clipname='emblem'; ?>
  1. <?php head('javascript', 'jquery.cookie'); ?>
  1. <?php if ($editor): ?>
  2. <?php head('javascript', 'jquery.minicolors'); ?>
  3. <?php head('stylesheet', 'jquery.minicolors', 'screen'); ?>
  4. <?php endif; ?>
  1. <?php $id=uniqid('id'); ?>
  1. .emblem {
  2.     position: relative;
  3.     overflow: hidden;
  4.     margin: 0;
  5.     text-align: center;
  6.     text-transform: uppercase;
  7.     user-select: none;
  8. }
  9. .emblem span {position:absolute;left:0;right:0;top:0;bottom:0;}
  1. #<?php echo $id; ?>_emblem_text {
  2.     width: 20em;
  3. }
  4. #<?php echo $id; ?>_emblem_textsize {
  5.     width: 3em;
  6. }
  1. <div id="<?php echo $id; ?>" class="clip">
  2. <?php if ($editor): ?>
  3. <div class="ojs">
  4. <div>
  5. <div class="ojs_undo">
  6. <button type="submit" class="narrow control_undo" disabled><i class="fa fa-undo"></i></button>
  7. <button type="submit" class="narrow control_redo" disabled><i class="fa fa-redo"></i></button>
  8. </div>
  9. <span><input class="ojs_size" type="number" step="10"/>&nbsp;<i class="fa fa-expand small"></i></span>
  10. </div>
  11. <span><input id="<?php echo $id; ?>_emblem_text" type="text" size="20" spellcheck="false"/></span>
  12. <div>
  13. <span><input id="<?php echo $id; ?>_emblem_textsize" type="number" step="1"/>&nbsp;<i class="fa fa-text-height small"></i></span>
  14. <span><input id="<?php echo $id; ?>_emblem_textbold" type="checkbox"/><label for="<?php echo $id; ?>_emblem_textbold"><i class="fa fa-bold small"></i></label></span>
  15. <span id="<?php echo $id; ?>_emblem_textcolor"></span>
  16. </div>
  17. <div>
  18. <span><input id="<?php echo $id; ?>_emblem_textfont" type="text" size="20" spellcheck="false"/>&nbsp;<i class="fa fa-font small"></i></span>
  19. </div>
  20. <fieldset class="ojs_animation">
  21. <legend><i class="fa fa-history"></i>&nbsp;<span class="ojs_timing">0</span></legend>
  22. <span><input class="ojs_duration" type="number" min="1" step="1"/>&nbsp;<i class="fa fa-clock small"></i></span>
  23. <span><input class="ojs_delay" type="number" min="0" max="5" step="1"/>&nbsp;<i class="fa fa-play-circle small"></i></span>
  24. <select class="ojs_easing" size="1">
  25. <option value="linear">linear</option>
  26. <option value="ease">ease</option>
  27. <option value="ease-in">ease-in</option>
  28. <option value="ease-out">ease-out</option>
  29. <option value="ease-in-out">ease-in-out</option>
  30. </select>
  31. </fieldset>
  32. </div>
  33. <?php endif; ?>
  34. <div class="emblem"></div>
  35. </div>
  1. <?php head('javascript', '/objectivejs/Objective.js'); ?>
  2. <?php head('javascript', '/objectivejs/Responder.js'); ?>
  3. <?php head('javascript', '/objectivejs/View.js'); ?>
  4. <?php head('javascript', '/objectivejs/Clip.js'); ?>
  5. <?php head('javascript', '/objectivejs/Model.js'); ?>
  6. <?php head('javascript', '/objectivejs/Validator.js'); ?>
  7. <?php if ($editor): ?>
  8. <?php head('javascript', '/objectivejs/Editor.js'); ?>
  9. <?php head('javascript', '/objectivejs/ClipEditor.js'); ?>
  10. <?php head('javascript', '/objectivejs/Inspector.js'); ?>
  11. <?php head('javascript', '/objectivejs/BooleanInspector.js'); ?>
  12. <?php head('javascript', '/objectivejs/NumberInspector.js'); ?>
  13. <?php head('javascript', '/objectivejs/StringInspector.js'); ?>
  14. <?php head('javascript', '/objectivejs/SelectInspector.js'); ?>
  15. <?php head('javascript', '/objectivejs/ColorInspector.js'); ?>
  16. <?php head('javascript', '/objectivejs/Undo.js'); ?>
  17. <?php head('javascript', '/objectivejs/Panel.js'); ?>
  18. <?php head('javascript', '/objectivejs/UndoPanel.js'); ?>
  19. <?php else: ?>
  20. <?php head('javascript', '/objectivejs/ClipController.js'); ?>
  21. <?php endif; ?>
  22. <?php head('javascript', '/objectivejs/ClipModel.js'); ?>
  23. <?php head('javascript', '/objectivejs/AnimateClip.js'); ?>
  24. <?php head('javascript', '/objectivejs/ModelCookieDelegate.js'); ?>
  25. <?php head('javascript', '/objectivejs/tests/EmblemModel.js'); ?>
  26. <?php head('javascript', '/objectivejs/tests/EmblemClip.js'); ?>
  1. <?php if (!$debug): ?>
  2. (function() {
  3. <?php endif; ?>

Isolates all the code in JavaScript in a closure function if $debug is false.

  1.     const clip = new EmblemClip();
  2.  
  3.     const model = new EmblemModel('<?php echo $clipname; ?>');
  4.  
  5.     const container = document.querySelector('#<?php echo $id; ?>');
  6.  
  7.     clip.setManagedWidget(container.querySelector('.emblem'));
  8.  
  9.     clip.set(model.get());
  1.     clip.enablePlayer();
  1.     const panel = new UndoPanel();
  2.  
  3.     panel.setManagedWidget(container.querySelector('.ojs_undo')).resetWidget();
  4.  
  5.     const sizeInspector = new NumberInspector(model.getValue('size'), {min: EmblemModel.minSize, max: EmblemModel.maxSize});
  6.  
  7.     sizeInspector.setManagedWidget(container.querySelector('.ojs_size')).resetWidget();
  8.  
  9.     const textInspector = new StringInspector(model.getValue('text'), {min: EmblemModel.minTextLength, max: EmblemModel.maxTextLength, trim: false, required: false});
  10.  
  11.     textInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_emblem_text')).resetWidget();
  12.  
  13.     const textSizeInspector = new NumberInspector(model.getValue('textSize'), {min: EmblemModel.minTextSize, max: EmblemModel.maxTextSize});
  14.  
  15.     textSizeInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_emblem_textsize')).resetWidget();
  16.  
  17.     const textBoldInspector = new BooleanInspector(model.getValue('textBold'));
  18.  
  19.     textBoldInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_emblem_textbold')).resetWidget();
  20.  
  21.     const textColorInspector = new ColorInspector(model.getValue('textColor'));
  22.  
  23.     textColorInspector.createManagedWidget(container.querySelector('#<?php echo $id; ?>_emblem_textcolor'));
  24.  
  25.     const textFontInspector = new StringInspector(model.getValue('textFont'));
  26.  
  27.     textFontInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_emblem_textfont')).resetWidget();
  28.  
  29.     const durationInspector = new NumberInspector(model.getValue('duration'), {min: EmblemModel.minDuration, max: EmblemModel.maxDuration});
  30.  
  31.     durationInspector.setManagedWidget(container.querySelector('.ojs_duration')).resetWidget();
  32.  
  33.     const delayInspector = new NumberInspector(model.getValue('delay'), {min: EmblemModel.minDelay, max: EmblemModel.maxDelay});
  34.  
  35.     delayInspector.setManagedWidget(container.querySelector('.ojs_delay')).resetWidget();
  36.  
  37.     const easingInspector = new SelectInspector(model.getValue('easing'), {tags: EmblemModel.easingOptions});
  38.  
  39.     easingInspector.setManagedWidget(container.querySelector('.ojs_easing')).resetWidget();
  40.  
  41.     const timing = new View();
  42.  
  43.     timing.setManagedWidget(container.querySelector('.ojs_timing'));
  44.  
  45.     const inspectors = {
  46.         size:       sizeInspector,
  47.         text:       textInspector,
  48.         textFont:   textFontInspector,
  49.         textSize:   textSizeInspector,
  50.         textBold:   textBoldInspector,
  51.         textColor:  textColorInspector,
  52.         duration:   durationInspector,
  53.         delay:      delayInspector,
  54.         easing:     easingInspector
  55.     };
  56.  
  57.     const editor = new ClipEditor(model, clip, inspectors, panel, timing);
  1.     const controller = new ClipController(clip, model);
  1.     model.setDelegate(new ModelCookieDelegate());
  2.  
  3.     if (model.isSaved())
  4.         model.readIn();
  5.     else {
  6.         model.setValue('text', 'Paris • London • ');
  7.         model.setValue('textFont', 'Slackey');
  8.         model.setValue('textColor', '#CB6');
  9.         model.setValue('textSize', 36);
  10.         model.setValue('size', 240);
  11.     }
  12.  
  13.     model.enableSync();
  1. <?php if (!$debug): ?>
  2. })();
  3. <?php endif; ?>

Closes the function which isolates the code in JavaScript if $debug is false.

SEE ALSO

Objective, Model, Clip, AnimateClip, Inspector, ModelCookieDelegate, Editor, Architecture of an editor, Editing a programmed clip, Editing a video clip, Write data on a server

Comments

Your comment:
[p] [b] [i] [u] [s] [quote] [pre] [br] [code] [url] [email] strip help 2000

Enter a maximum of 2000 characters.
Improve the presentation of your text with the following formatting tags:
[p]paragraph[/p], [b]bold[/b], [i]italics[/i], [u]underline[/u], [s]strike[/s], [quote]citation[/quote], [pre]as is[/pre], [br]line break,
[url]http://www.izend.org[/url], [url=http://www.izend.org]site[/url], [email]izend@izend.org[/email], [email=izend@izend.org]izend[/email],
[code]command[/code], [code=language]source code in c, java, php, html, javascript, xml, css, sql, bash, dos, make, etc.[/code].