Entradas

Mostrando las entradas etiquetadas como html

Javascript framework: mootools, prototype, jquery

Desde finales de los noventa a la actualidad ha evolucionado la web a pasos agigantados. E incluso han aparecido nombres como web 2.0 , ajax , internet 2 , … pero realmente no representan de por sí ni una tecnología, ni un lenguaje de programación, si no más bien una tendencia, una moda, una exclusividad e incluso no se quien utilizaba el termino 3.0, que a mi me sigue sonando la versiones del software que compilo. Pero si me voy a quedar con javascript no intrusivo y gracias a los framework cada vez es más sencillo lograrlo. Todavía son muchos los desarrollos web en los que me encuentro un onclick, onload, onchage, onsubmit que son válidos aunque no tendríamos unas capas bien organizadas y por supuesto tendríamos javascript intrusivo. Muchos debates he tenido en los desarrollos sobre mi exceso de validaciones de formularios, si ya has validado en javascript para qué validar en el lado del servidor. Por mucho que me traten de convencer yo valido siempre en el lado del servidor, ya qu...

Firebug

Todavía me encuentro programadores que no conocen esta herramienta, supongo porque solo desarrollan para el IE. Creo que desde hace bastante tiempo ya no es una utopía programar javascript para todos los navegadores, tanto para el FireFox, Chrome, Opera, Safari, ... Los frameworks como mootools, prototype, jQuery, ... nos ayudan y facilitan esta tarea entre otras muchísimas más. Yo siempre desarrollo con Firefox y por supuesto con Firebug, y luego hago test en los demás navegadores. Sobre Firebug lo mejor es instalarlo, es un complemento del Firefox, y ver todas las funcionalidades y herramientas que nos facilita: Consola // para todo y principalmente depurar javascript HTML // inspeccionar elementos y css CSS Script DOM Red // tanto para peticiones AJAX e incluso para Flash (bye, bye, flash...) Los que usamos ubuntu tenemos un problemilla con la última versión de FireFox 3.5 y de Firebug 1.5 , pero tranquilos en launchpad.net ya se abrió el debate y como siempre se soluciona, solo ha...

HTML div organizar contenido

Como todavía me encuentro muchas webs y aplicaciones web con <TABLE><TR><TD> continúo con el tema de usar div en lugar de table. Con el siguiente ejemplo podemos organizar una página web o documento html con divs, centrando el contenido y estableciendo un diseño proporcional, que se adaptaría a cualquier resolución de pantalla y dispositivo. No usamos ningún <table> ni <tr> ni <td> ni .. width="450" height="400" scrolling="auto" frameborder="1" transparency> Ejemplo de página web organizada mediante divs y css Ahora el código html y css <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=U...

CSS. HTML. Para todos los dispositivos

Hace poco se cumplieron 20 años de la web, World Wide Web, y Tim Berners-Lee criticaba los dominios .tel y .mobi. No es de extrañar ya que realmente con el mismo contenido html o xhtml podemos crear estilos para los distintos dispositivos o Media types. Echar un vistazo a las guias de las w3c sobre estos Media types El tema es sencillo, si hemos separado bien el contenido de la apariencia, el html del css. Dentro de <html><head> podemos definir hojas de estilo, css, para cada dispositivo cliente que pueda solicitar una url de nuestra web. Se trata de añadir con el valor del atributo media las diferentes hojas de estilo, css, que hayamos generado, mejor que sea el diseñador gráfico si sabe que existe algo más que flash. <!-- para monitores de ordenador, computadora --> <link rel = "stylesheet" type = "text/css" media="screen" href="css/screen/general.css"/> <!-- para imprimir --> <link rel = "stylesheet" ...

HTML. CSS. input disabled - input readonly

En IExplorer hay problemas con los input disabled, pero podemos usar los input readonly. Con los input disabled en el IExplorer no coge el del color de la fuente. Lo pone a un color gris claro. Pero con los input readonly si que coge el color de la fuente. Además los input disabled no se envian ni por el POST ni por el GET. En cambio los input readonly si se envían en la petición. En Mozilla FireFox los input disabled si que cogen el estilo del color de la fuente. <input type="text" id="campo_disabled" name="campo_disabled" size="5" readonly="readonly" value="deshabilitado"/> <input type="text" id="campo_readonly" name="campo_readonly" size="5" disabled="disabled" value="solo lectura"/> input { border: #7f9db9 1px solid; padding:0 0 0 3px; font-family:Tahoma,Georgia,serif; font-weight: lighter; color:#007EF4; } input [disabled] { background-col...

HTML. para teléfonos moviles.

Este articulo lo encontré en http://www.genbeta.com Adapta cualquier web para verla cómodamente en el teléfono móvil A veces los trucos más utiles son los que desconocemos y los más sencillos de realizar. Así, si por ejemplo quieres adaptar una página web para poder verla en un teléfono móvil, no te compliques la vida y prueba a acceder a esta web, donde debes de poner la web que te interesa ver en versión lite. http://www.google.com/gwt/n?u=www.paginaweb.com Además, este truco puede servirte también para acceder a páginas web que no puedes ver debido a restricciones de nuestro proveedor o censura del país donde estés.

HTML. Border redondos.

Me enteré de este generador de bordes de google, através de sigt.net Google tiene su propio generador de esquinas redondeadas y es francamente útil, rápido y trabajado. Solamente hay que entrar en una dirección tipo: http://groups-beta.google.com/groups/rou ndedcorners?c=999999&bc=white&w=4&h=4&a=tr Poniendo los parámetros que más nos gusten en la propia URL (mirad en las partes en negrita de la url anterior): * c: el color en formato hexadecimal como en los ficheros CSS, acepta la forma reducida y la completa (RGB o RRGGBB, 123 o 112233) pero sin poner el #. También se pueden usar los nombres de color de la especificación CSS2: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, y yellow. * bc: el color de fondo, mismo comportamiento que c. Un truco: si dejamos el parámetro bc vacío el fondo de pantalla es transparente. * h: alto en pixels. Si lo dejas en blanco por defecto es 8. * w: ancho en pi...

HTML. div en lugar de table II

La distribución del contenido html es posible sin el uso de tablas. En el ejemplo podemos distribuir el contenido típico de cabecera, menu a la derecha y contenido a la izquierda. Con el uso de los estilos float: left; float: right; clear: left; clear: both; Podemos distribuir el contenido de nuestra web sin necesidad de tablas. Echar un vistazo al ejemplo más completo en HTML organizar el contenido con divs También ejemplos visuales de divs con distintos css en la propiedad de display Y cómo no la w3c con su guía de referencia rápida de css y xhtml: Guía de Referencia CSS 2.1 Guía de Referencia XHTML <div id="cabecera" style="border: 1px solid blue;"> cabecera </div> <div id="cabecera2" style="border: 1px solid blue; clear: both;"> cabecera2 </div> <div id="menu" style="float: left; border: 1px solid blue; width: 200px;"> <div>menu 1</div> <div>menu 2</div> ...

HTML. div en lugar de table

Podemos organizar el contenido html en lugar de con table con div. Es muy útil ya que nos enseña a manejar el contenido como recomienda la w3c. Muchas páginas se nos muestran ya sin usar ni una sola tabla, visita www.php.net y verás como no hay un solo tag table, ni tr, ni td Este apunte lo recogí de www.anieto2k.com Solución inline-block //CSS .table { } .table .row { } .table .row .cell { display: inline-block; } //HTML <div class=”table”> <div class=”row header”> <span class=”cell” style=’width:50px;’>Header Column 1</span> <span class=”cell” style=’width:50px;’>Header Column 2</span> </div> <div class=”row body”> <span class=”cell” style=’width:50px;’>Body Column 1</span> <span class=”cell” style=’width:50px;’>Body Column 2</span> </div> </div> Esta solución, funcionará en la mayoría de navegadores, aunque rompe la regulación de la W3C y...

HTML. Mostrar código html dentro de una página html

Para mostrar directamente el código html dentro de una web deberemos remplazar los caracteres que abren y cierran cada tag. Sustituimos cada caracter < por &lt; y cada caracter > por &gt; ejemplo: <div>Hola mundo!</div> &lt;div&gt;Hola mundo!&lt;/div&gt;