communication, design, musique and much more !

Coda ajouter la syntaxe CodeIgniter

Posted: May 5th, 2010 | Author: Fabien | Filed under: Développement, Intégration, Oxynel | Tags: , , , , | 1 Comment »

Pour ajouter la syntaxe du framework Codeigniter dans Coda Panic, rien de plus simple, il vous suffit de suivre les informations ci dessous et de réaliser cela étape par étape.

  1. Télécharger le ZIP contenant la syntaxe sur le site SubEthaEdit pour CodeIgniter
  2. Dezipper votre fichier Codeigniter.mode.zip
  3. Placer le fichier Codeigniter.mode dans le répertoire /Users/YOURUSERNAME/Library/Application Support/Coda/Modes/
  4. Lancer votre logiciel coda, puis modifier la syntaxe de votre fichier grâce au menu Text -> Syntax mode -> Codeigniter
  5. Et voila ! Vous avez accès à toutes les fonctions de CodeIgniter directement dans Coda.

Pour aller plus loin : Coda (Éditeur pour le développement intégrant SVN et FTP de vos fichiers) – CodeIgniter (Framework de développement PHP)

Partager:
  • Print
  • Twitter
  • Facebook
  • Scoopeo
  • Yahoo! Buzz

Un menu horizontal CSS

Posted: January 9th, 2010 | Author: Fabien | Filed under: Intégration | Tags: , , , , | 1 Comment »

Ce menu horizontal est basé sur des propriétés CSS (avec la pseudo-classe :hover). Il ne fonctionne sur des navigateurs récents (exit IE6). Les rubriques et les sous-rubriques s’adaptent automatiquement en largeur et elles sont fonction de leur contenu. En survol d’une sous rubrique, la rubrique principale reste sélectionnée.

Code XHTML

<ul class="menu">
	<li><a href="">Qui sommes-nous ?</a>
		<ul>
			<li><a href="">Historique</a></li>
			<li><a href="">Société</a></li>
			<li><a href="">Recrutement</a></li>
			<li><a href="">Chiffres</a></li>
		</ul>
	</li>
	<li><a href="">Métiers</a>
		<ul>
			<li><a href="">Conseil</a></li>
			<li><a href="">Graphisme</a></li>
			<li><a href="">Développement</a></li>
			<li><a href="">Marketing</a></li>
		</ul>
	</li>
	<li><a href="">Solutions</a>
		<ul>
			<li><a href="">OxyCMS</a></li>
			<li><a href="">OxyMUTUA</a></li>
			<li><a href="">OxyNDD</a></li>
			<li><a href="">OxyPRINT</a></li>
		</ul>
	</li>
	<li><a href="">Support</a>
		<ul>
			<li><a href="">Compte client</a></li>
			<li><a href="">S'inscrire</a></li>
		</ul>
	</li>
	<li><a href="">Contact</a></li>
</ul>

Code feuille de style CSS

La liste à puces verticale va être transformer en une liste horizontale.

ul.menu {
	width: auto;
	height: 35px;
	line-height: 35px;
}
ul.menu li {
	float: left;
	height: 35px;
	width: auto;
}
ul.menu li a {
padding: 0px 10px 0px 10px;
	color: #FFFFFF;
	background: #000000;
	font-weight: bold;
	margin: 0;
	display: block;
}
ul.menu li a:hover {
	color: #FFFFFF;
	background: #ed7928;
}

Pour faire disparaître les sous-rubriques, il suffit d’ajouter display:none à la sous-rubrique de la classe menu :

ul.menu li ul {
	display:none; /* masques les sous-rubriques */
	width: auto; /* largeur automatique */
	/* remise à 0 des valeurs du parent */
	margin: 0;
	padding: 0;
	/* end */
}

Maintenant, il nous suffit de mettre les sous rubriques en vertical car elles ont hérités de leur parent une mise en forme horizontale et de faire apparaître les sous-rubriques en survol de la rubrique.

Sous-rubrique en vertical

ul.menu li:hover ul {
	display:block;
}
ul.menu li:hover ul li {
	float:none;
	/* remise à 0 des valeurs du parent */
	width: inherit;
	margin: 0;
}

En se déroulant, les sous rubriques sont en dessous et décalé. Pour cela il faut attribuer une position absolue aux sous-rubrique.

ul.menu li ul {
	position:absolute;
	width:auto; /* largeur automatique */
}

Votre menu est quasiment finalisé, il ne vous reste plus qu’à avoir un survol qui reste actif sur la rubrique. Il faut ajouter “ul.menu li:hover > a” à la déclaration “ul.menu li a:hover” comme sur l’exemple suivant :

ul.menu li a:hover, ul.menu li:hover > a {
	color: #FFFFFF;
	background: #ed7928;
}

Votre feuille de style finale est la suivante :

body {
	font-family: Arial;
	font: 12px;
}
ul.menu {
	width: auto;
	height: 35px;
	line-height: 35px;
}
ul.menu li {
	float: left;
	height: 35px;
	width: auto;
}
ul.menu li a {
	padding: 0px 10px 0px 10px;
	color: #FFFFFF;
	background: #000000;
	font-weight: bold;
	margin: 0;
	display: block;
}
ul.menu li a:hover, ul.menu li:hover > a {
	color: #FFFFFF;
	background: #ed7928;
}
ul.menu li ul {
	display:none; /* masques les sous-rubriques */
	width: auto; /* largeur automatique */
	/* remise à 0 des valeurs du parent */
	margin: 0;
	padding: 0;
	/* end */
}
ul.menu li ul li a {
	background: #ed7928;
	color: #FFFFFF;
	display: block;
	padding: 0px 10px 0px 10px;
	margin: 0;
}
ul.menu li ul li a:hover {
	background: #ffebd3;
	color: #ed7928;
}
ul.menu li:hover ul {
	display:block;
}
ul.menu li:hover ul li {
	float:none;
	/* remise à 0 des valeurs du parent */
	width: inherit;
	margin: 0;
}
ul.menu li ul {
	position:absolute;
	width:auto; /* largeur automatique */
}

Voir le résultat et téléchargement

Compatible avec :

  • Firefox 3
  • Firefox 3.5
  • IE 7
  • IE 8
  • Chrome
  • Safari 3
  • Safari 4

Note :

Nous avons du ajouté un div avant chaque lien afin de permettre à IE7 d’interpréter correctement le menu sans bug d’affichage.

Partager:
  • Print
  • Twitter
  • Facebook
  • Scoopeo
  • Yahoo! Buzz

Vol5 – AppBooks – pour vos croquis d’interface iPhone

Posted: December 18th, 2009 | Author: Fabien | Filed under: Design, Intégration | Tags: , , , | 2 Comments »

about_header

Vol5 est une petite entreprise qui a eu une bonne idée. Basée en Californie, Vol5 a pour objectif de faire de belle chose pour des designers. Leur premier projet de Vol5 (qui se prononce Volume five) est AppBooks, un carnet papier 100% recyclé pour vos croquis d’interface iPhone.

appbooks_foursquare

Pour en savoir plus : Vol5 sur Twitter & www.vol5.com

Partager:
  • Print
  • Twitter
  • Facebook
  • Scoopeo
  • Yahoo! Buzz

Un plug in CSS pour Coda

Posted: November 8th, 2009 | Author: Fabien | Filed under: Développement, Intégration, Logiciel os X | Tags: , , , | 1 Comment »

Code est une application pour développeur et propose d’étendre les fonctionnalités via les extensions. CSS Tools pour Coda permet de compresser  ou decompresser vos fichiers CSS.

CSS Tools plugin for Coda sur Viddler

Télécharger CSS Tools

  • Version 1.0.1 : 4 février 2009 – Correction des erreurs d’execution de commande.
  • Version 1.0 : 15 décembre – Première réalisation.

via CSS Tools Coda Plugin sur mondaybynoon.com

Partager:
  • Print
  • Twitter
  • Facebook
  • Scoopeo
  • Yahoo! Buzz

Faites des graphiques en vectoriel sur vos sites Web !

Posted: November 6th, 2009 | Author: Fabien | Filed under: Développement, Intégration | Tags: , , , , , | 1 Comment »

Raphaël est une librairie Javascript de 51kb qui simplifie considérablement votre travail pour la réalisation de graphique vectoriel sur vos sites Internet. Camembert, histogramme sont désormais accessible simplement et facilement.

Raphaël utilise SVG W3C recommandation et VML pour créer les graphiques vectoriels dont vous avez toujours rêvé. Cette librairie est supportée par Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

raphael-javascript-library

Pour en savoir plus et voir des démos : raphaeljs.com

Partager:
  • Print
  • Twitter
  • Facebook
  • Scoopeo
  • Yahoo! Buzz

L’alternative à Google Maps s’appelle Cloudmade

Posted: November 2nd, 2009 | Author: Fabien | Filed under: Développement, Intégration | Tags: , , | 2 Comments »

cloudmade

CloudMade en synergie avec OpenStreetMap, vous propose un projet de carte communautaire libre et gratuite. Ayant pour objectif de démocratiser les informations géographiques, CloudMade met a disposition des outils et des APIs pour les développeurs qui souhaitent créer des expériences riches et interactives, mais aussi des applications mobiles.

Pour en savoir plus : www.cloudmade.com

Partager:
  • Print
  • Twitter
  • Facebook
  • Scoopeo
  • Yahoo! Buzz

Les liens techniques de la fin de semaine

Posted: October 30th, 2009 | Author: Fabien | Filed under: Développement, Intégration | 2 Comments »

Merci à Sam, Philipp et nos following sur Twitter.com/Oxynel pour ces quelques liens.

  1. 35 More Useful jQuery Plugins and Techniques
  2. MoTip 2.2
  3. AJAX FANCY CAPTCHA – JQUERY PLUGIN
  4. Uniform
  5. HTML 5 se dévoile
  6. Modern CSS layout
Partager:
  • Print
  • Twitter
  • Facebook
  • Scoopeo
  • Yahoo! Buzz

Top 5 des applications iPhone pour développeur web

Posted: October 14th, 2009 | Author: Fabien | Filed under: Développement, Intégration | Tags: , , , , | 1 Comment »

Things iPhone

things-touch-screenshot-01

Things est un gestionnaire de tâche simple et sans difficulté d’utilisation. Vous n’oublierez plus rien ! Il est synchronisable avec sa version application pour os X et vous permet de partager des tâches.

Pour en savoir plus : culturedcode.com/things/iphone

iStorage

Capture d’écran 2009-10-14 à 09.54.35

Cette application permet de connecter votre iPhone à des services FTP, Web-DAV ou MobileMe pour télécharger des fichiers ou travailler en parallèle. iStorage vous permet de télécharger, téléderverser de votre iPhone vers votre site web, partager des fichiers, editer des fichiers textes ou images, lire des vidéos.

Pour en savoir plus : istorageapp.com

Mobile Colloquy

irc

Colloquy pour iPhone et iPod touch est le plus populaire des client IRC. Cette application vous permettra de poster et de lire les messages mIRC en couleur, de rejoindre plusieurs chat rooms, de recevoir des notifications, …

Pour en savoir plus : colloquy.mobi

iSSH

ssh

Emulateur de terminal pour iPhone, iSSH propose l’ensemble des services SSH et telnet pour administrer un serveur avec un tunnel X serveur et VNC client. De plus cette application supporte le copier / coller de la version 3.0 de l’iPhone.

Pour en savoir plus : www.zinger-soft.com

Analytics App

analytics

Analytics App est une application qui permet de se connecter à Google Analytics et d’accèder immédiatement à l’ensemble des statistiques et rapports. Sur la route, dans une réunion vous pouvez avoir accès à vos statistiques. C’est aussi simple que sur votre navigateur de bureau !

Pour en savoir plus : analyticsapp.com

Partager:
  • Print
  • Twitter
  • Facebook
  • Scoopeo
  • Yahoo! Buzz

Google : n’utilise pas les métas mots clés pour le classement

Posted: October 8th, 2009 | Author: Fabien | Filed under: Développement, Intégration | Tags: , , | 1 Comment »

Google continue de lever le voile sur ses méthodes de classement et confirme que le méta tag “Keywords” n’est plus utilisé pour le classement des résultats de recherche. En effet, souvent détourné et non visible pour le visiteur, les ingénieurs ont préférés l’exclure. Néanmoins le post de Google confirme continuer à utiliser certains méta tag comme “Description” dans les résultats de recherche et dans l’affichage du résumé de résultat.

Ce point n’avait jamais été officiellement expliciter, c’est désormais chose faite !

Pour en savoir plus : Google does not use keywords meta tag

Partager:
  • Print
  • Twitter
  • Facebook
  • Scoopeo
  • Yahoo! Buzz

Construire une iPhone apps avec html, css et javascript

Posted: October 4th, 2009 | Author: Fabien | Filed under: Communication, Développement, Intégration, Référencement | Tags: , , , , , | 3 Comments »

cat

Web Designers et développeurs ne sont pas obligés de connaître Cocoa Objective-C pour construire une application iPhone. La maison d’édition O’Reilly via son laboratoire propose un ouvrage open source sur la construction et la réalisation d’application iPhone apps (application web). L’auteur Jonathan Stark qui a écrit ce livre, dresse ici une excellente documentation. Il suffit d’avoir pour connaissance, html, css et Javascript. Dans cet ouvrage vous découvrirez toutes les astuces et la méthodes pour développer pas à pas votre application dans les règles de l’art. N’oubliez pas que notre agence de communication a réalisé 3 sites web iPhone : Oxynel iPhone site internet, My Suite Appart-Hôtels iPhone Réservation, Stéphane Rolland Haute Couture.

Pour en savoir plus : building-iphone-apps.labs.oreilly.com et disponible en version papier sur la boutique O’Reilly.

(via woork : Building iPhone Apps with HTML, CSS, and JavaScript)

Partager:
  • Print
  • Twitter
  • Facebook
  • Scoopeo
  • Yahoo! Buzz