domingo, 17 de enero de 2016

CALENDARIO DATEPICKER BOOTSTRAP


Many times we do not understand because they understand more about programming codes do not want to share the easiest way how to do things. 
This time Matt looking me programming code to make a calendar datepicker to bootstrap , I found many codes but incomplete and that did not work or if true had to complete with things that were little understood , is somewhat annoying but anyway is part of what you have to go when you want to learn.

Mucha veces no entendemos porque los que comprenden mas acerca de los códigos de programación no quieren compartir la manera mas sencilla la forma de hacer las cosas. En esta oportunidad me mate buscando códigos de programación para hacer un calendar datepicker para bootstrap, encontré muchos códigos pero incompletos y que no funcionaban o de ser cierto había que completarlo con cosas que eran poco entendible, es algo molestoso pero en fin es parte de lo que se tiene que pasar cuando se quiere aprender.

The easiest way to make a datepicker with less code as possible and doing so in different languages ​​by simply changing the language file more managed.

La forma mas sencilla de hacer un datepicker con el menos codigo posible y con la posibilidad de hacerlo en idiomas distintos cambiando simplemente el archivo de idioma que mas manejen.


well see the file Index.html code shown in plain text :
bien veamos el codigo del file  Index.html  mostrado en texto plano:

<Code>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="datepickeer bootstrap"/>
<META name="Copyright" content="AlexDelgadoAltamirano">
<meta name="robots" content="all" />
<title>Calendario</title>

        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/bootstrap-datepicker.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/bootstrap-datepicker.es.min.js"></script>
</head>
<body>

<input type="text" id="calendario">
<script type="text/javascript">
$(function(){
$('#calendario').datepicker({
format: "dd-mm-yyyy",
language: "es",
multidateSeparator: "-",
                               todayHighlight: true
});
});
</script>
</body>
</html>

<Code>

And just like we can get our calendar with bootstrap, all you have to do is create a index.html file and copy the code html of above

Y así de simple podemos obtener nuestro calendario con bootstrap, lo único que hay que hacer es crear un archivo inde.html y copiar el código de arriba.

css and jquery can download the files here .Any questions do not hesitate to ask.
los archivos css y jquery los pueden descargar aquiCualquier pregunta no duden en hacerla.

Consider when organizing files , I will organize by folders css and js.
tener en cuenta al momento de organizar los archivos, yo los organice por carpetas css y js.


domingo, 22 de febrero de 2015

DESARROLLO DE SISTEMAS DE INFORMACIÓN Y PAGINAS WEB - TARAPOTO

Ofrecemos Registro de Dominio, Hosting y Diseño incluido por precios sumamente módicos y de muy buena calidad. Nos gustaría participar en la elaboración de su página web, hacemos diseños de acuerdo a lo que quiera expresar en la web, usamos lo último en tecnología para el desarrollo de sistemas de Información y Páginas web: HTML5, CSS3, JQUERY, JAVASCRIPT, AJAX, RESPONSIVE DESIGN, además de lenguajes de programación del lado del servidor como PHP, PYTHON; y sobre todo con el mejor servidor para alojar su página en internet.


Para crear una página web se necesitan tres cosas fundamentales e indispensables que son: Diseño web, hosting y Dominio.

  •  El diseño web es nuestro trabajo el cual detallamos a continuación.
  •  El Dominio es el nombre que se pone a la página web : ejm: www.miempresa.com
  • El hosting es el servicio que provee a los usuarios de Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier contenido accesible vía web.

DISEÑO WEB (Pago Único)

Página pre-profesional: (HTML simple).

            Incluye:
  •      Desarrollo de 1 página principal, con información general acerca de su empresa.
  •     1 Formulario de contacto, pagina a través de la cual la puedan contactar sus clientes.
  •    Desarrollo de 10 páginas o enlaces para la descripción de cada uno de los tipos de servicios que presta su empresa. 
  •     El desarrollo incluye la inclusión de fotos, banners animados con JQuery, Parallax y/o Java Script.

Pagina Profesional: (HTML, PHP, Base de datos MySql, etc) [Personas con exigencia comercial: comunicación cliente - empresa]
            Incluye:
Ø  Desarrollo de 1 página principal, con información general acerca de su empresa
Ø  1 Formulario de contacto, pagina a través de la cual la puedan contactar sus clientes.
Ø  1 Base de Datos MySQL y/o PostgreSQL
Ø  Desarrollo de 20 páginas o enlaces para la descripción de cada uno de los tipos de servicios que presta su empresa.
Ø  Panel de Administración de Contenidos
Ø  Sistema de Comentarios(Redes Sociales: Facebook)
Ø  Buscador de Contenidos (Descripción y Títulos)
Ø  E-COMMERCE (Compra y venta de productos o de servicios a través de medios electrónicos)

Ø  El desarrollo incluye la inclusión de Galeria de fotos, banners animados con JQuery, Parallax y/o Java Script.

ALOJAMIENTO DE SU SITIO WEB (Pago Anual)
DOMINIO: desde $ 15.00 anual
-           1 dominio .COM/NET/ORG por un añoo De 1 a mas cuentas de correo tipo: informes@empresa.com
HOSTING: desde $ 50.00 anual
-           Tipo de Servidor: Linux
-           Espacio en Disco: 500 Mb
-           Ancho de Banda: hasta 6 GigaBytes
-           99.9% Tiempo de Actividad
-           Soporte 24 / 7
-          30 días de Garantía con retorno de dinero
-           Sub-dominios ilimitados
-           Cuentas FTP ilimitados
-           Soporte para PHP, ASP y .NET
-           Base de Datos MySQL
-           WebMail
-           Filtro Anti-SPAM

PUBLICIDAD Y POSICIONAMIENTO
 Creamos sitios web ya optimizados para buscadores y ofrecemos planes planes de posicionamiento en buscadores para sitios web ya construidos.
·         Posicionamiento de sitios web.
·         Sistemas estadísticos, monitoreo e informes de evaluación.

FORMAS DE PAGO
Con respecto al Diseño, el pago es de 50% de adelanto y el otro 50% al finalizar el trabajo incluido la capacitación. Con respecto al Hosting y Dominio se puede cancelar al inicio (recomendable para avanzar más rápido) o después de finalizar el desarrollo del sitio web completo.
Se entrega Recibo por Honorarios y/o Factura.

DURACIÓN
El proyecto se termina más rápido, cuando la información a poner se tiene en mano en Word, Excel o imágenes, paginas referencias, y tener definido los textos con fotos.
El plazo de entrega mínimo es de un mes, los días cuentan desde el día del pago adelanto.

DESARROLLO DE SISTEMAS
 Desarrollamos software en diferentes sistemas operativos, lenguajes de programación,          y soluciones de internet.
·         Intranet / Extranet.
·         Acceso remoto a base de datos.
·         Consultas a Base de Datos.
·         Paginas dinámicas en función de contenidos.
·         Accesos restringidos por usuarios.
·         Control sobre zonas seguras en la web.
·         Tecnología probada y segura.
·         Integración de sistemas.




CONTACTO
Desarrollador Web
E-mail: srk_alex_29@hotmail.com

OBSERVACIONES: Los precios son a tratar con la empresa interesada, teniendo en cuenta las necesidades de la misma. 

viernes, 10 de octubre de 2014

Generador de Imagen thumbnail en base 64 (readAsDataURL) con JavaScript

Una manera facil y sencilla de cargar una imagen y generar un thumbnail con el objeto FileReader de JavaScript, usando usar readAsDataURL () para obtener imágenes que un usuario ha seleccionado y una vista previa en la pantalla. 

Code

<!DOCTYPE html>
<input type="File" id="image_file" accept="image/*">
<input type="button" value="import" onclick="importImageToData()"><br><br>
<script>
function importImageToData(){
var imageFile = document.getElementById("image_file").files[0];
var formatreader = new FileReader();
formatreader.onloadend = function(e){
console.log("file Loaded");
var imageData = e.target.result;
var viewdata = document.createElement("textarea");
var img = document.createElement("img");
img.src = viewdata.value = imageData;
document.body.appendChild(img);
document.body.appendChild(document.createElement("br"));
document.body.appendChild(viewdata);
viewdata.select();
}
formatreader.readAsDataURL(imageFile);
};
</script>

jueves, 11 de septiembre de 2014

Menú desplegable con CSS

Este es un menú desplegable muy simple que usa algunas técnicas de CSS3 que lo hacen llamativo en algunos navegadores pero al que podemos modificar un poco para que funcione bien en cualquier navegador.



+ Seleccione una opcion


El HTML no tiene muchos misterios; en un DIV con una clase a la que llamamos drop-menu, colocamos un SPAN que es lo que nos servirá para desplegar y contraer el menú que está en una lista ordenada:

<div class="drop-menu"> 
<span class="plus">+</span>
Seleccione una opción del menú
 <ul class="sub-menu"> 
 <li><a href="URL1"><img src="URL_imagen1"/>Texto enlace 1</a></li>   
<li><a href="URL2"><img src="URL_imagen2"/>Texto enlace 2</a></li> 
 <li><a href="URL3"><img src="URL_imagen2"/>Texto enlace 3</a></li> 
</ul>
</div>

Como siempre, la clave está en el CSS y allí hay muchas variantes. Este sería el necesario para realizar el ejemplo:

.drop-menu {  
background-color: #242F3A;  
border: 1px solid #343F4A;  
cursor: pointer;  
display: block;  
font-family: Tahoma;  
font-size: 20px;  
height: 25px;  
letter-spacing: -1px; 
 margin: 0 auto;  
 max-height: 
 25px;  padding: 10px;  
 position: relative;  
 text-align: left;  
 width: 300px;  
 z-index: 1000;
 }
.plus {  display: inline-block;
  font-family: Georgia; 
  font-size: 22px;  
  font-weight: bold;
  margin-right: 10px;
  -moz-transition: .3s ease-in-out; 
  -o-transition: .3s ease-in-out; 
  -webkit-transition: .3s ease-in-out;
 }
  
  .drop-menu:hover {}.drop-menu:hover .sub-menu {  display: inline-block;}
  .drop-menu:hover .plus {  -moz-transform: rotate(45deg);  
  -o-transform: rotate(45deg); 
  -webkit-transform: rotate(45deg);}
  
  .sub-menu {  background-color: #242F3A; 
  background:image: -moz-linear-gradient(100% 100%  90deg, #000000, #242F3A); 
  background-image: -webkit-gradient(linear, left bottom, left top, from(#000000), to(#242F3A)); 
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF242F3A', EndColorStr='#FF000000'); 
  border: 1px solid #343F4A; 
  display: none;  
  border-top: none;  
  margin-left: -11px !important;  
  margin-top: 5px;  padding: 10px;  
  width: 300px;}
  
  .sub-menu li {  display: block; 
  font-size: 20px; 
  height: 22px; 
  list-style-type: none; 
  padding: 8px 0;}
  
  .sub-menu li img { 
  margin-right: 10px; 
  vertical-align: top;}
  
  .sub-menu li:hover {}.sub-menu a { color: #DDD; 
  font-size: 20px; 
  font-family: Tahoma
  }
  
  .sub-menu a:hover {color: #ABC;}

Ventanas con IFRAME

El tag IFRAME permite insertar una ventana (un marco) dentro de la misma ventana donde puede incluirse un objeto externo, incluyendo otro documento HTML.

<iframe> ....... atributos ....... </iframe>

Donde los atributos son:

  • align=[top|middle|bottom|left|right] alineamiento
  • class=valor clase de estilo
  • frameborder=[0|1] bordes al marco (NO,SI)
  • id=valor nombre único
  • height=valor alto en pixeles)
  • longdesc=url descripción larga
  • marginheight=valor alto del margen (en pixeles)
  • marginwidth=valor ancho del margen (en pixeles)
  • name=texto nombre destino del marco
  • scrolling=[yes|no|auto] barras de desplazamiento
  • src=url dirección del contenido
  • style=definiciones reglas de estilo
  • title=texto herramienta de ayuda
  • width=valor ancho (en pixeles)


Un ejemplo típico:

<iframe src="pagina.html" width="400" height="500"
   scrolling="auto" frameborder="1">
   [su navegador no soporta marcos]
</iframe>


El uso de IFRAME no parece muy extendido entre los usuarios, pero tiene algunas ventajas, por ejemplo, se pueden crear secciones en las que se inserte contenido de otras páginas:


Desplazamientos de textos con MARQUEE


La etiqueta <MARQUEE> </MARQUEE> crea una marquesina cuyo contenido se desplaza. Por defecto, ocupa todo el ancho de la pantalla, tiene una línea de altura y el texto se mueve lentamente de derecha a izquierda.

Esta es una marquesina por defecto.
Los atributos WIDHT y HEIGHT permiten controlar el ancho y el alto de la marquesina y pueden expresarse en pixeles o porcentualmente. El atributo ALIGN permite alinear el texto que rodea la marquesina, y puede tener los siguientes valores: top (arriba), middle (centrado) bottom (abajo). Los atributos HSPACE y VSPACE definen la separación horizontal y vertical del texto con los bordes de la marquesina:


<marquee width="50%" height="60" align="bottom">

... texto ...
</marquee>

Esta marquesina ocupa el 50% del ancho, tiene una altura de 60 pixels y está alineada con la parte inferior.

El color de fondo puede establecerse con el atributo BGCOLOR o, utilizando el atributo STYLE, podemos establecer cualquier propiedad, de manera similar al resto de las etiquetas HTML:

Esto se ve con la fuente Impact

<marquee style="...propiedades...">
... texto ...
</marquee>

Para controlar más efectivamente las marquesinas, existen una serie de atributos especiales:

DIRECTION se utiliza para modificar la dirección hacia la que se dirige el texto. Puede ser left (el valor por defecto), right, up o down:




Este txto va de derecha aizquierda Este texto se desplazará de abajo hacia arriba texto dentor de una caja

Texto con direccion de izquirda - derecha

Con el atributo SCROLLDELAY se define el tiempo entre cada movimiento expresado en milisegundos:

<marquee scrolldelay="100">
Velocidad = 100.
</marquee>

Estás viendo el ejemplo con scrolldelay = 100.


LOOP indica el número de veces que aparecerá el texto y por defecto, es infinito.

Con SCROLLAMOUNT controlamos la cantidad de desplazamiento del texto en cada movimiento de avance. Cuanto mayor es el número, más rápido avanza:

<marquee scrollamount="50">
SCROLLAMOUNT=50
</marquee>


SCROLLAMOUNT=100 SCROLLAMOUNT=50 SCROLLAMOUNT=30 SCROLLAMOUNT=10

Por último, el atributo BEHAVIOR (comportamiento) sirve para definir de que manera se va a efectuar el desplazamiento y puede tener los siguientes valores:
scroll (valor por defecto), aparece por un lado, se desplaza hasta el otro, desaparece y vuelve a empezar
slide aparece por un lado, se desplaza y se detiene (sólo funciona en Internet Explorer).
alternate se desplaza alternativamente hacia un lado y el otro.

Las marquesinas no sólo pueden contener textos, también pueden contener otros elementos, por ejemplo, imágenes, vínculos o tablas:

TABLA
CELDA A CELDA B
CELDA C CELDA D

Tag META

El tag META nos permite proporcionar información adicional sobre nuestra página y su contenido. Muchos buscadores usan esta información para crear sus índices. Es una buena idea saber cómo usarlos y cómo agregarlos a nuestro blog.

Los elementos META deben ubicarse en el HEADER y su forma más simple es la siguiente:
<META name='tipo' content='contenido' />

META description está considerado como imprescindible, es el que utilizan los buscadores y, muchas veces, es su contenido el que muestran como sumario de una página. Simplemente es un texto descriptivo del contenido de la página (en este caso del blog entero) sin ningún tipo de restricción, aunque se recomienda no incluir el título dentro del mismo. Qué y cuánto poner parece subjetivo, unos dicen que deber ser conciso mientras otros dicen que debe ser amplio (hasta 150 caracteres). Su código es el siguiente:
<meta name="description" content="... texto_personal ..." />

META keywords también está considerado como imprescindible, contiene palabras clave que sirven de referencia del contenido. Pueden colocarse hasta 1024 caracteres, separando cada palabra por medio de una coma o un espacio:
<meta name="keywords" content="... palabra, palabra, palabra ..." />

META refresh permite establecer cada cuánto tiempo (expresado en segundos) se recargará la página:
<meta http-equiv="refresh"content="segundos" />

Con refresh también podemos redireccionar al usuario de una pagina a otra:
<meta http-equiv="refresh" content="segundos;URL=http://www.xxxxx/index.htm" />

META Robots los robots son programas que usan los buscadores para indexar las páginas (visitan y registran todos los vínculos en su base de datos):
<meta meta name="robots" content="TIPO" />

Donde TIPO va a indicar cómo queremos que actuen los robots:
content="all" todas las paginas son indexadas
content="noindex,nofollow" no añade la página al motor de búsqueda
content="noindex,follow" no añade la página inicial pero si resto de lo enlaces
content="none" igual que el anterior
content="index,nofollow" sólo indexa la pagina inicial
content="index,follow" indexa la página y todos sus vínculos (opción por defecto y la más utilizada)

El uso de META author, META copyright, META date, META language y META rating es evidente:
<meta name="Author" content="... nombre_autor ..." />
<meta name="copyright" content="... texto_advertencia ..." />
<meta name="Date" content="... fecha ..." />
<meta name="language" content="es" />
<meta name="rating" content="general|mature" />

Hay más, estas, sólo las enumero a modo informativo ya que su aplicación es bastante relativa:

META Cache-Control y META Pragma evitan que la página sea guardada en la caché del usuario. La primera es de uso genérico y la segunda es para los navegadores Netscape. Son útiles cuando tenemos un sitio que se actualiza muy seguido pero sus resultados son poco fiables:
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />

META Expires permite la caché pero le da un tiempo, pasado este, obliga al navegador a cargar la página desde el servidor (la fecha debe estar en formato GMT):
<meta http-equiv="Expires" content="... fecha ..." />

Si se quiere que sea inmediatamente utilizar:
<meta http-equiv="Expires" content="0" />


Eso es todo. Incluir description y keywords me parece casi obligatorio pero tengan en cuenta que el uso de palabras claves falsas para mejorar las estadísticas está considerado un fraude por los motores de búsqueda.