By:
On:
In: Javascript
With: 0 Comments

In this tutorial we are going to show you how to make a JavaScript photobooth app that takes images using the camera on your phone, laptop or desktop. We will showcase a number of awesome native APIs that allowed us to make our project without any external dependencies, third-party libraries or Flash – vanilla JavaScript only! The App To the end user our app is just an oversimplified version of the camera app you can find on any smartphone. It uses a hardware camera to take pictures – that’s it. Under the hood, however, a whole lot of JavaScript magic is going on. Here isRead More →

By:
On:
In: CSS, Development, HTML, Javascript
Tagged: , , , , , ,
With: 0 Comments

As the name implies, Chrome Developer Tools is a set of web developer tools built directly into the Google Chrome browser that allows web developers to interfere and manipulate applications via the browser. With this tool you can easily: View and change page’s styles Debug Javascript Code Analyze runtime performance, so you can optimize your code View messages and running JavaScript in the Console To open DevTools, you can right-click anywhere on the page and select inspect element or you can choose the “tools > developer tools” option from the top right menu.   Now I’m going to show you some really useful and simpleRead More →

By:
On:
In: Global, Javascript
With: 0 Comments

Tutorial JS: Add sound in image Today we will teach you how to click on an image so it emits a sound. First, we need to put the image in a div <div class=”Nom_Imatge” id=”nomAudio”> <img src=”img/pajaro_gris.png”> </div> Once we have put the image, we just have to link the JS and the sound <audio src=”ubicació/de/carpeta” id=”efectes”></audio> <script src=”ubicació/carpeta/js “></script> Next, we will begin to write the JS code. But before that, we will have to do this: Nom=document.getElementById(“NomAudio”); Now we will begin to write the function. We want to make it so that when we click on an imatge it triggers an audio sound.Read More →

By:
On:
In: CSS, HTML, Javascript
With: 0 Comments

Hello! In this entry you will discover about CodePen.io, a handy tool for any kind of web designer, including ourselves. The use of this webpage is completely free, and you can create as many pens (which will be explained later) as you wish. It does have a Premium feature that adds more functionalities, but for most of the users needs, it isn’t necessary at all. This webpage is made specifically for the use, practice and learning of the three main languages for web: HTML, CSS and JS. It lets you work on it online, getting updated results as you work on it, which removes theRead More →

By:
On:
In: Development, Javascript, jQuery
With: 0 Comments

Hello! Have you ever found programming. And do you want the image to enter or hidden when you press a button? But you do not? If you want to know how to do it, this is your post! First of all you have to make a button with the class .button in html. With CSS you can change the color of the button the with the hight… <button class=“button”> </button> Second you have to make a div  with a bakground image in html or css you can chose what you prefere. And alsow whit a class for example .image HTML <button class=“button”> </button> <div class=“image”>Read More →

By:
On:
In: Javascript
With: 0 Comments

Cordova és un motor que fa servir phonegap per empaquetar l’html. Es pot dir que és un cojunt d’API’s de dispositius que permeten a un desenvolupador d’aplicacions mòbil accedir a funcions del mòbil com la càmera, l’acceleròmetre, etc. utilitzant javascript. Per a poder utilitzar aquest motor, primer de tot s’ha d’instal·lar des de la terminal de la manera següent:   $ sudo npm install -g cordova        Read More →

By:
On:
In: CSS3, HTML5, Javascript
With: 0 Comments

PhoneGap és un framework gratuït i open source que permet crear aplicacions mòbils multiplataforma a partir de tecnologies web com ara HTML5, CSS3 i Javascript. PhoneGap s’ha realitzat a partir de Apache Cordova i va ser crear per Nitobi, actualment està en mans d’Adobe i crea les anomenades “aplicacions híbrides”, a mig camí entre natives i les purament web, això ho aconsegueix a partir d’una sèrie de APIs que permetes controlar certes característiques dels dispositius com l’acceleròmetre, la càmera, les notificacions o la geolocalització.Read More →

By:
On:
In: Javascript, Wordpress
With: 0 Comments

Si en el nostre portafoli utilitzem l’isotope per a mostrar les fotografies i els diferents continguts, s’ha d’utilitzar un tall de codi javascript en la pàgina anomenada “functions.php”, per a tal que la llibreria es carregui i aquest funcioni correctament. Primer carreguem la llibreria a dalt de tot: wp_enqueue_script( ‘custom-script1’, get_template_directory_uri() . ‘/lib/js/isotope.pkgd.min.js’, array(‘jquery’)); Seguidament escrivim aquest tall de codi al final de tot del document (abans de tancar el php): <script type=”text/javascript”> jQuery(document).ready(function() { jQuery(‘#example_showhidden’).click(function() { jQuery(‘#section-example_text_hidden’).fadeToggle(400); }); if (jQuery(‘#example_showhidden:checked’).val() !== undefined) { jQuery(‘#section-example_text_hidden’).show(); } }); </script>  Read More →

By:
On:
In: CSS3, Javascript
Tagged: , , ,
With: 0 Comments

Si volem que el menú de la nostra pàgina web remarqui la secció en la qual ens trobem, només necessitem una mica de codi en Javascript i CSS. D’entrada, a la fulla d’estils CSS determinarem una classe concreta per quan una secció estigui activa: .selected { color:#ff0000!important; } Finalment, en Javascript, li donarem la següent acció: $(‘.menu a’).each(function(index) { if(this.href.trim() == window.location) $(this).addClass(“selected”); }); El que fa aquesta acció és buscar quina és la pàgina en la qual ens trobem (window.location) i aplicar la classe “selected” a l’element del menú que contingui un vincle cap a aquesta pàgina. Òbviament, “menu a” dependrà de la classeRead More →

By:
On:
In: CSS3, Javascript
With: 0 Comments

Fer responsive una pàgina web, vol dir que quan aquesta augmenta o disminueix de mida, ja sigui perquè es visualitza amb diversos tipus de pantalles o dispositius (ordinador, tablet, mòvil, etc.) o perquè es redueixi la mida del navegador per a qualsevol altre funció, el seu contingut pugui ser visible d’una manera correcta. Per a realitzar responsive, es pot fer de diverses maneres i utilitzant moltes eines. Tot seguit mostrem dues possibles maneres de fer que el contingt del nostre portal web es mostri correctament es miri des del dispositiu que es miri: 1. foundation.css -> és un framework per a utilitzar a l’hora de ferRead More →