miércoles, noviembre 16, 2016

Cambiar un min-height o min-width así como max-height max-width

En ocasiones tendrás un código definido por CSS donde un div o cualquier otro elemento tiene un tamaño mínimo o máximo de altura o anchura predefinido. Cuando esto pasa en principio no se puede cambiar así que tienes que echar manos de un truquillo (un tip).

Si queréis cambiar el mínimo deberéis poner min-height o min-width a "0" y si queréis cambiar max-height o max-width deberéis poner "none"

Aquí podéis ver el código en acción

See the Pen Solución a problemas con min-width min-height max-width y max-height by Juanje Gregori (@fenderslender) on CodePen.

lunes, junio 20, 2016

HTML5 input type=number no acepta decimales o comas en Chrome

Cuando estás poniendo un input de tipo número y quieres que lo valide un formulario, te das cuenta que utilizando Chrome no te permite poner decimales.

Así que con este código:





La pregunta que te estarás haciendo es si esto es un bug ya que en firefox esto no pasa pero en principio de acuerdo a los estándares de la W3C esto debe ser así.

La solución no puede ser más sencilla, si quieres que los saltos no sean de números enteros y que hayan decimales debes escribir 

step="any"

Y si quieres que no puedan haber números negativos deberás añadir

min="0"

Así que el código final quedaría así:



Espero que os sirva de ayuda.


lunes, abril 18, 2016

Header fijo con bootstrap

Si quieres hacer un header fijo en el top de tu página y estás utilizando bootstrap es muy sencillo conseguirlo.

En la clase del  header debes añadir "navbar-fixed-top" quedando así:


<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
    </ul>
  </div>
</nav>

Ten en cuenta que en el css debes añadir un padding con el tamaño del header,
si no se solapará con tu página

En este caso el alto de mi header es 54px y el CSS quedaría así:



body { padding-top: 54px; }


Podéis encontrar más información aquí:

http://www.w3schools.com/bootstrap/bootstrap_navbar.asp

jueves, abril 07, 2016

Configurar NppFTP para Notepad++

Si el anterior día vimos como instalar NppFTP esta vez vamos a configurarlo. Estos son los pasos que has de seguir para configurarlo.

1 Hacemos click en Profile settings


2 Al ser la primera vez que lo ejecutamos tendremos que añadir un perfil, hacemos click en Add new




3 Escribimos el nombre que queremos que tenga nuestro perfil



4 Aquí podemos ver todas las opciones que tenemos que poner:

    a Aquí ponemos la ip del FTP al que queremos que se conecte
    b Aquí debemos poner el tipo de  conexión (FTP, FTPS o SFTP)
    c Debemos poner el puerto de conexión, por defecto el FTP es el 21 y el SFTP el 22
    d Nombre de usuario
    e Contraseña
    f Por último seleccionamos el directorio remoto por defecto al que queremos que inicie cuando nos conectamos



Espero que os sirva de ayuda.

martes, abril 05, 2016

Instalar NPP-ftp en Notepad ++

El Notepad++ (NP++) es una herramienta muy interesante para todo programador, un editor de texto y de código fuente libre con soporte para varios lenguajes de programación.

Es cierto que existen mejores programas y IDEs que son bastante más potentes pero para empezar a programar y para ciertas tareas rápidas funciona genial.

Hoy vamos a ver como instalar NPP-ftp que es una herramienta que permite al NP++ ver y editar archivos de forma remota. Trabaja con protocolos  FTP, SSH and SFTP. El plugin guarda la información en diferentes perfiles, que pueden ser usados de uno en uno. El plugin permite bajar y subir archivos en tu propio ordenador, así  como crear y borrar directorios y archivos remotamente.

Ahora vamos a ver los pasos para instalar la aplicación en nuestro NP++:

1 Nos dirigimos al menú y hacemos click en Plugins -> Plugin Manager -> Show Plugin Manager

2 En la ventana que nos aparece deberemos buscar el plugin deseado, en este caso NppFTP, marcamos la casilla y hacemos click en Install


3 Nos aparecerá una ventana donde podremos ver el proceso de instalación


4 Nos pedirá que reiniciemos la aplicación. Y le damos a .


5 Ahora ya  tenemos instalado el NppFTP y podemos utilizarlo en nuestro NP++







viernes, junio 19, 2015

Poner código en blogger

Siempre me había preguntado como poner código en blogger, una utilidad muy interesante a la hora de explicar programas y facilitar que los lectores puedan copiar el código a la hora de practicar alguna cosilla.

Después de haber estado buscando un poco he encontrado la mejor forma de hacerlo. Debes de dirigirte a la sección de configuración de tu blog blogger.

1 Ves a plantilla

2 Haz click en código HTML

3 Dirígete a


4 Dentro de debes insertar este código
<!--PRINCIPIO DE CÓDIGO SYNTAX HIGHLIGHTER-->
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
    <script language='javascript'>
      SyntaxHighlighter.config.bloggerMode = true;
      SyntaxHighlighter.config.clipboardSwf = "http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf";
      SyntaxHighlighter.all();
    </script>
    <!--FIN DE CÓDIGO SYNTAX HIGHLIGHTER-->


Cada una de estas líneas que hemos añadido son de un tipo de lenguaje, he añadido los que es más posible que utilice pero si quieres añadir algún otro aquí tienes los soportados.
Brush
name
Brush aliases File name
ActionScript3
as3, actionscript3
shBrushAS3.js
Bash/shell
bash, shell
shBrushBash.js
ColdFusion
cf, coldfusion
shBrushColdFusion.js
C#
c-sharp, csharp
shBrushCSharp.js
C++
cpp, c
shBrushCpp.js
CSS
css
shBrushCss.js
Delphi
delphi, pas, pascal
shBrushDelphi.js
Diff
diff, patch
shBrushDiff.js
Erlang
erl, erlang
shBrushErlang.js
Groovy
groovy
shBrushGroovy.js
JavaScript
js, jscript, javascript
shBrushJScript.js
Java
java
shBrushJava.js
JavaFX
jfx, javafx
shBrushJavaFX.js
Perl
perl, pl
shBrushPerl.js
PHP
php
shBrushPhp.js
Plain
Text
plain, text
shBrushPlain.js
PowerShell
ps, powershell
shBrushPowerShell.js
Python
py, python
shBrushPython.js
Ruby
rails, ror, ruby
shBrushRuby.js
Scala
scala
shBrushScala.js
SQL
sql
shBrushSql.js
Visual
Basic
vb, vbnet
shBrushVb.js
XML
xml, xhtml, xslt, html, xhtml
shBrushXml.js

Así que si queremos tener Ruby deberemos añadir esta línea
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>

Ahora la pregunta que viene ¿Que debo poner para que en mis posts se vea el código?

Pues es muy simple, cuando quieras añadir código tan solo has de encerrarlo en este código
	<pre class="brush: html">
		
		

	</pre>

Tan sólo deberás cambiar el lenguaje y eso se hace cambiando "brush: html" cambias html por el lenguaje que quieras.

OJO -> Hay que tener en cuanta que si queremos publicar código como xml, xhtml, xslt, html y xhtml debemos cambiar < por < y > por >

Todo esto también puedes encontrarlo aquí: http://alexgorbatchev.com/SyntaxHighlighter/

lunes, marzo 16, 2015

JQuery "Uncaught ReferenceError: jQuery is not defined" Errores tontos #0001

Estoy empezando con jQuery y me saltaba este error "Uncaught ReferenceError: jQuery is not defined"

El código es supersencillo:




Después de un buen rato flipando con tener un fallo con tan poco código me he dado cuenta que he llamado a jquery-ui (jquery user interface) antes que a la librería de jQuery y como la user interface hace uso de ella de ahí viene el error. 

Así que simplemente he invertido las líneas y adiós al error.



Error tonto solucionado, espero que no os den errores tan tontos como los míos dolores de cabeza.





martes, noviembre 11, 2014

Practica y aprende inglés escuchando tu música favorita con Spotify (ver las letras de las canciones)

Gracias a internet podemos escuchar a nuestros artistas favoritos de forma legal por ejemplo con Spotify, con este programa podemos crearnos listas de nuestras canciones favoritas y ir escuchando lo que queramos en cada momento.

Aparte de escuchar canciones lo que yo propongo es llevarlo un poco más allá y aprovechar una de las aplicaciones de que dispone para estar escuchando tus canciones favoritas y leer sus letras, de esta forma podemos aprender nuevas palabras y dos cosas bastante más interesantes por una parte escuchar la pronunciación de palabras y por otra afinar nuestro oído, algo muy necesario para los españoles en la mayoría de pruebas de certificación de nivel de inglés.

Sin más dilación os explico como instalarla y utilizarla.

Iniciamos el Spotify.

1 Hacemos click en "Buscador de Aplicaciones".

2 Elegimos "musicXmatch".


3 Click en "Añadir".


4 Para configurar a nuestro gusto la aplicación hacemos click en "Configuración".

5 Podemos desplazar la barra esa a la izquierda o a la derecha para aumentar el tamaño de las letras.

6 Podemos activar el fondo o desactivarlo, yo normalmente lo desactivo pero es cuestión de gustos.


7 Lo que sí que recomiendo es que actives "Todas las letras" de esta forma podrás ver más frases de la canción cosa que ayuda mucho.


Y ya está lo tenemos configurado.

Ahora ya solo debemos.

8 Hacer click en la lista que queramos escuchar.

9 Hacer click en "musiXmatch" para que nos muestre las canciones de las letras que estamos escuchando.


Ahora solo te queda seguirme en Spotify ya que tengo una buena colección de listas que seguro te gustan.

jueves, noviembre 06, 2014

Crear un disco de arranque en Windows 7 (PASO A PASO)

Puede que en algún momento decidas crear un disco de arranque, aquí pongo un paso a paso para que no tengas ningún problema.

1 Click en icono de Windows

2 En el menú emergente click en "Panel de control"


3 Vamos a "Sistema y seguridad"


4 Hacemos click en "Copias de seguridad y restauración"


5 Hacemos click en "Crear un disco de reparación del sistema" *


* Nota

Si se le solicita que inserte un disco de instalación de Windows, significa que no se pueden encontrar en el equipo los archivos necesarios para crear el disco de reparación del sistema. Inserte un disco de instalación de Windows 7.


martes, noviembre 04, 2014

Como desactivar en móvil (Android, iOS, windows Phone, windows) la reproducción automática de vídeos (Paso a paso)

Desde hace un tiempo facebook ha puesto la funcionalidad de reproducción automática de los vídeos simplemente haciendo scroll sin necesidad de hacer click para verlo, en tu ordenador puede que no moleste pero en nuestro móvil con los típicos planes de datos limitados a 1GB es muy posible que desactivar esta reproducción nos haga llegar más holgados a fin de mes.

En navegador de nuestro ordenador

Vamos a la configuración de facebook y le damos a desactivar la reproducción automática de vídeos



En nuestro dispositivo móvil

Para cambiar la configuración en nuestro dispositivo móvil tendremos que seguir estas instrucciones:

1 Touch en las 3 rallitas que nos llevan a un menú donde podemos ver nuestro nombre, los favoritos, grupos, etc bajamos hasta casi el final para encontrarnos con la "Configuración de aplicaciones"

2 Hacemos touch en "Configuración de aplicaciones"


Ahora estamos en el menú de "Configuración general"

3 Hacemos touch en "Reproducción automática de vídeos" 

 En el menú emergente que sale podemos elegir dependiendo de lo que queramos:

4 Solo Wi-Fi: para que la reproducción automática solo se produzca cuando estamos conectados a un Wi-FI.
4 Desactivado: para que solo se reproduzcan los vídeos cuando hagamos touch en ellos.

Ahora ya podemos ver como está desactivada la opción de "Reproducción automática de vídeos" y no iremos desperdiciando megas por la vida.


Espero que os haya gustado este paso a paso.

Este artículo está basado este de Gizmodo pero como vi que tenía algunas carencias explicando decidí replicar lo que sirve y hacer un paso a paso de lo que no explican.