10 buenos hacks para CSS

1. Vertical align div

http://stylizedweb.com/2008/02/01/vertical-align-div/

2. Min-Height

selector {
min-height:500px;
height:auto; !important
height:500px;
}

3. PNG transparency

http://stylizedweb.com/2007/12/30/png-transparency-issues/

4. Autoclear

.container:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container {display: inline-table;}
/* Hides from IE-mac \*/
* html .container {height: 1%;}
.container {display: block;}
/* End hide from IE-mac */

5. Reset CSS

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,p,blockquote,th,td {
margin:0; padding:0;
}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;font-weight:normal;
}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
q:before,q:after {content:”;}

6. Scrolling Render IE

html {
background : url(null) fixed no-repeat;
}

7. Opacity

#transdiv {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}

8. PRE Tag

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

9. Li Background Repeat IE

<!–[if lt IE 7]>
<style>
#leftnav li { zoom: 1;} /* haslayout=true */
</style>
<![endif]–>

10. Good to know

@charset “UTF-8″;

/* ———————————————————————-
WinIE7
———————————————————————- */
*:first-child+html selector{property:value;}

/* ———————————————————————-
WinIE6 & Mac IE
———————————————————————- */
* html selector{property:value;}

/* ———————————————————————-
WinIE6
———————————————————————- */
/*\*/
* html selector{property:value;}
/**/

/* ———————————————————————-
MacIE
———————————————————————- */
/*\*//*/
selector{property:value;}
/**/

Obtener la dirección IP en Visual Basic .net 2005

Aquí dejo una función para obtener los datos referentes a la maquina local en Visual Basic .NET 2005:

Private Sub ObtenerDatos()
        Dim nombreHost As String = System.Net.Dns.GetHostName
        Dim hostInfo As System.Net.IPHostEntry = System.Net.Dns.GetHostByName(nombreHost)

        lblNombreHost.Text = "El nombre de tu maquina es: " & hostInfo.HostName.ToString
        For Each ip As System.Net.IPAddress In hostInfo.AddressList
            lblDireccionHost.Text = "Tu direccion IP local es: " & ip.ToString
        Next
End Sub

Visual Basic .Net con MySQL, como usarlo

En este post resumire un poco las distintas cosas que se pueden hacer, con mucho codigo y poca explicacion, porque de hecho no hay mucho que explicar, las consultas son con SQL puro y duro, y el visual… es visual!

Antes de nada recordar que para establecer una conexion con la base de datos se requiere la DLL que os adjunto. Una vez la tengais la colocais donde os vaya mejor, y desde el proyecto de visual basic haceis:

Proyecto->Agregar referencia…-Examinar, y la cargais.

La DLL la he colgado aqui:

http://www.pooox.es/MySql_Data.rar

Una vez hecho esto os cuento que hice yo:

1. Añadi la siguiente linea en el codigo de los formularios que manejan algo con base de datos:
 
Imports MySql.Data.MySqlClient

2. Hice una clase que manipulaba los datos, la cual la instancio desde el Form_Load(). La clase la llamo ‘consultas’, lo siguiente es un copiar y pegar de mi codigo:

http://www.pooox.es/consultas.txt

3. Desde el formulario principal, creo una variable del tipo consultas, la hago como global por preferencia mia. Despues uso la clase cuando necesito usarla, creo que no tiene perdida. Hice que las SELECT de la classe consultas devolviera una variable del tipo MysqlDataReader, con lo que siempre que se quiera recuperar los datos de una consulta habra que crear dicha variable en el formulario, o hacerla global y te olvidas.

Aqui os dejo la primera parte de mi formulario por si hay dudas:

Imports MySql.Data.MySqlClient  

Public Class Form1 

Dim cons As consultas
Dim lectura As MySqlDataReader 

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)Handles MyBase.Load

cons = New consultas("localhost", "nick","contraseña") 

lectura = cons.consulta("grupos")
 
Dim i As Integer
Try
 
For i = 0 To lectura.FieldCount - 1
lectura.Read()
 
ComboBox1.Items.Add(lectura.GetValue(1).ToString())

Next
 
Catch ex As MySqlException

End Try

lectura.Close()

End Sub

Si sirve de referencia, cabe decir que todo esto lo he hecho en local, con el xampp instalado que ya tiene el apache y el phpmyadmin instalados.

Para cualquier duda o sugerencia sobre esta mini explicacion hacermelo saber!
Espero que os sirva de mucho!

¿Qué es jActivating?

Conocido originalmente como JS Embedded Content, es un pequeño y “no obstructivo” código JavaScript para solucionar el problema de “Haga click aquí para activar y usar este control”, permitiendo a los usuarios de un sitio web interactuar con contenido embebido (películas Flash, películas Quicktime, applets de Java, etc.) sin tener que primero activarlos manualmente. Este procedimiento comenzó a ser requerido para las más recientes versiones de Internet Explorer (6+) y Opera (9+) como resultado de un conflicto de patentes con Eolas Technologies (otros navegadores no lo requieren… aún).

Características principales

• Es super sencillo de implementar y usar (3 simples pasos).
• Soporta páginas enviadas como application/xhtml+xml y text/html.
• Es completamente “no obstructivo”: el contenido embebido se mantendrá accesible aún si JavaScript no es soportado.
• HTML (o XHTML) y el código JavaScript se encuentran completamente separados uno del otro (no se utiliza JavaScript inline).
• Este software es de dominio público (sin derechos reservados).

¿Cómo instalar jActivating?

Paso 1:

Ubica el archivo JavaScript en algún directorio de tu servidor web.

Paso 2:

Agrega la siguiente línea en el encabezado de la página web donde quieres utilizarlo (entre <head>…</head>):

<script type="text/javascript" src="embeddedcontent.js" defer="defer"></script>

Aviso: el atributo defer es requerido para Internet Explorer.

Paso 3:

Utiliza tu método favorito para embeber contenido. A continuación un ejemplo simple:

<object type="application/x-shockwave-flash" data="movie.swf" width="400px" height="100px">
<param name="src" value="movie.swf" />
<p>Alternative content</p>
</object>

Descargas

jActivating puede ser descargado desde SourceForge

EasyDrag jQuery Plugin

EasyDrag es un plugin para la popular librería javascript jQuery el cual te permitirá añadir la funcionalidad de Drag and drop o Arrastrar y soltar a elementos html de tu pagina. Esta librería permite agregar la funcionalidad de drag con sencillas lineas de código, además de ello tiene detectores de eventos con lo cual se pueden controlar los drag dependiendo de las acciones realizadas.

Utilización
Lo primero para utilizar EasyDrag es descargar JQuery y luego jquery.easydrag.js, este ultimo archivo contienen las funciones necesarias para el funcionamiento de esta librería.

El siguiente paso es añadir estas librerías al header de nuestro html, para ello utilizamos los tags script para incluirlas de la forma:

1. <script src=“jquery.js” type=“text/javascript”></script>
2. <script src=“jquery.easydrag.js” type=“text/javascript”></script>

Luego el siguiente paso es agregar la función easydrag al elemento que deseamos controlar de la siguiente forma:

1. <script type=“text/javascript”>

2. $(function(){

3.     $("#box1").easydrag();

4. });

5. </script>

Uniendo estas lineas tendremos el siguiente código con el cual podemos hacer Drag a un elemento html.

1. <html>

2. <head>

3. <title>EasyDrag Demo</title>

4. <script src=“jquery.js” type=“text/javascript”></script>

5. <script src=“jquery.easydrag.js” type=“text/javascript”></script>

6. <script type=“text/javascript”>

7. $(function(){

8.     $("#box1").easydrag();

9. });

10. </script>

11. <style type=“text/css”>

12. #box1 {

13.     font-family: "Trebuchet MS", Tahoma, Verdana;

14.     background-color: yellow;

15.     padding: 5px;

16.     border: 2px solid orange;

17.     width: 200px;

18. }

19. </style>

20. </head>

21. <body>

22. <h3>EasyDrag jQuery Plugin </h3>

23. <div id=“box1″>Versi&oacute;n demo de Easy Drag</div>

24. </body>

25. </html>

También existe la posibilidad de detectar cuando se termina de hacer el drag, para ello se utiliza el evento ondrop, con el cual se pude llamar a una acción de la siguiente forma:

1. <script type=“text/javascript”>

2. $(function(){

3.     $("#box1").easydrag();

4.     $("#box1").ondrop(function(){ alert("Dropped"); });

5. });

6. </script>

Como pueden ver es una forma muy sencilla de crear este tipo de efectos para nuestras páginas html.