2016 m. sausio 8 d., penktadienis

2016 m. sausio 7 d., ketvirtadienis

Neapkraunantis youtube užkrovimas

Jei viename tinklalapio lange norite ikelti daug youtube video, tai labai akraus puslapi, jei desite embeded visus youtube video. Todel geriau deti tik youtube cover paveiksleli su ant virsaus nupiestu play mygtuku. Istraukti coveri ir ji suaktyvinti, kad paspaudus coveri isikeltu grotuvas, nesunkiai galima padaryti su JS funkcija: http://www.sitepoint.com/faster-youtube-embeds-javascript/

Lightweight social share buttons

be addthis.com dar yra paprastas lengvas skriptukas http://sapegin.github.io/social-likes/  ( https://github.com/sapegin/social-likes )

papsrastas budas pasidaryti mytukus su fontawesome: http://webdesignerhut.com/css-social-sharing-buttons/

Geras budas pasidaryti mygtukus su counteriais, ne atskiro srifto failo (sriftas itrauktas i js): http://sapegin.github.io/social-likes/


2016 m. sausio 4 d., pirmadienis

JS ekrano screenshot paėmimas ir siuntimas į serverį

http://permadi.com/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/
http://www.jedox.com/en/screen-shot-web-via-javascript-saving-back-server
https://html2canvas.hertzen.com/
html to canvas alternatyva: http://cburgmer.github.io/rasterizeHTML.js/ taip pat https://github.com/Irrelon/html-to-canvas

function saveViaAJAX()
{
var testCanvas = document.getElementById("testCanvas");
var canvasData = testCanvas.toDataURL("image/png");
var postData = "canvasData="+canvasData;
var debugConsole= document.getElementById("debugConsole");
debugConsole.value=canvasData;

//alert("canvasData ="+canvasData );
var ajax = new XMLHttpRequest();
ajax.open("POST",'testSave.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
//ajax.setRequestHeader('Content-TypeLength', postData.length);


ajax.onreadystatechange=function()
{
if (ajax.readyState == 4)
{
//alert(ajax.responseText);
// Write out the filename.
document.getElementById("debugFilenameConsole").innerHTML="Saved as<br><a target='_blank' href='"+ajax.responseText+"'>"+ajax.responseText+"</a><br>Reload this page to generate new image or click the filename to open the image file.";
}
}

ajax.send(postData);
}


Tačiau mums reikia html versti į canvas, naudojant html2canvas.js
function takeScreenShot(){
html2canvas(window.parent.document.body, {
onrendered: function(canvas) {
var cand = document.getElementsByTagName('canvas');
if(cand[0] === undefined || cand[0] === null){
}else{
//cand[0].remove();
document.body.removeChild(cand[0]);
}
document.body.appendChild(canvas);
}
});
}




Server side:
<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
  // Get the data
  $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
  // Remove the headers (data:,) part.
  // A real application should use them according to needs such as to check image type
  $filteredData=substr($imageData, strpos($imageData, ",")+1);
  // Need to decode before saving since the data we received is already base64 encoded
  $unencodedData=base64_decode($filteredData);
  //echo "unencodedData".$unencodedData;
  // Save file. This example uses a hard coded filename for testing,
  // but a real application can specify filename in POST variable
  $fp = fopen( 'test.png', 'wb' );
  fwrite( $fp, $unencodedData);
  fclose( $fp );
}
?>

JS loader

http://requirejs.org/  - padeda per funkcijas uzkrauti asinchroniskai kitas JS bibliotekas, pvz jQuery, nestabdant HTML isvedimo i ekrana
Taip pat http://headjs.com/

Android / ios appslikacijų kūrimas

Naudojant html/js/css standartus, aplikacijas galima kurti http://phonegap.com/ pagalba