Posts Tagged ‘tutoriales’
Escrito por Marc | Archivado en Desarrollo web, Tips
Pues si amigos, desde hace unos días se ha estado difundiendo esta información, la he visto en un par o tres de blogs y hasta el momento no he visto oportuno comentar la noticia, una noticia que me parece explendida!
Si amigos, por que todos los que llevamos nuestros añitos en el sector y que pasamos unos ratos memorables con las tablas, intentando montar verdaderas estructuras para maquetar los diseños inmaquetables de nuestros grande amigos con los que vivimos en simbiosis los diseñadores (larga vida!! au au au). Intentando no anidar mas de 2 tablas en una web, viendo como poco a poco iban desapareciendo, siendo enterradas por las capas (DIV's), siendo utilizadas para tareas tan mundanas y básicas como la creación de cuadriculas con contenidos o alineamientos imposibles en horizontal...
Pues si, vuelven las tablas, pero no de la forma en que las conocemos, vuelven adaptadas a los nuevos tiempos, vuelven reconvertidas y reinventadas en CSS para utilizar al gusto y antojo con nuestras capas (DIV's).
Realment hay situaciones que con las tablas era cosa de 5 minutos, pero con las malditas capas, te pasabas un buen rato anidando y alineando con FLOATS a lado y lado...ufff que bien nos va a venir este apaño!!!
Según puedo leer y entender en un par de artículos en inglés (aviso, mi inglés es un poco wat you name :P), Ahora podremos crear una estructura de capas basada en tablas, con sus denominaciones de FILA, COLUMNA, asignando propiedades de CSS2 del tipo:
Podemos ver que para ello, usamos la propiedad DISPLAY de nuestras capas.
Cabe destacar que esto según he leido por ahí viene dado por la inminente salida de Internet Explorer 8 y su mejorado soporte para dichas propiedades: TABLE, TABLE-ROW, TABLE-CELL
Como se va a usar:
- TABLE: Hace que el elemento se comporte como una tabla.
- TABLE-ROW: Hace que el elemento se comporte como una fila (TR).
- TABLE-CELL: Hace que el elemento se comporte como una celda (TD).
- TABLE-ROW-GROUP: Hace que los elementos se comporten como el cuerpo de una tabla (TBODY).
- TABLE-HEADER-GROUP: Hace que los elementos se comporten como la cabecera de una tabla (THEAD).
- TABLE-FOOTER-GROUP: Hace que los elementos se comporten como el pie de una tabla (TFOOT).
- TABLE-CAPTION: Hace que el elemento se comporte como leyenda.
- TABLE-COLUMN: Hace que los elementos se comporten como columna (COL).
- TABLE-COLUMN-GROUP: Hace que los elementos se comporten como un grupo de columnas (COLGROUP).
Pues no se ve muy complicado no? Vamos a ver un ejemplo (no lo he echo yo, lo he cogido prestado de una de las webs que mas a bajo indico como referencia para saber mas)
Ejemplo práctico:
el HMTL
HTML:
-
<!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" xml:lang="en" lang="en">
-
-
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-
<title>CSS Level 2 with table based settings
</title>
-
<link href="tables.css" rel="stylesheet" type="text/css" />
-
</head>
-
-
-
-
Header information
-
</div>
-
-
-
Navigation list here
-
</div>
-
-
-
Nifty sidebar
-
</div>
-
-
-
What would your site be without content
-
</div>
-
</div>
-
</div>
-
</div>
-
</body>
-
</html>
el CSS
CSS:
-
body
-
{
-
margin-left: 0px;
-
margin-top: 0px;
-
margin-right: 0px;
-
margin-bottom: 0px;
-
}
-
-
#header
-
{
-
display:block;
-
margin:0px auto;
-
width:870px;
-
padding:15px;
-
background-color:#666;
-
color:#FFF;
-
}
-
/* nothing unusual so far */
-
-
#main
-
{
-
display: table;
-
margin:0px auto;
-
width:900px;
-
}
-
/* display: table to make the main div be treated by browsers as a table */
-
-
#nav
-
{
-
display: table-row;
-
width: 900px;
-
height:50px;
-
line-height:50px;
-
text-indent:15px;
-
background-color:#D6D6D6;
-
color:#333;
-
}
-
-
/* is treated as a table row */
-
-
#sidebar
-
{
-
display: table-cell;
-
width: 185px;
-
height: 500px
-
padding-left:15px;
-
background-color:#FF6633;
-
color:#333;
-
}
-
-
#content
-
{
-
display: table-cell;
-
width: 685px;
-
padding-left:15px;
-
background-color:#77BBDD;
-
color:#333;
-
}
-
-
/* are placed inside the same father element: columns (check out the XHTML), and are treated as table cells */
Aquí tenéis 2 enlaces donde poder leer y aprender un poco mas sobre esta fantástica noticia.
The Return of Table-Based Layout
Everything you know about CSS is wrong
Escrito por Victor | Archivado en General, Internet, Recursos
Esta compañía afincada en Australia, si se puede llamar afincada ya que la mayoría de profesionales con los que trabaja se comunican a través de E-Mail o skype, sostiene una lista de webs que representan un arsenal de recursos que aprovechamos profesionales del sector en muchas facetas de nuestro trabajo.
Todos conocemos sites como: FlashDen, AudioJungle, Theme Forest, PSDTUTS, AUDIOTUTS, NETUTS, ...
Son alrededor de 11 millones de páginas vistas al mes las que consiguen y por el pogresivo augmento en la calidad de sus recursos, tutoriales o guias se divisa un futuro prometedor para una moderna empresa con una enfoque muy acertado.
Escrito por Marc | Archivado en Tips
En este "Tip" (truco), vamos a explicar de una forma breve como sacar las imágenes que hay dentro de un documento WORD.
Este tema ya lo trate hace un tiempo en Nemawashi, el blog personal (personalisisisimo que regento, cuando tengo tiempo). Lo comento por que quizás a alguien le suena haberlo leído en otro lado.
Lo recupero, por que hace poco me he vuelto ha encontrar con el mismo problema y al ver que es un mal bastante común en internet, pues cuanta mas difusión tenga, mas fácil será encontrar la solución 
Al caso:
Hace tiempo me pasaron un dossier en formato .doc (de word) y me pidieron que si podía poner el texto que aparecía en el dossier junto con unas imágenes que también había en el .doc en una pequeña página web.
Pues ahí vino mi problema, no es nuevo, ya me había pasado otras veces con la documentación de algún cliente, pero siempre, le había pedido las imágenes a parte y listos, asunto arreglado.
En este caso, no era un documento de un cliente y claro, no tenía las imágenes, las habían borrado (maaaal hecho).
Pues nada, no se por que, hoy me ha dado por comerme la cabeza probando distintas maneras de hacerlo. He descartado el hacer una impresión de pantalla (Ctrl + Impr. pant) y luego con el photoshop recortar las imágenes, ya que con esto consigo la imagen en la calidad cutre-salchichera con la que word la muestra.
Después de darle muchas vueltas y de mirar en los menús del WORD donde esperaba encontrar un botón que dijera “extraer imágenes del documento…” o alguna cosa similar que me hiciera alavar al gran Microsoft, pero no, la solución ha sido “Guardar como página web”.
Lo mas flipante es que le di sin querer por que se me escapo el ratón…y ya que estaba, decidi completar la acción. Me di cuenta que al guardar el .doc como página web, word genera un html y una carpeta con los archivos que hay incluidos en el documento, en este caso imágenes, y que las deja en su calidad original (la calidad con la que se hizo el insert de dichas imágenes en el documento).
Así que, para todo aquel que lo necesite, para extraer imágenes de un .doc (word) en su calidad original, usad “Archivo > Guardar Como > Guardar como página web”. Esto generará una serie de carpetas en la ubicación donde marquéis para guardar el .html generado y en una de estas carpetas deben de estar las imágenes.
Escrito por Victor | Archivado en Recursos
Una web muy práctica que lista enlaces útiles para el diseñador: tutoriales, webs de referanecia, recursos, ... La idea sintetizadora es muy inteligente y determinamos a kaosconcept como un site de visita periódica.
Escrito por Marc | Archivado en Desarrollo web, Tips
Muchas veces, abrimos una ventana flotante donde hemos puesto un formulario desde el cual actualizamos datos. Casi siempre suele ser un listado de datos, registros listados de una base de datos y el pop-up suele contener un pequeño FROM para actualizar datos básicos.
Solemos abrir este pop-up para actualizar datos y cuando hacemos esto, lo ideal es que la ventana donde esta el listado (padre del pop-up que hemos abierto) se actualice al hacer el submit de los datos y de este modo podamos ver el resultado sin tener que forzar la recarga de dicho listado con un click o usando cualquier atajo de teclado.
Esto es muy fácil de hacer desde javascript, solamente necesitamos una linea de código. Ésta linea tenemos que añadirla al final de la página que procesa el PHP o ASP, vamos el lenguaje de servidor que realice la inserción de los datos en la base de datos.
JAVASCRIPT:
-
window.opener.location.reload();
Fácil, no? Pues si además queremos que una vez recargada la página padre el pop-up se cierre automáticamente, solamente le tenemos que añadir una linea mas a este código.
JAVASCRIPT:
-
window.opener.location.reload();
-
window.close();
Cabe destacar que este código sirve para cualquier página que esté escrita en lenguaje script, ASP o PHP ya que dicho código es javascript y se interpreta íntegramente en el navegador del cliente/usuario.
Escrito por Victor | Archivado en Recursos
Esta web recoge un buen número de tutoriales para diseñar en Photoshop, con una estructura y un contenido excelentes.
