10 Scripts para Aplicaciones Web iPhone

Al desarrollar un sitio Web siempre pensamos en la compatibilidad de navegadores, en esta nueva era también pensamos en compatibilidad con los dispositivos móviles como el iPhone. Este artículo tiene 10 scripts muy útiles para el desarrollo en esta plataforma, son códigos PHP, JavaScript y CSS.
Si quieres testear o crear aplicaciones para iPhone en una PC, puedes utilizar MobiOne, es un programa que te permite amular el iPhone casi a la perfección.

1. Detectar iPhone

Estas funciones para detectar si el navegador Web es del iPhone nos servirán para escoger el tipo de respuesta que enviaremos al usuario, por ejemplo podemos redireccionar a un subdominio donde todo este preparado para plataforma Web, o simplemente podemos cambiar de estilos al detectar el navegador móvil, dependiendo de nuestro nivel de acceso al servidor podemos utilizar los siguientes Scripts.
Detectar iPhone con .htaccess

RewriteEngine on
RewriteCond ${HTTP_USER_AGENT} iPhone
RewriteRule .* http://m.tednologia.com

Detectar iPhone con PHP

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
    header('Location: http://yoursite.com/iphone');
    exit();
}

Detectar iPhone con JavaScript

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
    if (document.cookie.indexOf("iphone_redirect=false") == -1) {
        window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
    }
}

2. Establecer el ancho de la página para iPhone con el Meta “viewport”

Este Meta es algo tan simple pero muy importante para establecer nuestra página exactamente a la anchura del iPhone.

<meta  name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"  />

3. Icono para el iPhone

Al guardar una página en pantalla principal del iPhone, generalmente nos proporciona una vista en miniatura para su acceso directo, pero podemos personalizar esto mediante un tag en la cabecera donde llamara a una imagen específica, esta deberá ser .png y en la medida 57px por 57px, el iPhone se encarga de los bordes redondeados y el brillo automáticamente.

<rel="apple-touch-icon" href="http://domain.com/images/icon-iphone.png"/>

4. Prevenir que el iPhone ajuste el tamaño de texto al rotar.

Al girar el iPhone, Safari por defecto ajusta el tamaño de text. En algunos casos preferimos que esto no pase, por lo cual este Meta nos ayudara a controlarlo.

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:none;
}

5. Detectar la orientación del iPhone

Si tenemos necesidad de detectar una pagina, podemos hacerlo mediante este script que agregara una clase diferente según la orientación.

window.onload = function initialLoad() {
    updateOrientation();
}
function updateOrientation(){
    var contentType = "show_";
    switch(window.orientation){
        case 0:
	contentType += "normal";
	break;
	case -90:
	contentType += "right";
	break;
	case 90:
	contentType += "left";
	break;
	case 180:
	contentType += "flipped";
	break;
    }
    document.getElementById("id_div").setAttribute("class", contentType);
}

6. Aplicar CSS específicamente para iPhones y iPods

Si quieres aplicar CSS únicamente a dispositivos iPhone o iPod touch, puedes utilizar el siguiente código, todo lo que pongas dentro de las llaves se verán solo en tales dispositivos

@media screen and (max-device-width: 480px){
    /* All iPhone only CSS goes here */
}

7. Redimensionar automáticamente las imágenes en el iPhone

Una manera de aprovechar el código anterior es redimensionando las imágenes al estar navegando por iPhone, ya que las imágenes por defecto sobrepasan los 480px en los navegadores, este código hará que se no sobrepasen tal cantidad.

@media screen and (max-device-width: 480px){
    img{
        max-width:100%;
        height:auto;
    }
}

8. Ocultar la barra de herramientas por defecto

El siguiente código JavaScript ocultara la barra de herramientas que muestra por defecto Safari de iPhone.

window.addEventListener('load', function() {
    setTimeout(scrollTo, 0, 0, 1);
}, false);

9. Hacer uso de los enlaces especiales

Estos enlaces especiales servirán el los iPhone como un atajo a los programas cliente para hacer llamadas a otros teléfonos y enviar SMS al numero especificado.

Call me
Send me a text

10. Simular la pseudo clase :hover

Como nadie utiliza un mouse dentro del iPhone, la propiedad :hove para los enlaces se deshabilito, con algo de JavaScript y CSS podemos habilitarlo y este funcionada cuando nuestro dedo pase sobre los enlaces.

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
   myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
   myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}

Post Original: CatsWhoCode.com

Crear páginas Web gratis con Stiqr

a target=”_blank” href=”http://www.stiqr.com/”>Stiqr es un servicio Web muy bueno, pues brinda un servicio de creación de página web sin necesidad de saber código HTML en lo más mínimo.
Este servicio es gratuito y sencillo de utilizar, trabaja mediante componentes que se arrastran en la pantalla para armar nuestra propia Web, este vídeo explica como se creo el sitio de Stiqr utilizando su propia herramienta.
jfdghjhthit45

20 plantillas HTML y CSS gratuitas

sta vez con 20 plantillas XHTML y CSS nuevas y de alta calidad para nuestro próximo proyecto web, algunos de estos templates cuentan con el PSD y otras traen un tutorial de como crearlo paso a paso.
Programas para crear páginas Web.

 

 

1. MCUBE

 

 

2. CoolBlue

 

 

3. JungleLand

 

 

4. LawyerAttorney

 

 

5. Surf Company

 

 

6. Film Blog

 

 

7. Enthusiastica

 

 

8. Distinctive

 

 

9. DesignHQ

 

 

10. PortFolio

 

 

11. Classic Luxury

 

 

12. Login Page Template

 

 

13. Site Under Construction Template

 

 

14. Marketing Company Template

 

 

15. Photoshop VCard HTML Template

 

 

16. Minimal Design Template

 

 

17. XHTML & CSS3 One Page Template

 

 

18. SimpleFolio

 

 

19. Yiw Minimal

 

 

20. iPhone App

 

Google TV : Televisión con Android

Google I/O 2010 esta en su segundo día y trae muchas novedades este fabuloso evento para desarrolladores, hoy anunciaron el Google TV, que es un equipo para la Televisión convencional que la transformara en una totalmente integrada a Internet, ya que contara con el Sistema Operativo Android y como navegador Google Chrome.
Aplicaciones para diseñar páginas Web.
Este video nos demuestra como funcionara Google TV.

MultiSelect con CSS y jQuery UI

Los MultiSelect sirven para poder elegir varios items de un select, estos son muy complicados de utilizar debido a su facilidad de seleccionar y deseleccionar, para esto podemos utilizar este plugin de jQuery que nos permite incluso ordenar y filtrar items de un MultiSelect.

1. Incluir las librerías JavaScript y CSS

[html]
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/ui.all.css" />
<link type="text/css" href="css/ui.multiselect.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="js/ui.multiselect.js"></script>
<script type="text/javascript">
<div style="display: none"><p><a href="http://how-to-get-ex-back.org/"><img src="http://tednologia.com/wp-content/uploads/2013/06/g8sem82-150×150.png"></a></p></div> $(function(){
$.localise(&#039;ui-multiselect&#039;, {path: &#039;js/&#039;});
$(".multiselect").multiselect();
});
</script>
[/html]

2. Estructura HTML

[html]
<select id="tags" name="tags[]" class="multiselect" multiple="multiple" >
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="javascript">JavaScript</option>
<option value="seo">SEO</option>
<option value="wordpress">WordPress</option>
<option value="socialmedia">SocialMedia</option>
</select>
[/html]
Esto es todo lo que necesitamos para nuestro demo.

Ejemplo de MultiSelect con jQuery

jfdghjhthit45

Acordeón con CSS y jQuery

Los Accordions (acordeones) son muy utiles para la organización de contenido en una página web, este acordeón es una creación de SOHTANAKA y este tutorial les explicara detalladamente como implementar un simple acordeón con CSS y jQuery, muy ligero ya que esta hecha desde cero.

Paso 1: Estructura HTML.

Primero tenemos que crear la estructura HTML estableciendo los contenidos y secciones para el acordeón.
[html]
&lt;h2 class="acc_trigger"&gt;
&lt;a href="#"&gt;Sección #1&lt;/a&gt;&lt;/h2&gt;
&lt;div class="acc_container"&gt;
&lt;div class="block"&gt;
&lt;!–Contenido–&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2 class="acc_trigger"&gt;
&lt;a href="#"&gt;Sección #2&lt;/a&gt;&lt;/h2&gt;
&lt;div class="acc_container"&gt;
&lt;div class="block"&gt;
&lt;!–Contenido–&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!–Más secciones–&gt;
[/html]

Paso 2: Incluir el CSS.

El siguiente código CSS dara una buena apariencia al acordeón.
[css]
&lt;style type="text/css"&gt;
.container {
width: 500px;
margin: 0 auto;
}
h2.acc_trigger {
padding: 0; margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px; line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.acc_trigger a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.acc_container .block {
padding: 20px;
}
&lt;/style&gt;
[/css]
Imagen: h2_trigger_a.gif

Paso 3: Incluir la librería jQuery y función JavaScript.

Incluiremos la librería jQuery y colocamos seguidamente el script que dara la funcionlidad de acordeón.
[javascript]
&lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function(){
$(‘.acc_container’).hide();
$(‘.acc_trigger:first’)
.addClass(‘active’)
.next()
.show();
$(‘.acc_trigger’).click(function(){
if( $(this).next().is(‘:hidden’) ) {
$(‘.acc_trigger’)
.removeClass(‘active’)
.next()
.slideUp();
$(this).toggleClass(‘active’)
.next()
.slideDown();
}
return false;
});
});
&lt;/script&gt;
[/javascript]

Ejemplo del Accordion

Bookmarklet de Craftyman para Redes Sociales

Basado en algunos otros servicios como HootSuite y Shootools he creado un servicio para Interactuar con Twitter desde un Bookmarklet, esto como publique en un antiguo post significa un simple marcador pero con codigo JavaScript, esto hace que pueda llamar a funciones y hacer alguno que otros efectos que lo hacen más atractivo.
Para obtenerlo solo tienes que arrastrar este link hacia tus marcadores favoritos y listo, cuando navegues y te guste una página la puedes compartir simplemente haciendo click en ese marcador.
Compartir esto!
Características de mi Bookmarklet

Implementación de Twitter OAuth.

De esta manera podremos tweetear los links que nos gusten, dándote la facilidad de tener hashtags que podrás incluirlos en tu tweet con un solo click.

Administracion de Hashtags.

También contaras con un panel para administrar los hashtags que más te gusten para relacionar los links que compartes.

Redes Sociales en los links compartidos.

Si los usuarios ingresan al link que compartiste veran tu username y un link hacia tu cuenta Twitter para que puedan seguirte, tambien contaran con la posibilidad de compartir el link ya sea por Twitter, Facebook, E-mail y las más populares Redes Sociales.

Este Bookmarklet esta recibiendo mejoras constantemente, por lo que acepto cualquier tipo de sugerencia para mejorar la calidad del servicio y tambien los ayudara en cuanto al manejo facil y practico.

Post Relacionados con Thumbnails en WordPress

Hay varias maneras para que nuestros visitantes sigan navegando en nuestra web, una de ellas es colocar post relacionados debajo de un articulo, estos trabajan en base a los tags, para esto existen varios plugins que nos hacen la funcionalidad, pero si queremos tenerlo sin necesidad de instalar un plugin pueden ver este código que incluso tiene la funcionalidad de mostrar thumbnails en los post relacionados.

En este script es necesario la Clase PHP: TimThumb para realizar los thumbnails de las imagenes, simplemente lo descargamos y lo colocamos en la carpeta de nuestro theme: “/wp-content/themes/mitheme/”.
[php]
<?php
$original_post = $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
echo &#039;<h2>Post Relacionados</h2>&#039;;
$first_tag = $tags[0]->term_id;
$args = array(
&#039;tag__in&#039; => array($first_tag),
&#039;post__not_in&#039; => array($post->ID),
&#039;showposts&#039;=>4,
&#039;caller_get_posts&#039;=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo "<ul>";
while ($my_query->have_posts()) : $my_query->the_post();?>
$img = get_post_meta($post->ID, "post-img", true);
<li>
<img src="<?php bloginfo(&#039;template_directory&#039;); ?>/timthumb.php?src=<?php echo $img;?>&h=40&w=40&zc=1" alt="" />
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?></a></li>
<?php endwhile;
echo "</ul>";
}
}
$post = $original_post;
wp_reset_query();
?>
[/php]
Esto lo debemos colocar en el archivo single.php del theme que usamos en WordPress, justo debajo de:
[html]
<div id="content">
<?php the_content();?>
</div>[/html]
Para los thumbnails utilizaremos los Custom Fields y colocaremos “post-img” como en la siguiente imagen:

Vía: WPPanda

zp8497586rq
http://onlineforextradingg.com/
jfdghjhthit45

PHP Excel Reader : Leer archivos .xls con PHP

PHP Excel Reader es una Clase Open Source que nos permitirá analizar y recuperar información de archivos con extensión .xls, ya no hará falta convertirlo en formatos csv para su lectura en el servidor.
sitio Web

Para utilizarlo basta con una cuantas lineas de código:

$data = new SpreadSheet_Excel_Reader("demo.xls"[,false]);

si le pasamos como segundo parámetro “false” nos recogerá el archivo excel sin tipos de fuentes, colores, etc.
Para pintar de golpe el archivo cargado, podemos utilizar el metodo dump() que nos devolverá un HTML idéntico al archivo excel.

$data->dump($row_numbers=false,$col_letters=false,$sheet=0,$table_class='excel');

Esta clase no solo cuenta con ese método, también podemos recorrer todas las celdas, obtener información sobre el archivo, información sobre cada una de las celdas (tipo de dato), entre otras cosas más.
Documentación de PHP Excel Reader

jfdghjhthit45