Archives de catégorie : HTML

HTML

J’ai construit PhantomJS 2.1.1 pour Raspberry Pi

J’ai construit PhantomJS 2.1.1 pour Raspberry Pi. Il peut également fonctionner sur toutes les machines d’architecture armhf.

J’ai utilisé Debian sur ARM VPS sur https://www.scaleway.com/ et suivez cette page pour le construire.

S’il vous plaît télécharger à partir de https://github.com/mecrazy/phantomjs-binaries.
( Après ma demande de traction a permis, je vais modifier le lien sur ce blog à “https://github.com/avaynshtok/phantomjs-binaries”. )

J’utilise Raspberry Pi comme une machine de test pour les applications serveur comme web raclage. Mais il n’y avait pas de binaires PhantomJS pour l’architecture de armhf sur le web. Donc, je l’ai construit. S’il vous plaît utiliser ce binaire, si vous voulez. Mais je ne peux pas prendre soin des problèmes et des bugs lorsque vous l’utilisez.

< Qu'est-ce que "PhantomJS"? >
PhantomJS est un outil Web de grattage avec l’API JavaScript. Il peut capturer des pages Web au format PDF, PNG ou une sorte de fichier image. Si vous voulez en savoir plus sur PhantomJS, s’il vous plaît vérifier http://phantomjs.org/.

Obtenez nouvelle version de Google Feuilles de calcul comme JSONP

< avertissement >
Je vous recommande d’obtenir compte Google supplémentaire uniquement pour public.
Parce que si vous suivez ma procédure, votre adresse Gmail sera sur fichier JSONP public.

< Google Feuilles de calcul >
Ancienne version de Google Feuilles de calcul peut partager des feuilles de calcul au format XML, JSON et certains type de format. Je pensais que la nouvelle version ne dispose pas de telles fonctions de partage. Mais j’ai trouvé la bonne solution pour la nouvelle version de Google Spreadsheets sur la réponse à la question sur StackOverflow.
Unable to publish specific cells in new Google Spreadsheets – StackOverflow ( en anglais )
Selon la page ci-dessus, cette API est une sorte de vieux API. Personne n’est sûr quand il s’arrête. Je n’aime pas cette situation. Mais si vous n’aimez pas la situation, je ne vous recommande pas d’utiliser cette API.

< le format URL >

https://spreadsheets.google.com/feeds/cells/[ Votre clé de feuille de calcul ]/od6/public/values?min-row=[ commencer numéro de ligne ]&max-row=[ fin numéro de ligne ]&min-col=[ numéro de départ de la colonne ]&max-col=[ fin numéro de colonne ]&alt=json-in-script&callback=[ rappel nom de la fonction ]

< Comment l’utiliser? >
Format JSONP est facile à utiliser en JavaScript. Nul besoin analyseur. Mais je tiens à utiliser le générateur d’URL pour faire de l’API plus utile. J’ai donc développé un script qui convertit de paramètres de pagination de paramètres d’URL syntaxe suivante Google.

< Le plugin jQuery >
J’ai développé ce plugin jQuery nommé « generateGoogleJsonpUri ».
generateGoogleJsonpUri – github
J’ai créé la page de l’échantillon comme un cadre de blog pour tester mon plugin.
https://mecrazy.net/sample/generateGoogleJsonpUri/
Si vous voulez, s’il vous plaît copiez sa source à titre d’exemple.

< usage – coulage >
Coulée syntaxe est

var test = $.genJsonpGDU("<Votre feuille de calcul-clé-ici>");

ou

var test = $.genJsonpGDU({key:"<Votre feuille de calcul-clé-ici>"});

.

Vous pouvez trouver une clé dans l’URL de votre feuille de calcul. Il est mon exemple ci-dessous.
spreadsheet_sample_001
Sur cette image, l’URL est « https://docs.google.com/spreadsheets/d/1IG2QEOXehU01b6DoMQi19CvFpm2EZJOUM2y4lqXKduw/edit#gid=0 ». La clé pour ma feuille de calcul est « 1IG2QEOXehU01b6DoMQi19CvFpm2EZJOUM2y4lqXKduw ». S’il vous plaît vérifier l’URL de votre feuille de calcul pour obtenir votre clé.

< usage – configurer pager >

test.pager({
  startRow:2,//Numéro de la ligne de commencer à obtenir (requis)
  minCol:2,//Numéro de colonne pour commencer à obtenir (requis)
  maxCol:7,//Numéro de la colonne de mettre fin à obtenir (requis)
  recsPerPage:5//Enregistrements dans une page (en option)
});

S’il vous plaît de comparer la syntaxe ci-dessus et le tableau ci-dessous. Quand vous voyez le tableau ci-dessous, s’il vous plaît imaginer Excel ou n’importe quel type de feuille de calcul. Syntaxe ci-dessus, la gamme de la première page est la gamme rose, 2ème page est zone verte. « B2:G2 » est un premier enregistrement. « B6:G6 » est un cinquième dossier.

A1 B1 C1 D1 E1 F1 G1 H1
A2 B2 C2 D2 E2 F2 G2 H2
A3 B3 C3 D3 E3 F3 G3 H3
A4 B4 C4 D4 E4 F4 G4 H4
A5 B5 C5 D5 E5 F5 G5 H5
A6 B6 C6 D6 E6 F6 G6 H6
A7 B7 C7 D7 E7 F7 G7 H7
A8 B8 C8 D8 E8 F8 G8 H8
A9 B9 C9 D9 E9 F9 G9 H9
A10 B10 C10 D10 E10 F10 G10 H10
A11 B11 C11 D11 E11 F11 G11 H11
A12 B12 C12 D12 E12 F12 G12 H12
A13 B13 C13 D13 E13 F13 G13 H13

< usage – obtenir URL de la page >
Il est un exemple pour obtenir la première page URL.

var pageUrl = test.page(1);

( « test.pager(objet) » est nécessaire avant d’exécuter cette fonction. )

< usage – exécuter Ajax >
Arguments pour « test.ajax » sont les mêmes que « http://api.jquery.com/jQuery.ajax/ ».

test.ajax({
  url:test.page(1),
  success:function(json){
    console.log(json);
  }
});

Si vous voulez savoir la page en cours a la page précédente ou la page suivante, s’il vous plaît utiliser « test.get() » en fonction « success » et des paramètres de contrôle.

test.ajax({
  url:test.page(1),
  success:function(json){
    console.log(json);
    var param = test.get();
    if(param.pager.prev){
      console.log("Cette page a la page précédente.");
    }else{
      console.log("Cette page n'a pas la page précédente.");
    }
    if(param.pager.next){
      console.log("Cette page a page suivante.");
    }else{
      console.log("Cette page n'a pas encore la page suivante.");
    }
  }
});

< usage – convertir JSON de tableau 2D >
« test.jsonToArr » convertit le format JSON de Google de tableau 2D.

test.ajax({
  url:test.page(1),
  success:function(json){
    var arr2d = test.jsonToArr(json);
    console.log(arr2d);
  }
});

< usage – cache variables >
Si vous souhaitez activer le cache de pagination à l’aide des variables JavaScript, s’il vous plaît suivre la syntaxe ci-dessous.

test.set({cache:true});

Cet argument passe à utiliser le cache pour la pagination. Il vérifie la date de mise à jour sur JSONP toutes les 20 minutes par défaut. Si la date a changé, il cache automatiquement clair. Si vous souhaitez modifier l’intervalle de vérifier la date. Vous pouvez utiliser la syntaxe comme ci-dessous à la place de la syntaxe ci-dessus.

test.set({
  cache:true,
  cacheInterval:{
    sec:0,min:50,hour:0
  }
});

< épilogue >
Il existe des différences fondamentales entre les nouveaux et les anciens Google Spreadsheets.

  nouveau vieux
cellules maximum 2 millions de cellules 400,000 cellules
Nombre maximum de colonnes illimité 256 colonnes par feuille

Je pense que la nouvelle version est la base de données incroyablement grand et libre. Je veux trouver des usages intéressants de nouvelles feuilles de calcul Google.

Générateur de HTML de base pour Bootstrap 3

< Qu’est-ce que c’est? >
Il génère source HTML de base pour Bootstrap 3. Vous pouvez choisir les options lorsque vous générez. J’utilise souvent cela pour moi. Si vous voulez, s’il vous plaît signet sur ​​cette page.


< Générateur >
Titre de la page :
Code de langue :
Version Bootstrap :
Compatible avec le vieux IE :
Utilisez la barre de navigation fixe :
Utilisez le pied collant :
Utiliser jQuery basculement :
Utiliser jQuery UI basculement :
Utilisez backbone.js :
Utilisez underscore.js :
Utilisez bootbox :

Si vous choisissez «Compatible avec le vieux IE» «OUI», vous devez mettre «bootstrap.min.css» et «respond.min.js» sur votre serveur. Fondamentalement «respond.min.js» ne fonctionne pas correctement sur les serveurs CDN et des autres.

< Scripts >
Vous pouvez télécharger les scripts HTML utilise. Vous pouvez mettre sur votre serveur et remplacer les chemins de son exécution.
Bootstrap
jQuery
jQuery UI
backbone.js
underscore.js
bootbox
html5shiv
Respond.js
( Bootstrap et Respond.js sont nécessaires pour télécharger vieux IE. S’il vous plaît soyez prudent. )

Faire STINGER3 (thème WordPress) compatible avec WPML (Multilingue plugin)

< Qu’est-ce WPML? >
C’est un plugin pour WordPress multilingue. J’utilise WPML sur ce blog de ​​mecrazy.
Site officiel de WPML

< Qu’est-ce STINGER3? >
Il s’agit d’un thème WordPress. Il possède de nombreuses fonctions très pratiques sans plugin. Par exemple, snippet d’insertion pour les annonces (comme Google Adsense) et les boutons sociaux de conception fraîche. J’ai voulu essayer d’utiliser ce thème.
Site officiel de STINGER3 (Page japonais)

< Espoir activité douce >
Le développeur de STINGER3 est trop occupé pour répondre sur Twitter, et je ne suis pas sûr qu’il puisse lire d’autres langues que le japonais. Si vous avez des questions sur STINGER3, j’espère que vous trouverez la réponse sur Google ou à résoudre les problèmes par vous-même.

< Pour les gens qui ne peuvent pas lire le japonais >
Site officiel de STINGER3 est en Japonais. Je pense qu’il est difficile de trouver le lien de téléchargement de fichier zip du thème. Vous devriez trouver le mot japonais «ダウンロード». Cela signifie «télécharger» en français. S’il vous plaît utiliser CTRL + F de trouver ce mot. S’il vous plaît trouver le courant nom de fichier de la version “stinger3ver20140327.zip”.

< Le code de compatibilité >
Le code ci-dessous donne la compatibilité de WPML à STINGER3.

<style type="text/css">

.submenu-languages{
  background-color:#f3f3f3;
  border-style:solid;
  border-color:#dedede;
  border-width:0px 1px 1px 1px;
  position:absolute;
  margin-left:-11px;
  margin-top:21px;
  padding-bottom:5px;
  display:none;
}
.submenu-languages > li{
  white-space:nowrap !important;
  float:none !important;
  display:inline-block !important;
}

.iclflag{ vertical-align:middle;position:relative !important;top:-1px !important; }
#lang_sel{ z-index:1000; }
#lang_sel a{ display:block; }
#lang_sel ul,#lang_sel li,#lang_sel a{
  margin:0px;padding:0px;
  width:300px;
  text-align:left;
  white-space:nowrap;
}
#lang_sel ul,#lang_sel li{ margin:0px !important;padding:0px !important; }
#lang_sel a{ margin:0px !important;padding:0px 7px !important; }
#lang_sel li,#lang_sel a,#lang_sel span{
  height:30px !important;
  line-height:30px !important;
  font-size:14px;
}
#lang_sel > ul > li > ul{ top:31px; }

</style>
<script type="text/javascript">
jQuery(function($){
var langMenuObj = $('.submenu-languages').eq(0);
var wpmlMobile = (typeof(window.orientation) != "undefined");
$('.menu-item-language-current').eq(0).on('mouseenter',function(){
if(!wpmlMobile){langMenuObj.stop(true,true).fadeIn('fast');}
}).on('mouseleave',function(){
if(!wpmlMobile){langMenuObj.stop(true,true).fadeOut('slow');}
}).on('click',function(){
langMenuObj.stop(true,true).toggle();
});
$('.icl_lang_sel_current ').parent().click(function(){ return false; });
});
</script>

< Comment insérer ce code? >
Il ya 3 façons d’insérer par exemple le code. S’il vous plaît choisir l’un d’entre eux. Ou si vous savez comment personnaliser WordPress, vous pouvez insérer manuellement à vos scripts PHP.

< Méthode – 1 >
Aller à [ Apparence – Widgets ] de menu administrateur. S’il vous plaît ajoutez «Texte» à un domaine valide. S’il vous plaît ne pas entrer dans le titre, placez le script que dans le formulaire détaillé.

< Méthode – 2 >
J’ai développé un STINGER3 loves WPML de plugin. Ce plugin faire la même chose que «Méthode – 1». Si vous trouvez des bugs, s’il vous plaît rapporter ou me dire sur Github, Twitter Google+ ou.

< Méthode – 3 >
Utilisation de WordPress plugin «Wp Insert». Il peut insérer du code HTML de n’importe où sur votre blog.

< Après >
Je pense que chacune des méthodes ne sont pas si difficile. Mais la version actuelle de STINGER3 n’est pas compatible avec les fichiers de mo de langue. Nous ne pouvons traduire avec cordes traduction de WPML. Si j’ai du temps libre, je veux développer patch pour STINGER3 compatible avec les fichiers de mo.

< Mise à jour le 11 Juin, 2014 >
Fixé – Il ne peut pas gérer premier événement du robinet de Android ou iOS navigateurs. Le code source de cette page et le plugin WordPress sur Github sont mises à jour.

La création de pages web dynamiques seulement avec Google Drive

< Avertissement >
Je vous recommande d’obtenir compte Google supplémentaire uniquement pour public. Parce que si vous suivez ma procédure, votre adresse Gmail sera sur fichier XML public.

< Nouvelle solution sur 07/07/2014 >
J’ai écrit le message Obtenez nouvelle version de Google Feuilles de calcul comme JSONP. Si vous souhaitez utiliser la nouvelle version de Google Feuilles de calcul pour générer des pages web dynamiques à la place de l’ancienne version, s’il vous plaît lire ce poste.

< Mis à jour le 26.04.2014 >
S’il vous plaît utiliser Anyfile Notepad ou d’autres applications d’édition de texte pour Google Drive sur Google Web Store au lieu de Drive Notepad. Parce que Drive Notepad a été retiré du magasin.

< Mis à jour le 12.05.2014 >
Hey! Drive Notepad est de retour à Google Web Store!

< Recommandation >
Je vous recommande d’installer «Drive Notepad». Il s’agit d’une extension pour Google Drive. Lorsque vous installez Drive Notepad, vous devez Chrome. Mais après la connexion Drive Notepad Google Drive, Chrome n’est pas nécessaire. Vous pouvez utiliser Drive Notepad sur tous les navigateurs.
https://chrome.google.com/webstore/detail/drive-notepad/gpgjomejfimnbmobcocilppikhncegaj?hl=en-GB
drive_notepad_en_us

< Pour mettre à jour le contenu de la Feuille de calcul >
Vous devez utiliser «la version de Google Feuille de calcul 1». Parce que «la version 2» ne prend pas en charge CSV et partage encore XML. (J’ai écrit ce poste chez 19 Avril 2014.) Si vous générez normalement nouvelle feuille de calcul aujourd’hui, c’est être automatiquement la version 2.

Google a expliqué nouvelle feuille de calcul sur «Découvrir la nouvelle version de Google Feuilles de calcul».

Je m’inquiétais CSV et le partage de XML ne vais pas soutenir dans la version 2. Alors j’ai vérifié aussi «Fonctions non compatibles avec la nouvelle version de Google Feuilles de calcul». Mais cette fonction n’est pas listé sur cette page. Ouais … ne figure pas … mais personne n’est sûr quand Google change leur esprit ….
Pouvez-vous accepter cette situation? LOL

Voyons accès https://g.co/oldsheets pour générer une feuille de calcul dans la version 1.

C’est mon échantillon.

C’est une seule feuille. Il a en-tête, 3 cols et 2 lignes.
( Je vais générer imgur du site web images. )

< Faisons public >
Suivez la photo ci-dessous.
publish_to_the_web_fr

Sélectionnez «Publier sur le Web» et appuyez sur «Démarrer la publication».
Section «Insérer un lien vers les données publiées» Voir.
publish_to_the_web_2_fr
Vous pouvez obtenir votre feuille de calcul en tant que page Web, HTML, CSV, TXT, PDF, ATOM, RSS, XLS et ODS. Si vous souhaitez synchroniser tableur pour votre site Web, vous devez choisir CSV, ATOM ou RSS. Ce sont au format facile pour la synchronisation. Lorsque vous choisissez l’un d’eux, vous pouvez trouver la fonction pour sélectionner la colonne et de la ligne. Cette fonction peut faire la taille de fichier par demande plus faible.

Si vous choisissez CSV, avant de choisir la gamme, s’il vous plaît sélectionner une feuille cible. Échantillon est comme la photo ci-dessous.
select_sheet_fr
Dans mon exemple, «A1» est-tête. Je veux obtenir 5 lignes maximum. J’ai donc mis la gamme «A2:A6».
select_cell_fr
Vous pouvez trouver «range=A2%3AA6» dans l’url. Si vous voulez ajouter la fonction de recherche de personnes à votre site Web, vous devriez changer dynamiquement le paramètre de «range» par Javascript.

< Est-il difficile? >
Ne vous inquiétez pas. J’ai écrit le code Javascript ici.
https://github.com/mecrazy/generateGoogleDriveUri
Ce script est compatible avec les formats CSV, ATOM et RSS. C’est seulement générateur URI. Il n’a pas l’analyseur. Si vous choisissez ATOM ou RSS, vous pouvez utiliser jQuery comme un analyseur.

S’il vous plaît utiliser «generateGoogleDriveUri.min.js» comme ci-dessous.

<!DOCTYPE html>
<html>
<head>
<title>Exemple de page</title>
<script src="js/generateGoogleDriveUri.min.js"></script>
<script type="text/javascript">
window.onload = function(){

//Objet coulée
var gduObj = new genGDU('Mettez un lien vers les données publiées ici');

//Générer URI
var atomUri = gduObj.genUri(
  'atom', // Je choisis le format ATOM.
  {
    startRow:2, //Lancer de la ligne 2
    startCol:1, //Lancer de col 1
    cols:1, //Couper 1 colonnes
    rows:5, //Couper 5 lignes par page
    page:1 //Obtenez page 1
  }
);

var html = '<a href="' + atomUri + '" target="_blank">' + atomUri + '</a>';
document.getElementById('sample').innerHTML = html;

}
</script>
</head>
<body id="sample"></body>
</html>

< Ajouter index.html et réglage Drive Notepad >
Après avoir ajouté lecteur Bloc-notes sur Chrome, vous pouvez trouver «Text Document» sur créer le menu de votre Google Drive.
add_index_fr
Si c’est votre première fois d’utiliser Drive Notepad, il vous sera demandé comme ci-dessous.
permission_01_en_us
Poussez «Login and/or grant app permissions…» et accepter la question ci-dessous.
permission_02_fr

S’il vous plaît changer le nom du fichier à «index.html». Après avoir enregistré le fichier, fermer l’onglet.
change_file_name_en_us

S’il vous plaît changer le réglage sur «Gérer les applications».
manage_apps_fr
S’il vous plaît vérifier «Utiliser cette application par défaut» de Drive Notepad ligne.
use_by_default_fr
Après cela, vous pouvez utiliser Drive Notepad comme les autres applications sur Google Drive.

< Modifier les paramètres de partage >
Sélectionnez votre dossier de fixer public.
Après cela, suivez la photo ci-dessous.
set_sharing_enabled_01_fr
Réglez «Public» cochée.
set_sharing_enabled_02_fr

< Préparation HTML, CSS, Javascript >
Utilisation Drive Notepad pour les préparer.
Ou modifier avec votre propre éditeur de texte et de les télécharger.
Ma position relative est comme ci-dessous.
my_public_tree_fr

Le lien ci-dessous est ma page web créée avec Google Feuille de calcul.
https://googledrive.com/host/0B2hsIY7iHEnLS290OHlmRkFmbU0/
Si vous voulez, s’il vous plaît utiliser des sources comme échantillon.

< Scénario supplémentaire >
J’ai développé imgur convertisseur d’URL pour ma page web. Si vous voulez, s’il vous plaît utiliser.
https://github.com/mecrazy/imgurUrlConverter