Showing posts with label herramientas. Show all posts
Showing posts with label herramientas. Show all posts

Sunday, September 22, 2019

Instant WordPress: Una instalación portable

Instant WordPress es un programa que nos permite instalar WordPress en nuestra PC sin necesidad de software extra.

Una vez descargado el ejecutable, hacemos doble click en él, seleccionamos la carpeta o unidad USB donde queramos instalarlo y nada más; funcionará de modo independiente como cualquier otro programa portable.

Incluye WordPress 3.2, Apache 2.2.15, PHP 5, MySQL 5 y una serie de posts y páginas demo donde pueden probarse plugins o temas.


En el sitio del desarrollador hay una abundante documentación (en ingles) que puede ayudar a quien quiera jugar un poco y ver de que se trata uno de los sistemas de blogs más utilizados en el mundo.




REFERENCIAS:blogtecnia.com

Wednesday, July 17, 2019

Cómo instalar Xampp en Windows

Una de las formas más prácticas de trabajar con WordPress y con muchos otros de estos servicios, es utilizarlos offline, instalándolos en nuestra PC y experimentar a gusto sin temor a destruir nada.

Para eso, la mejor opción es XAMPP, un soft gratuito que nos permite instalar una distribución de Apache que contiene MySQL, PHP y todo lo necesario para correr y gestionar un sitio web.

Hay versiones para casi todos los sistemas operativos. La última versión para Windows incluye:
  • Apache 2.4.2
  • MySQL 5.5.25a
  • PHP 5.4.4
  • phpMyAdmin 3.5.2
  • FileZilla FTP Server 0.9.41
Una vez descargado, procedemos a la instalación que es muy simple, similar a la de cualquier otro programa.

Instalando Xampp en Windows

Terminado esto, lo ejecutamos y se abrirá el panel de control. Si no están iniciados los servicios, hacemos click en Start, tanto de Apache como de MySQL que son los dos imprescindibles. Cerramos el panel que permanecerá como ícono en la barra de tareas.

El Panel de Control de Xampp

Para entrar al servidor abrimos el navegador y escribimos localhost en la barra de direcciones, nos llevará a una página similar a esta:
http://localhost/xampp/splash.php

Seleccionamos el idioma que nos resulte cómodos y vamos a crear una base de datos. En la izquierda, dentro de Herramientas hacemos click en phpMyAdmin:
http://localhost/phpmyadmin/

Una vez allí, colocamos el nombre (por ejemplo "wordpress" sin comillas), elegimos utf8_unicode_ci y click en Crear.

Con eso ya estamos casi listos, nos falta instalar Wordpress, así que descargamos la última versión o la que nos guste, la descomprimimos y la debemos copiar y pegar en la carpeta \\xampp\\htdocs\\ que es donde se agregarán todos nuestros archivos.

Lo que sigue es similar a instalar WorPress en un hosting. Vamos a la carpeta \\xampp\\htdocs\\wordpress que es la raiz de nuestro sitio y buscamos el archivo wp-config-sample.php. Hacemos una copia del mismo y lo renombramos como wp-config.php. Lo editamos y colocamos nuestros datos:
[php]
define(''DB_NAME'', ''wordpress''); // el nombre de la base de datos que acabamos de crear
define(''DB_USER'', ''root''); // nuestro nombre de usuario para MySQL (no cambiar)
define(''DB_PASSWORD'', ''''); // la contraseña (la dejamos en blanco)
define(''DB_HOST'', ''localhost'');
define(''DB_CHARSET'', ''utf8'');
define(''DB_COLLATE'', '''');
[/php]
Para terminar, vamos a esta dirección:

http://localhost/wordpress/wp-admin/install.php

y seguimos el proceso normal, poner el título del blog, un email, nos dará un nombre de usuario (admin) y una contraseña aleatoria y nos llevará a la pantalla de login:

http://localhost/wordpress/wp-login.php

que es la que usaremos de ahí en adelante para entrar en nuestro sitio.

El resto, será igual que administrar WordPress desde un hosting. Podemos agregar temas, plugins (aunque algunos no funcionarán), exportar la base de datos de nuestro blog e importarla a Xampp, crear otras, etc.

Una de las ventajas es que no es necesario utilizar el editor interno y podemos usar cualquier otro como Notepad++ o el que nos resulte más cómodo. abrimos los archivos, los editamos y los guardamos. Todo se hace más sencillo, más rápido y no necesitamos conectarnos a internet.

Si bien el proceso detallado se refiere a a WordPress, en realidad, la utilidad de software como Xampp no se limita a este tipo de servicios ya que podemos hacer lo mismo con cualquier otro CMS: Joomla, Drupal, o no usar ninguno de ellos y experimentar con el lenguaje PHP de manera directa.

Saturday, June 1, 2019

Herramientas para desarrolladores y curiosos

Cada día hay más herramientas online que nos permiten acceder a información de manera sencilla o compartirla de diversos modos. No todas nos sirven, no todas duran en el tiempo, algunas aparecen publicitadas en muchos sitios y uno quiere probarlas y son "privadas" o prometen que un futuro harán algo pero, por el momento, son inaccesibles para los simples mortales. algunos sitios de "noticias" se especializan en eso, en promover lo inexistente pero ... algo siempre queda.

En este caso, son sitios que vale la pena mirar y ver si pueden ser útiles.

CSS3 Click chart es una página donde podemos encontrar referencias rápidas a distintas propiedades con algunos ejemplos sencillos, advertencias y enlaces a artículos que amplían la información de cada tema.

Html 5 please es similar aunque la información que muestra es mucho más detallada.

Un poco más amplio es el servicio que ofrece DocHub tanto para CSS como para HTML, JavaScript, jQuery y otros lenguajes.

¿Quien probar si cierto script funciona y editarlo online? Puede usarse la herramienta de debug de w3schools.com ingresando a través de cualquier enlace Try it yourself de sus tutoriales; funcionan tanto con Javascript "clásico como con jQuery.

SnipSave permite crear, editar y guardar trozos de códigos para poder acceder a ellos desde cualquier parte.

Mozilla Thimble es una aplicación de Mozilla que nos permite escribir código HTML e ir viendo la previsualización de modo instantáneo en al misma pantalla. Lo interesante es que incluye la opción de publicar el resultado y compartirlo. Aunque aún está en desarrollo, el resultado es más que aceptable.

¿Más?

Thursday, May 23, 2019

ResizeBrowser: Una herramienta online

No es algo del otro mundo pero resizebrowser es una herramienta útil a la hora de verificar cómo se ve un sitio web en distintas resoluciones de pantalla ya que los avances que se ven en el tema monitores hacen que este sea un tema complicado. Antes era más fácil, 800x600 o 1024x640 y ahí se acababan las variantes pero hoy en día, las alternativas son múltiples y conviene verificar si lo que vemos es lo que otros verán.

Esto no significa que uno deba crear sitios para el 100% ya que sería casi imposible pero, siempre es bueno saber qué pasaría si ... y de ese modo decidir dónde estarán nuestros límites.

La herramienta funciona online y posee dos pestañas. La izquierda nos permite seleccionar las distintas resoluciones admitidas o agregar alguna personal y la superior usar un zoom y definir la proporción: 4:3, 16:10, 16:9 o móviles.


Luego, basta hacer click en cualquiera de los enlaces que se muestran de nodo gráfico, para que se abra el navegador en una nueva ventana, ya re-dimensionada y desde allí podemos navegar libremente o colocar la dirección URL del sitio que queremos verificar.

Thursday, April 18, 2019

CSS Arrow please

CSS Arrow please nos ayuda a crear flechas con distintos estilos y nos da las reglas necesarias para copiarlas y aplicarlas a nuestras páginas web.

Basta entrar al sitio y seleccionar las distintas opciones que terminarán generando algo similar a esto:
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
left: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-left-color: #88b7d5;
border-width: 30px;
top: 50%;
margin-top: -30px;
}
.arrow_box:before {
border-left-color: #c2e1f5;
border-width: 36px;
top: 50%;
margin-top: -36px;
}
Colocando eso en una etiqueta STYLE, luego, podemos usar la clase de este modo:
<div class="arrow_box"> abcde </div>
abcde

A partir de allí, nada impide modificarla, establecer su ancho, el tipo de fuente, cambiar los colores o las distintas propiedades para adaptarla a nuestras necesidades y gustos personales:

ejemplo
ejemplo
ejemplo
ejemplo

Todo es cuestión de probar y de entender el funcionamiento de los pseudo-elementos :after y :before:

Curabitur aliquam sem ut risus auctor auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.