1. My source(Italy mosaic) is in EPSG:4326 and the default OpenLayers projection is EPSG:900913 (or as known as EPSG:3857). Because of this mismatch either I had to get the Italy mosaic (my source) in EPSG:900913 or get it in EPSG:4326 but reproject it to EPSG:900913 to be able to see it on the screen. For now I solved the problem by getting the Italy mosaic in EPSG:900913.
2. I had to add 'EPSG:900913: ' to my matrixIds[z] = z; value. Without this addition, link goes to tile columns and rows that don't exist; here how the request is seen from Fiddler :

var projection = ol.proj.get('EPSG:900913'); var projectionExtent = projection.getExtent(); var size = ol.extent.getWidth(projectionExtent) / 256; var resolutions = new Array(14); var matrixIds = new Array(14); for (var z = 0; z < 14; ++z) { // generate resolutions and matrixIds arrays for this WMTS resolutions[z] = size / Math.pow(2, z); matrixIds[z] ='EPSG:900913:' + z; }

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM(),
            opacity: 0.7
        }),
        new ol.layer.Tile({
            opacity: 0.7,
            source: new ol.source.WMTS({
                url: 'http://localhost:8081/geoserver/gwc/service/wmts?',
                layer: 'nurc:mosaic',
                matrixSet: 'EPSG:900913',
                format: 'image/png',
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: ol.extent.getTopLeft(projectionExtent),
                    resolutions: resolutions,
                    matrixIds: matrixIds
                }),
                style: '',
                wrapX: true
            })
        })
    ],
    target: 'map',
    controls: ol.control.defaults({
        attributionOptions: {
            collapsible: false
        }
    }),
    view: new ol.View({
        center: ol.proj.fromLonLat([27, 35]),
        zoom: 5
    })
});

1. My source(Italy mosaic) is in EPSG:4326 and the default OpenLayers projection is EPSG:900913 (or as known as EPSG:3857). Because of this mismatch either I had to get the Italy mosaic (my source) in EPSG:900913 or get it in EPSG:4326 but reproject it to EPSG:900913 to be able to see it on the screen. For now, I solved the problem by getting the Italy mosaic in EPSG:900913.
2. I had to add 'EPSG:900913: ' to my matrixIds[z] = z; value. Without this addition, the link goes to tile columns and rows that don't exist; here is how the request is seen from Fiddler :

var projection = ol.proj.get('EPSG:900913');
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = new Array(14);
var matrixIds = new Array(14);
for (var z = 0; z < 14; ++z) {
    // generate resolutions and matrixIds arrays for this WMTS
    resolutions[z] = size / Math.pow(2, z);
    matrixIds[z] ='EPSG:900913:' + z;
}

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM(),
            opacity: 0.7
        }),
        new ol.layer.Tile({
            opacity: 0.7,
            source: new ol.source.WMTS({
                url: 'http://localhost:8081/geoserver/gwc/service/wmts?',
                layer: 'nurc:mosaic',
                matrixSet: 'EPSG:900913',
                format: 'image/png',
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: ol.extent.getTopLeft(projectionExtent),
                    resolutions: resolutions,
                    matrixIds: matrixIds
                }),
                style: '',
                wrapX: true
            })
        })
    ],
    target: 'map',
    controls: ol.control.defaults({
        attributionOptions: {
            collapsible: false
        }
    }),
    view: new ol.View({
        center: ol.proj.fromLonLat([27, 35]),
        zoom: 5
    })
});

http://localhost:8081/geoserver/gwc/service/wmts?layer=nurc%3Amosaic&style=&tilematrixset=EPSG%3A900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=9&TileCol=280&TileRow=193

http://localhost:8081/geoserver/gwc/service/wmts?layer=nurc%3Amosaic&style=&tilematrixset=EPSG%3A900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=9&TileCol=280&TileRow=193