Apuntes para la administración de proyectos y desarrollo de TI: HTML

Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas

Google : Si tu web no es responsive o no tienes version mobile, desaparece

El 26 de febrero Google anunciaba a través de su Blog Oficial de Webmaster, en el post: Finding more mobile-friendly search results que las webs que no estén preparadas para móviles, el 21 de abril sufrirán una penalización. Esto tendrá un efecto claro en las búsquedas en PC, pero especialmente en móviles, donde aquellas no adaptadas perderán posicionamiento. Incluso, algunos ya afirman que esas webs podrían llegar a desaparecer para “google” si no se adaptan.

Por ello, ha empezado a enviar mensajes a los webmasters de webs que no están preparadas para el Día D: el 21 de abril, como en este ejemplo.

optimización móvil google webmaster tools aviso

Este anuncio sobre la necesidad de versiones responsive, no es muy llamativo, pues Google siempre ha valorado las webs que tengan una gran usabilidad, siendo reconocido que un factor SEO importante.

Sin embargo, lo llamativo de esta noticia, en la publicación del anuncio, por primera en la historia, Google ha reconocido oficialmente un factor para el posicionamiento, poniendo fecha específica para la actualización del algoritmo.

No solo un factor un posicionamiento SEO, si no casi que es obligatorio tener una web preparada para móviles, al arriesgarse a desaparecer de Google.

Google ha puesto a disposición de los webmasters, curiosos y demás, una herramienta que comprueba si la web esta optimizada para móviles, añadiendo simplemente la URL.

Landing Pages , que son y como funcionan / what is ?

Se llama landing page a la página que nos recibe en un sitio web, conocida también como página de aterrizaje. Más concretamente es la página de destino donde se envía al público que se obtiene con una campaña de marketing online y que nos ayuda a medir el impacto y éxito de dicha campaña.

¿Por qué usar Landing Pages?

Por ejemplo, si estamos enviando correos electrónicos a nuestros clientes sobre una promoción concreta (email marketing), lo ideal es crear una landing page para redireccionar a la gente que viene a través de ese correo. En esta página podemos añadir más características u opiniones del producto o servicio que se ha promocionado por mail.

Estas páginas que son una especie de “mini web” que se centran en el producto/servicio a promocionar ofreciendo información al respecto y lo más importante, una llamada a la acción muy clara que generalmente suele ser comprar o registrarse.

La landing page o páginas de aterrizaje son un buen instrumento para medir las campañas de marketing. Si no tenemos una landing page y todas las visitas nos llegan al Home no sabremos cuales han llegado a través de las distintas campañas de marketing online. De esta manera introduciendo la URL de nuestra lading en Google Analytics podemos hacer un seguimiento más exacto: si el producto/servicio promocionado es comprado a través de la landing o en la web, si nuestra campaña de PPC está funcionando…

¿Cómo es la landing page perfecta?

Para crear una landing pages perfectas es necesario cumplir una serie de premisas que suelen funcionar muy bien. Nada más llegar a la página de aterrizaje el usuario debe ver:

El título del producto/servicio .

Un subtítulo que complemente la información del título (opcional) .

Imagen del producto .

Descripción detallando los beneficios o características principales .

Llamada a la acción (compra ya, regístrate…) .

Todos estos aspectos deben ser claros antes de que el usuario tenga que hacer scroll hacia abajo para seguir viendo contenido. En un sólo vistazo el usuario debe conocer el producto, la información más relevante y la posibilidad de comprar, contratar o registrarse. Para explicar como es la anatomía de una buena landing page a mi me gusta mucho utilizar una infografía (visualmente se entiende mejor) que lo explica a la perfección.

crear un slide infinito HTML+CSS+ JQUERY

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$('#carousel_ul li:first').before($('#carousel_ul li:last'));
$('#right_scroll').click(function(){
var item_width = $('#carousel_ul li').outerWidth() + 10;
var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;
$('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){
$('#carousel_ul li:last').after($('#carousel_ul li:first'));
$('#carousel_ul').css({'left' : '0'});
});
});
$('#left_scroll').click(function(){
var item_width = $('#carousel_ul li').outerWidth() + 10; //704
var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
$('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){
$('#carousel_ul li:first').before($('#carousel_ul li:last'));
$('#carousel_ul').css({'left' : '0'});
});
});
});
</script>
<style type="text/css">

#carousel_inner {
float:left; /* important for inline positioning */
width:630px; /* important (this width = width of list item(including margin) * items shown */
overflow: hidden; /* important (hide the items outside the div) */
/* non-important styling bellow */
background: #F0F0F0;
}

#carousel_ul {
position:relative;
left:-210px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 0px;
width:9999px; /* important */
/* non-important styling bellow */
padding-bottom:10px;
}

#carousel_ul li{
float: left; /* important for inline positioning of the list items */
width:200px; /* fixed width, important */
/* just styling bellow*/
padding:0px;
height:110px;
background: #000000;
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}

#carousel_ul li img {
.margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/
/* styling */
cursor:pointer;
cursor: hand;
border:0px;
}
#left_scroll, #right_scroll{
float:left;
height:130px;
width:15px;
background: #C0C0C0;
}
#left_scroll img, #right_scroll img{
/*styling*/
cursor: pointer;
cursor: hand;
}
</style>
</head>
<body>
<div id='carousel_container'>
<div id='left_scroll'><img src='http://web.enavu.com/demos/left.png' /></div>
<div id='carousel_inner'>
<ul id='carousel_ul'>
<li><a href='#'><img src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT0-t7aRQx24Y9VRys7mW2C3asKXgonkCVMisvPUXqAeE-MhIBgWw' /></a></li>
<li><a href='#'><img src='http://www.tengopaginaweb.com/apellidobeltri/Escudo%20Belltree.gif' /></a></li>
<li><a href='#'><img src='http://t3.gstatic.com/images?q=tbn:ANd9GcRHMKEj0It-nMhbdHkpteYv42KFsbhsL1Up0UyEnj5ZxMcgSaUjyFg294jj' /></a></li>
<li><a href='#'><img src='http://imagenesfotos.com/wp-content/2009/10/escudos11.JPG' /></a></li>
<li><a href='#'><img src='http://imagenesfotos.com/wp-content/2009/10/escudos11.JPG' /></a></li>
</ul>
</div>
<div id='right_scroll'><img src='http://web.enavu.com/demos/right.png' /></div>
</div>
</body>
</html>

crear una aplicacion en Facebook y subir foto con php

<?php
/**
datos para crear con tu cuenta de facebook un APP:

Display Name: NOMBREAPLIACION
Namespace: ESPACIODENOMBRE
Correo electrónico de contacto: XXX
App Domains: vacio
Categoría: otra

Selecciona como tu aplicación se intrega con Facebook
Aplicación en Facebook
Canvas Page: http://apps.facebook.com/ESPACIODENOMBRE
Canvas URL: http://urldetuphp/carpeta/
URL segura de la página principal de la aplicación: https://urldetuphp/carpeta/

*/

// URL de la aplicación
$urlApp = "http://apps.facebook.comESPACIODENOMBRE/";
// ID y Secret ID de la aplicación
$appId = "XXXXXXXXXXX";
$secret = "XXXXXXXXXXXXXXXXXXXXX";
//Llamada al Facebook SDK
include_once "facebook.php";
// Instanciamos el objeto Facebook
$facebook = new Facebook(array('appId' => $appId,
'secret' => $secret,
'cookie' => true));
// Obtenemos una session
$user = $facebook->getUser();
if (!$user){
// Si el usuario no está autentificado crea una URL para hacerlo.
// Se usa 'scope' para pedir permisos separados por coma.
// Se usa 'redirect_uri' para redireccionar a esa URL despues de la acción del usuario
$loginUrl = $facebook->getLoginUrl(
array(
'scope' => 'read_stream,publish_stream,photo_upload,user_photos,user_photo_video_tags',
'redirect_uri' => $urlApp
)
);
echo "<script type=\"text/javascript\">top.location.href = '$loginUrl';</script>";
} else {

//Le indicamos a facebook que vamos a subir un archivo a su plataforma.
$facebook->setFileUploadSupport(true);
//Indicamos que vamos a entrar en la seccion albums del usuario
$albums = $facebook->api('/me/albums');
//Navegamos dentro de los albumes para encontrar alguno con nombre 'profile'
$album_uid = "";
foreach ($albums['data'] as $album) {
if($album['type'] == 'wall'){//si encontramos algun album con nombre "muro", tomamos su identificador para subir nuestra imagen en este album
$album_uid = $album['id'];
//echo "wall id ".$album_uid;
}
}
if($album_uid == ""){
//echo "no existe el albun ";
/***********************************************/
//SI NO EXISTE EL ALBUN CREAMOS UNO
//Componemos nuestro array con los datos de nuestro album nombre y descripcion.
$album_details = array(
'message'=> 'mi descripcion ',
'name'=> 'albun q yo quiero'
);
//Indicamos a facebook que vamos a crear un album
$create_album = $facebook->api('/me/albums', 'post', $album_details);
//Tomamos el identificador del album creado.
$album_uid = $create_album['id'];
/***********************************************/
}

//Componemos el array que tendra los datos de nuestra imagen mensaje, nombre, path donde se encuentra la imagen album donde lo vamos a depositar.
$photo_details = array(
'message'=> 'Photo message'
);
$file = 'fotoesperada.jpg';
$photo_details['image'] = '@' . realpath($file);
//Luego de esto enviamos a $facebook los datos de nuestra imagen
$upload_photo = $facebook->api('/'.$album_uid.'/photos', 'post', $photo_details);
echo '<a href="http://www.facebook.com/photo.php?fbid='.$upload_photo['id'].'" target="_blank">Mira la foto aqui.</a>';
// Hasta aquí el usuario tendría que estar autentificado con la aplicación.
// $yo = $facebook->api('/me');
// print_r($yo);
}
?>

Validaciones para un formulario HTML + JQUERY

/*************/

jscript de validaciones de campos para un formulario

var checkForm = function(id,iderror){

var msgerror = '';
var msgerror_require = '(*) Campo Requerido';
var msgerror_emailvalid = 'El E-mail es incorrecto';
var msgerror_numeric = 'Debe ingresar solo números';

var bform = true;
var tform = '#'+id;

$(tform+' .require').each(function(i){

if (this.value=='') {
$(this).addClass('error');
bform = false;
msgerror = msgerror_require;
} else {
$(this).removeClass('error');
}
});

$(tform+' .emailvalid').each(function(i){
var filtro = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (!filtro.test(this.value)){
$(this).addClass('error');
bform = false;
msgerror = msgerror_emailvalid;
} else {
$(this).removeClass('error');
}
});

$(tform+' .numeric').each(function(i){
var strChars = "0123456789.-";
for (i = 0; i <this.value.length; i++) {
strChar = this.value.charAt(i);
if (strChars.indexOf(strChar) == -1) {
$(this).addClass('error');
bform = false;
msgerror = msgerror_numeric;
} else {
$(this).removeClass('error');
}
}
});

$(tform+' .check').each(function(i){
var checkeado=$('#checkbox').attr('checked');
if(!checkeado) {
$(this).addClass('error');
bform = false;
msgerror += msgerror_term;
agregar_Error();
} else {
$(this).removeClass('error');
quitar_Error();
}

});

if (bform == true) {

return true;
} else {
$('#'+iderror).html(msgerror).show();

return false;
}
}

function divError(form,p){
var msg_error = '(*) Debe completar los campos requeridos ';
$$('form#'+form+' .msgerror').each(function(el){
if (p=='hide') {
el.hide();
}else{
el.update(msg_error);
el.show();
}
});
}

/**********************************************//
en el html

<form action="[ACTION]" method="post" onsubmit="return checkForm('form1','divErr');" id="form1" name="form1">

y un div

<div id="divErr" style="display:none"></div>

no olvidar poner en cada imput la clase "require" o el que definimos en el jscript

Cuenta regresiva con PHP, JQUERY y HTML

<?php
/**VALORES */
$year = '2012';
$month= '09';
$day = '30';
$hour = '00';
$minute = '00';
$second = '00';
//function cuenta_regresiva($year, $month, $day, $hour, $minute, $second)
//{
global $return;
global $countdown_date;
$countdown_date = mktime($hour, $minute, $second, $month, $day, $year);
$today = time();
$diff = $countdown_date - $today;
if ($diff < 0)$diff = 0;
$dl = floor($diff/60/60/24);
$hl = floor(($diff - $dl*60*60*24)/60/60);
$ml = floor(($diff - $dl*60*60*24 - $hl*60*60)/60);
$sl = floor(($diff - $dl*60*60*24 - $hl*60*60 - $ml*60));
// OUTPUT
$resultado = "\n<br>Today's date ".date("F j, Y, g:i:s A")."<br/>";
$resultado .= "Countdown date ".date("F j, Y, g:i:s A",$countdown_date)."<br/>";
$resultado .= "\n<br>";
//$return = array($dl, $hl, $ml, $sl);
//return $return;
//}
//cuenta_regresiva($year, $month, $day, $hour, $minute, $second);
//list($dl,$hl,$ml,$sl) = $return;

$resultado .= "faltan ".$dl." dias ".$hl." horas ".$ml." minutos ".$sl." segundos "."\n<br>";
echo $resultado;

?>

/**************************/
.js

setInterval("tiempo()",1000); // Ejecuto la acción cada segundo

function tiempo(){
$.post("tiempo.php", function(data){
$("#tiempo").html(data);
});

}

/*****HTML ************************/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>cuenta regresiva</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="tmp/js/functions.js"></script>
<script type="text/javascript" src="tmp/js/jquery-1.7.1.min.js"></script>
</head>

<body>
cuenta regresiva
<div id="tiempo" ><div>
</body>

</html>
/********************************************/