Parece ser que Gmail ha caído, Gmail no funciona en estos momentos (1 septiembre).
Imagen:
Pocas veces vemos esto.
martes, 1 de septiembre de 2009
Gmail caído, Gmail no funciona en estos momentos 1 septiembre
martes, 25 de agosto de 2009
Videotutorial. Codigo fuente en tu blog - SyntaxHighlighter
Desde SistemaSolutions 2009 hemos querido hacer un videotutorial, ya que se ha puesto muy de moda este tipo de tutoriales. Para ello hemos escogido el ultimo post que colgamos.
En el siguiente videotutorial veremos como hacer para añadir codigo fuente resaltado en nuestro blog de blogger.
Espero que os sea de utilidad.
domingo, 23 de agosto de 2009
Codigo fuente en tu blog - SyntaxHighlighter
Vamos a ver como insertar código fuente en el blog, de manera simple sin necesidad de pasarse horas formateando en html el código fuente de nuestras aplicaciones. Para ello he encontrado SyntaxHighlighter http://code.google.com/p/syntaxhighlighter/.
Descarga
En este caso vamos a usar la version 1.5.1, me ha parecido mas sencilla que la nueva version de SyntaxHighlighter 2.0 que la podeis encontrar en http://alexgorbatchev.com/wiki/SyntaxHighlighter, mas adelante ya la probaremos.
<html> <head></head> <body></body> </html>
Hay varias opciones para agregar SyntaxHighlighter a nuestro blog, voy a explicar la forma de usarlo sin necesidad de alojar el codigo en un servidor externo. Usaremos los archivos javascript del repositorio de google.
Lo primero que tenemos que hacer es agregar los estilos y los scripts a nuestra plantilla de blogger. Para ello, nos vamos a la pestaña Diseño y al apartado Edición de HTML. En el código html, buscamos el bloque donde están los estilos. En mi caso la ultima classe de css es la siguiente:
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
A continuación de esto vamos a agregar todo el contenido de la hoja de estilos http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css. Podeis copiarlo de aquí:
.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}
/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}
.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}
.dp-highlighter .bar
{
padding-left: 45px;
}
.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}
.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}
.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}
.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}
.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}
.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}
.dp-highlighter .columns div
{
padding-bottom: 5px;
}
.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}
.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}
/* Adjust some properties when collapsed */
.dp-highlighter.collapsed ol
{
margin: 0px;
}
.dp-highlighter.collapsed ol li
{
display: none;
}
/* Additional modifications when in print-view */
.dp-highlighter.printing
{
border: none;
}
.dp-highlighter.printing .tools
{
display: none !important;
}
.dp-highlighter.printing li
{
display: list-item !important;
}
/* Styles for the tools */
.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}
.dp-highlighter.nogutter .tools
{
border-left: 0;
}
.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}
.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}
.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}
/* About dialog styles */
.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
/* Language specific styles */
.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }
Ahora necesitamos enlazar los scripts, usaremos los que hay en el repositorio:
Podemos encontrarlos en http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'/>
El codigo anterior los añadiremos justo ANTES de la linea:
</head>
Bien, lo ultimo que tenemos que hacer en la plantilla es añadir al final de cuerpo, justo antes del tag /body las llamadas a las funciones javascript para que resalten el código fuente:
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
Guardamos la plantilla y ya la tenemos preparada para introducir código fuente en nuestras entradas.
Deberemos insertar el código fuente entre los tags pre:
Codigoooooo
En el atributo name ponemos la misma cadena que hemos puesto en dp.SyntaxHighlighter.HighlightAll('code'); "code" podéis cambiarlo si queréis, pero siempre deben coincidir ya que la función javascript buscara solo los tags pre con name = a code y en el atributo class indicaremos el lenguaje que vamos a escribir.
http://code.google.com/p/syntaxhighlighter/wiki/Languages
| Language | Aliases |
| C++ | cpp, c, c++ |
| C# | c#, c-sharp, csharp |
| CSS | css |
| Delphi | delphi, pascal |
| Java | java |
| Java Script | js, jscript, javascript |
| PHP | php |
| Python | py, python |
| Ruby | rb, ruby, rails, ror |
| Sql | sql |
| VB | vb, vb.net |
| XML/HTML | xml, html, xhtml, xslt |
Y esto es todo. De esta forma podemos introducir código fuente de manera mas vistosa y legible para el lector. Mas adelante veremos como configurar los estilos.
Cualquier duda que tengáis dejar un comentario que intentaremos resolverlas.
Espero que os haya sido útil. Saludos desde SistemaSolutions
jueves, 20 de agosto de 2009
Html 5 El futuro de la web - Canvas
"HTML 5 (HyperText Markup Language, versión 5) es la quinta revisión mayor del lenguaje básico de la World Wide Web, HTML. HTML 5 especifica dos variantes del mismo lenguaje: un «clásico» HTML (text/html), la variante conocida como HTML 5 y una variante XHTML conocida como XHTML 5. Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo."
Fuente : Wikipedia
Especificación: http://dev.w3.org/html5/spec/Overview.html
Esta nueva versión del lenguaje html incluye el elemento canvas, el cual puede dar mucho de si. Permite generar gráficos 2D, juegos, animaciones y composición de imágenes...
Veamos algunos juegos que usan el elemento canvasque he encontrado por la red
Juego del tipo bubbledubble.
http://www.gamesforthebrain.com/game/oooze/
Un puzzle.
http://www.raymondhill.net/puzzle-rhill/jigsawpuzzle-rhill.php
El asteroid.
http://www.kevs3d.co.uk/dev/asteroids/
Del estilo doom.
http://www.benjoffe.com/code/demos/canvascape/textures
Y os dejo algunos enlaces que os recomiendo ver:
Efectos conviando imagen y audio:
http://9elements.com/io/projects/html5/canvas/
Algunos experimetos con canvas:
http://www.timelessname.com/canvas/
Bordes decorativos con canvas:
http://www.agustinfernandez.com.ar/proyectos/canvas/
Poliedros:
http://polyhedra.org/poly/show/29/hexagonal_antiprism
Un puñado de ejemplos:
https://developer.mozilla.org/Special:Tags?tag=Canvas_examples&language=en
El paint en canvas:
http://caimansys.com/painter/
Aquí va un tutorial bastante bueno, en el que explica paso a paso como crear un arcanoid usando canvas.
http://billmill.org/static/canvastutorial/index.html
Algunos articulos que he encontrado interesantes:
http://www.consumer.es/web/es/tecnologia/internet/2009/08/04/186920.php
Visto lo visto, podemos comprobar que la nueva versión de html, trae grandes mejoras que van a revolucionar el desarrollo de animaciones graficas integradas en la web.
Es canvas el final de flash?? El tiempo lo dira...
miércoles, 8 de julio de 2009
Copias de seguridad (I)
Hola a todos,
Como trabajador que da soporte a muchos clientes con servidores alquilados no administrados, veo multitud de máquinas con poca o nula gestión de backups. Lo habitual es que el cliente se de cuenta de su error cuando ha perdido todos los datos o cuando tiene que hacer un esfuerzo titánico para recuperar lo que tenia.
Por esto es imprescindible para cualquiera que tenga un servidor online tener programados una serie de backups. Cuanto mas variopintos mejor, desde la propia aplicación hasta un volcado de datos del disco. Lo mas común y básico es crear una tarea que haga un fichero comprimido con el contenido de las carpetas y lo saque por algún método del servidor.
Para esta tarea en concreto el timeline adecuado es :
1. Meter las carpetas que nos interesen en un fichero, si puede ser ya comprimido.
2. Sacarlo del servidor por algún método.
También es posible hacerlo todo a la vez, sin guardar nada en el propio disco, pero lo dejaremos para mas adelante. Para el punto 1 utilizaremos tar:
#tar -czf /backup/nombredestino.tar.gz /carpeta1 /carpeta2 /carpeta3
Este comando nos guardara comprimido las 3 carpetas en el fichero nombredestino.tar.gz en la carpeta backup.
-c --> creamos contenido
-z --> sera comprimido con gzip
-f --> se indica que el resultado se guardara en un fichero (siempre ha de ir al final)
Después para sacarlo podemos utiliza varios metodos, el mas mejor es a través del protocolo SSH, pero esto implica que hay que autentificarse, asi que lo dejaremos para mas tarde.
Una opción fácil, rápida pero poco segura es por ftp, el único problema es que para automatizarlo habría que crear un script un poco mas completo. Otra solución es utilizar "lftp", un software que añade funcionalidades extra al cliente ftp de consola y con el que podemos hacer todo en una sencilla linea:
#lftp -c open -e "put /backup/nombredestino.tar.gz" -u user,password ftp.nombredominio.com;
Con esto ya habremos copiado el fichero al ftp que debe existir en ftp.nombredominio.com con user y password. Ahora para automatizarlo solo tenemos que crear un shell script que incluya estos dos comandos:
#Backup_sencillo.sh
*****
#!/bin/bash
tar -czf /backup/nombredestino.tar.gz /carpeta1 /carpeta2 /carpeta3
lftp -c open -e "put /backup/nombredestino.tar.gz" -u user,password ftp.nombredominio.com;
*****
Y añadir una tarea a cron para que la ejecute:
#crontap -e
añadimos:
2 3 * * * sh /Backup_sencillo.sh >/dev/null
Guardamos
Y ya tenemos el backup programado para cada dia a las 03:02 de la madrugada.
Efectivamente esto se puede mejorar muchisimo (pero mucho), y es lo que iremos haciendo en la serie de Post "Copias de seguridad(*)"..
Poco a poco iremos convirtiendo nuestra pequeña criatura en un formidable script que no solo te avise de los fallos por correo, sino que ademas sea eficiente con el ancho de banda, que se haga al vuelo, que se mantengan copias de varios dias, que vaya cifrado, etc, etc...
Gracias a todos, Saludos.
Suscribirse a:
Entradas (Atom)
Entradas
