Archivo para ‘Varios’ Categoria
Cómo encontrar los código o direcciones URL de las imágenes de tu web
14 de Noviembre de 2011Aprende a encontrar el código de la imagen o la URL de las imágenes y luego agregar el código de la imagen a tu página Web.
Busca la imagen en tu web.
Haz clic con el botón derecho sobre la imagen y selecciona Copiar la ruta de la imagen.
Una vez que tengas la URL de la imagen, puedes agregarla al documento HTML.
<img src = ”
Pegar en la URL.
Type:
“alt =” Tu texto alternativo “>
Carga tu página web y prueba en el navegador
Tu código de la imagen final se verá algo como esto:
<img src=”URL” alt=”alternate text”>
Consejos:
Los atributos de anchura y altura no son necesarios en las imágenes, pero nos ayudan a cargar más rápido. Si sabemos las dimensiones de nuestra imagen, debemos incluir los atributos height = “” y width = “”.
Por ejemplo:
<img height=”300″ width=”200″> src=”imagen.gif” alt=”image”
Texto alternativo: Describe tu imagen en el atributo alt. Si la imagen tiene un texto en el mismo, el texto alternativo debe decir lo mismo que la imagen.
Dimensiones: El ancho de la imagen y la altura se definen en píxeles, pero no incluyen el “px” en su anchura o la altura de los atributos. Utilizar siempre las dimensiones exactas.
¿Cómo conseguir tablas al estilo Excel solo con CSS y con CSS y jQuery?
24 de Abril de 2011PLAN A: Solución CSS
La solución CSS solo tiene lugar si los anchos de las columnas de la tabla tienen una dimensión fija y siempre será así. En caso contrario, hay que aplicar el plan B (con jQuery).
Para poder conseguirlo, debemos dividir la tabla haciendo buen uso de THEAD, TBODY y TFOOT (en caso de ser necesario). Yo no lo voya usar, por simplificar esto, pero el método a aplicar es exactamente el mismo. Aunque, expresamente indico que solo tendría sectido aplicarlo si se requieren especificar la sumatorias de totales, promedios, etc. Pero que sean valores que dependan de las columnas de contenido. Porque de otro modo, es más fácil aplicar una solución fuera de la tabla. Bueno, sin más preámbulos, paso a indicar la estructura de la tabla:
Hay que fijarse que he aplicado la misma clase para los TH del THEAD que para los TD del TBODY. Lo importante es que los anchos de las columnas sean los mismos tanto en el THEAD como en TBODY de la tabla.
Para poder llevara acabo el scroll, haremos servir algo bastante lógico en CSS: el overflow. Hay que tener en cuenta que para poder aplicar esta propiedad, el contenedor sujeto debe de ser un bloque (display:block). He aquí el motivo de los problemas con las columnas que no tengan un ancho definido, dado que las mismas las distribuye el mismo navegado dinámicamente en función del espacio que debe ocupar la tabla y la celda.
Repito: Hay que tener en cuenta que en efecto esta solución no tiene sentido si se aplican tablas con ancho 100% o que hayan celda(s) sin ancho definido.
PLAN B: Solución CSS + jQuery
Bueno, primero, preguntarse por qué no solo con CSS. Pues, básicamente porque CSS resuelve buena parte del problema. Sin embargo, para poder aplicar un THEAD fijo, debemos modificar el objeto de tal modo, que el THEAD con sus repsectivos TH pierde la referencia de los anchos proporcionados por los valores de los TBODY>TD. Siempre y cuando estos valores no hayan sido especificados por CSS.
Indico la estructura de la tabla y estilos básicos, teniendo en cuenta que la estructura es casi idéntica a la del Plan A, con la diferencia de que las columnas no tendrán un tamaño definido.
Con esta base, veríamos que el scroll funciona correctamente, pero algo sucede con el THEAD. Al definir su propiedad display:block, perdemos la referencia de anchos del TBODY que dinámicamente han quedado dispuestos por el navegador, en función de la cantidad de texto ocupado por la celda, ancho de la tabla y ancho de las celdas, si existe alguno definido.
En pocas palabras, todo funciona a excepción de la disposición de elementos del THEAD. Así pues la solución al caso sería sencilla: Aplicar los mismos anchos que tengan los TD del TBODY a los TH del THEAD. Hay que tener en cuenta que no es posible aplicarla con estilos CSS. Porque necesitamos conocer cuál ha sido el ancho que dinámicamente se le ha asginado a cada celda el navegador. Lo que depende de muchos factores, todos ellos girando alrededor de si la tabla tiene un ancho definido al 100%, no tiene ancho definido o tienen sus celdas algunos anchos definidos.
Uso jQuery para poder :
Y en efecto, esto debería funcionar, si no fuera porque en el ejemplo, no he aplicado el reset de estilos CSS, con el que no habría margin ni paddings deginidos en el objeto tabla. Así pues, esto planteado tal cual, sin reset, falla. Pero, ¿por qué? Porque el margin y el padding en el método width() de jQuery no se incluye.
Podríamos usar este otro método outerWidth() que jQuery nos provée en versiones posteriores a la 1.2. El cuál sí nos devuelve el ancho del objeto tenienedo en cuenta el padding y el margin que haya definido.
Hay que tener cuidado con los paddings y borders. Son los mayores causantes de problemas.
Top Programas de gráficos Web para Macintosh
8 de Abril de 2011Cuando se trata de seleccionar un programa de gráficos Web, hay tantas opciones que a menudo puede ser difícil determinar qué programa es el adecuado. Si bien la tendencia es querer ir siempre a buscar el más popular, no siempre es la opción más adecuada para las necesidades de cada persona.
1. Adobe Photoshop
Photoshop es uno de los programas disponibles más avanzados y versátiles, y los desarrolladores de webs siempre quieren tener Photoshop en su arsenal de herramientas. Photoshop ofrece herramientas y funciones para la creación de animaciones GIF, imágenes, optimización de corte, procesamiento por lotes y automatización. Se integra perfectamente con otros productos de Adobe como Illustrator, Dreamweaver, Fireworks, Flash, y GoLive.
2. Adobe Fireworks
Fireworks se ha desarrollado desde cero específicamente para satisfacer las necesidades de los profesionales del diseño web. Fireworks tiene características de estrecha integración con otros productos de Macromedia como la herramienta de animación vectorial, Flash y Dreamweaver. Fireworks sólo es capaz de trabajar en el entorno de color RGB, por lo que no es una opción apropiada para trabajar con imágenes destinadas a la impresión comercial. Fireworks se integra perfectamente con otros productos de Adobe como Illustrator, Dreamweaver, Photoshop y Flash.
3. Stone Studio
Esta suite de diseño web para Mac OS X incluye Create, PhotoToWeb, PStill, GIFfun, Slice & Dice, Pack Up & Go, y TimeEqualsMoney. Create es el principal componente de diseño web y se puede comprar por separado. Ofrece herramientas de texto, dibujo, efectos, producción automatizada de la página web, desarrollo de contenidos, y las características de diseño de la página. PhotoToWeb te permite crear álbumes web de fotos y presentaciones de diapositivas. GIFfun crea banners animados. SliceAndDice crea mapas de imagen y barras de navegación.
4. Adobe Photoshop Elements
Photoshop Elements está construido alrededor de los elementos básicos de la interfaz de Adobe Photoshop sin las características de la gama alta. Elements es principalmente una herramienta para edición de fotos, procesamiento y mejora, pero también puede funcionar para la creación de gráficos Web, tales como botones, banners, animaciones y galerías web para su uso personal y empresarial. Está diseñado principalmente para los fotógrafos aficionados,
Definir los principios de diseño a través de la metáfora o alegoría.
20 de Marzo de 2011Lección 1
En general, todos los principios de diseño se aplican a cualquier cosa que se pueda crear.
Rara vez hay una sola manera correcta de aplicar cada principio.
Balance
Tratemos de caminar una larga distancia con una bolsa de 2 kilos de rocas en una mano y una bolsa
de 10 kilos de canicas en el otro. Después de un tiempo querremos hacer un cambio en nuestras bolsas
poniendo unas pocas canicas en la bolsa de las roca para balancear la carga, y que sea más fácil
caminar. Así es como funciona el equilibrio en el diseño. El equilibrio visual proviene de elementos
de la organización en la página de modo que ningún sector es más pesado que el otro. En caso contrario
el diseñador puede lanzar intencionalmente elementos fuera del balance para crear tensión o un estado de ánimo.
Proximidad / Unidad
Observemos a un grupo de personas en una habitación. A menudo se puede aprender mucho acerca de quién está
escuchando atentamente, los que parece que no están, o los que tienden a ignorar
dependiendo de lo cerca que estén sentados o bien de pie.
En el diseño, la proximidad o cercanía crea un vínculo entre las personas y entre los elementos
de una página. La unidad también se logra mediante el uso de un tercer
elemento para conectar partes distantes.
Alineación
¿Imagináis lo difícil que sería encontrar vuestro coche en un estacionamiento lleno de gente si todo el
mundo ignorara las rayas del estacionamiento y se estacionaran en todas direcciones y en cuaquier ángulo?
La alineación pone orden en el caos, en un estacionamiento y en un pedazo de papel.
Repetición / Coherencia
¿Qué pasaría si las señales de stop fueran de color rosa, amarillo en círculos, triángulos o verdes,
dependiendo de los caprichos de una ciudad o de sus residentes? Imaginemos los atascos
de tráfico y los accidentes a que eso llevaría . La repetición de elementos de diseño y el uso conlos
de forma segura.
Contraste
Imaginemos que estamos en un partido de baloncesto, un equipo profesional se parece mucho a otro.
Pero si enviamos a algunos de estos jugadores a dar un paseo por cualquier calle de la ciudad,
algo se hará evidente – los jugadores serán mucho más altos que el hombre promedio en la calle.
Eso es contraste. En el diseño, grandes y pequeños elementos, como el blanco y negro, cuadrados o círculos,
pueden crear un contraste.
Espacio en blanco
¿Alguna vez te has metido en un coche en pleno verano con otras 10 personas?
Si te ha tocado estar en la parte inferior, seguramente lucharás a codazos por llegar
a la ventanilla y obtener un soplo de aire fresco. Realmente no es cómodo, ¿verdad?
Los diseños que tratan de meter demasiado texto y gráficos en la página no nos hacen sentir cómodos
y además nos serán imposibles de leer.
El espacio en blanco le da al diseño un espacio para respirar.
Reducir el tamaño de las fotos para su uso en la web
6 de Marzo de 2011En primer lugar hay que recortar la imagen para eliminar partes innecesarias. Después, podemos cambiar las dimensiones en píxeles para generar una imagen más pequeña.
Cualquier software de edición de fotos tiene un comando para cambiar las dimensiones en píxeles de una imagen. Lo podemos buscar en “Tamaño de imagen”, “Cambiar el tamaño,” o “Volver a muestrear.” Cuando se utiliza este comando se presenta con un cuadro de diálogo para introducir los píxeles exactos que deseamos utilizar.
Nunca, cambiaremos el tamaño o sobrescribiremos en el archivo original.
Después de cambiar el tamaño de la imagen, nos aseguráremos de hacer un Guardar como para no sobrescribir el archivo original y lo guardaremos como un archivo JPEG.
Al elegir el nivel de compresión, mantendremos la calidad en la gama media alta.
Trataremos de no sobrepasar los 100 KB por página Web en total de imágenes.
Esto puede sonar como un proceso que consume tiempo, especialmente si tenemos un montón de fotos para compartir, pero afortunadamente la mayoría de softwares actuales permiten comprimir un lote de fotos rápidamente. Algunos programas incluso pueden cambiar el tamaño, comprimir, y generar galerías completas de fotos para su publicación en la Web. Y hay herramientas especializadas para ambas tareas – muchos de ellos de software libre.
Los elementos de diseño. Construcción del Diseño
11 de Enero de 2011Los elementos del diseño son los pilares del diseño. Estos elementos son los que componen cada página que se genera. Y comprender estos elementos básicos nos hará capaces de elaborar más páginas web de gran alcance y mayor calidad.
Hay cinco elementos básicos de diseño:
Líneas y línea de trabajo
Las líneas son las fronteras y las reglas. Pueden ser horizontales o verticales y ayudar a delinear los espacios alrededor de los elementos en las páginas Web. La línea de trabajo aumenta la legibilidad del diseño. Pueden mejorar la comprensión y la legibilidad de un diseño, pueden ser utilizadas como un borde alrededor de elementos o un divisor entre los elementos.
Las líneas en el diseño web se pueden utilizar de muchas maneras:
- Fronteras alrededor de los elementos
- Líneas divisorias entre los elementos
- Contornos alrededor de los elementos
- Decoración
Hay tres maneras de incluir las líneas de trabajo de diseño Web:
1. La etiqueta <hr/> son líneas horizontales en los documentos de la página web. El estilo de la etiqueta <hr/> puede mejorar las líneas a futuro.
2. CSS ofrece muchas maneras de agregar bordes a los elementos. Con las fronteras de una o dos caras de un elemento, podemos crear líneas que son un poco más interesantes que un borde cuadrado simple.
3. Las ideas pueden ser utilizadas como líneas y bordes para crear efectos más decorativos.
Forma
Formas para hacer cualquier contorno cerrado en el diseño. Las formas en la mayoría de las páginas Web son cuadradas o rectangulares. No siempre tiene que ser así, se pueden utilizar imágenes para generar otras formas dentro de los diseños. Se utilizan para transmitir el significado y organizar la información. Las formas pueden ser de 2 dimensiones o 3 dimensiones.
Hay tres tipos básicos de formas:
- Formas geométricas
- Formas naturales
- Formas abstractas
Las formas en el diseño web se puede utilizar de muchas maneras:
- Agregar interés a un diseño
- Mantener el interés
- Organizar elementos separados
- Dirigir la vista a través del diseño
Figuras geométricas:
Las formas geométricas son lo que la mayoría de la gente piensa cuando piensa en las formas. La mayoría de las formas geométricas en las páginas web se crean a través de la disposición y CSS. Algunas formas geométricas comunes que se ve en las páginas Web son:
- Cuadrados y rectángulos
- Círculos
- Triángulos
- Diamantes
Las formas naturales:
Las formas naturales son formas que se encuentran en la naturaleza, y también suelen ser formas de objetos hechos por el hombre. La mayoría de las formas naturales en las páginas web se crean con imágenes. Algunos ejemplos de las formas naturales son:
- Hojas
- Charcos
Resumen formas:
Las formas abstractas son las que tienen una forma reconocible, pero no son “reales” de la misma manera que las formas naturales. Por ejemplo, un dibujo de palo de la figura de un perro es un perro de forma abstracta, un perro en una foto es una forma natural. Las formas abstractas en el diseño Web se agregan generalmente a través de imágenes.
Algunos ejemplos de formas abstractas son las siguientes:
- Alfabeto glifos
- Iconos
- Símbolos
Textura
La textura es lo que le da un diseño de la sensación de una superficie. Es el sentido del tacto de los elementos en el diseño. En el diseño web, la textura es visual. Algunas texturas más comunes son:
- En bruto
- Suave
- Dura
La textura en el diseño web se puede utilizar de muchas maneras:
- Fondos
- Énfasis
- Diseños estilizados, como grabados o aguafuertes
La manera más común para incorporar la textura en los diseños Web es con la propiedad de estilo background-image. Podemos poner imágenes de fondo en la mayoría de los elementos a nivel de bloque, que nos permite agregar textura a lo largo de las páginas web.
Color
El color es el elemento de diseño en el que la mayoría de diseñadores de páginas web son muy conscientes, aunque es muy importante, el color no es un elemento necesario en cualquier diseño. De hecho, un buen plan de diseño no usa el color en primer lugar, sino que lo va añadiendo poco a poco y a medida para mejorar el diseño.
Algunos de los mejores diseños se hacen con sólo en blanco y negro o un toque de un solo color.
El color en el diseño web se puede utilizar de muchas maneras:
- Fondos
- Texto en primer plano
- Imágenes
El color es muy fácil de añadir a las páginas Web. Hay muchas propiedades de estilo para añadir color, incluyendo:
- El color de primer plano, como las fuentes y texto
- El color de fondo, que cambia el color de fondo del elemento
- Las fronteras de color para cambiar el color de los bordes alrededor de los elementos
También puede añadir color a su diseño a través de sus imágenes. Imágenes JPEG para las fotografías y GIF para imágenes de color plano.
Dirección
La dirección le da movimiento a los diseños web, le proporciona el estado de ánimo y la atmósfera. La dirección da la ilusión de movimiento dentro de un diseño. En la mayoría de los diseños hay una sensación de movimiento en una dirección a través del mismo. Los buenos diseños dirigen la vista a través del diseño de una manera deliberada para que el espectador vea lo que el diseñador quiere.
Hay tres direcciones básicas en el diseño:
- Horizontal
- Vertical
- Diagonal
En el diseño web, la dirección es más a menudo retratada por las imágenes en la página. Pero se puede imponer dirección a través de la colocación de elementos de la página, y con líneas especialmente cuando tienen puntas de flechas sobre ellas.
Se puede incorporar la dirección en los diseños web de las siguientes maneras:
- Miramos las imágenes para determinar la dirección a la que los sujetos se enfrentan. Si la gente en la foto están mirando hacia la derecha, entonces debemos colocar la imagen en el lado izquierdo de la página. En caso contrario la dirección de los ojos en la foto dirigirá los ojos de los lectores fuera de la página.
- Utilizaremos su disposición para sugerir la dirección. La posición de los elementos densos, como las fotos, en las líneas horizontales, verticales o diagonales. Mientras que los elementos menos densos, como el texto, los rodeen.
- Utilizaremos las líneas, ya sea imágenes o etiquetas de recursos humanos, para sugerir el movimiento y la dirección.
Selectores de CSS 3. Avanzar hacia el futuro del CSS
11 de Enero de 2011CSS 3 selectores de atributos
CSS 2 permitió a los diseñadores web empezar a seleccionar el contenido de los atributos. Con CSS 3, ahora podemos seleccionar las coincidencias parciales de cadenas en los atributos. Esto nos da más flexibilidad. Hay tres selectores de atributos nuevos:
A partir del atributo
Este selector se seleccionará en las coincidencias exactas del inicio de la cadena del atributo.
a[href="ftp:"] { … }
Fin del atributo
Este selector se seleccionará en las coincidencias exactas al final de la cadena del atributo.
a[href=".a2sistemas"] { … }
Coincidiría apuntando a unos únicos vínculos. Sitio a2sistemas.
Cualquier sub-cadena del atributo
Este selector coincidirá con cualquier atributo que tiene la sub-cadena dentro de ella.
img[src="photos"] { … }
Se correspondería con cada imagen que ha tomado fotografías en el atributo src. Por ejemplo “/ images/photos/image1.gif” y “/ photos/image2.gif” y “photos.gif”.
CSS 3 Pseudo-clases
Hay varias pseudo-clases de nuevo añadido en CSS 3 que funcionan en Firefox y Mozilla.
Root pseudo-clase representa el elemento raíz del documento . Así que los diseñadores que trabajan con XML, puede aplicar estilos a todo el documento sin saber exactamente qué es el elemento raíz.
:root { … }
El último niño pseudo-clase es similar a la :first-child pseudo-clase en CSS 2, pero se refiere al elemento secundario anterior.
p:last-child { … }
El objetivo pseudo-clase es útil para llamar la atención del texto que se dirige cuando en una etiqueta de ancla se hace clic.
:target { … }
Pseudo-clase permite seleccionar los elementos que no están representados por el argumento. Tengamos cuidado con éste, como las etiquetas HTML y el cuerpo son elementos también, a menudo coinciden menos ya que son muy específicas. Por ejemplo, este estilo le señalará las imágenes sin una etiqueta alt:
img:not([alt]) { border: thick solid yellow; }
CSS 3 Combinar hermanos
Este selector permite seleccionar un elemento que tiene un hermano específico en común, pero no tiene que ir directamente uno junto al otro en el documento. Sin embargo, el primer elemento de la propiedad debe ser el primero en el documento. Por ejemplo, para seleccionar todos los siguientes blockquotes de un elemento H3 se escribiría:
h3 ~ blockquote
Esto coincide con todos los siguientes blockquotes de un elemento <h3> independientemente de qué elementos se encontraban en el medio.
Selectores de estilo descendientes en hojas de cascada
22 de Octubre de 2010Definir estilos en elementos específicos
Los selectores descendientes en CSS permiten definir los estilos en los elementos que se encuentran en lugares específicos en la estructura del documento XHTML. Estos selectores se definen como patrones, para que pueda definir los elementos hijo, nieto, etc.
Definir un selector descendiente por la separación de los elementos pertinentes, con el espacio:
p div (background-color: # ccc;)
Esto repercutirá en todos los elementos p que están dentro de un elemento div. Pero los elementos p que estén dentro del cuerpo del documento no se verían afectados.
También podemos utilizar patrones para definir sus selectores:
* em div (background-color: # marco de cooperación;)
Esto afectará a todos los elementos em, nietos de un elemento div. En otras palabras, cualquier em que está por debajo de los dos elementos div. Por ejemplo:
<div> <p> <em> Esta es una </ em> </ p> <em> Este no es un </ em> </ div>
Compatibilidad con exploradores
El selector de descendiente con los patrones no funciona en Netscape 4 ó IE 4 Windows e IE 5 (Macintosh).
Selectores de estilo Hijos en hojas de cascada Las definiciones precisas de los estilos CSS
22 de Octubre de 2010En CSS un elemento primario es un elemento que contiene otros elementos. Todos los elementos que están contenidos dentro de ese padre se llaman “hijo”. Usar el selector CSS hijo, puede definir propiedades que sólo afectan a elementos que son hijos de otros elementos específicos. Cada elemento es un hijo de otro elemento, excepto el elemento raíz, que no tiene padre.
Para seleccionar todos los párrafos que son hijos de la etiqueta <body>, escribiríamos:
body> p (background-color: # 00f;)
Esto es similar al selector descendiente, pero sólo se pueden definir los hijos, nietos o inferior.
Podemos combinar los selectores hijos con los selectores de otro tipo, como descendientes:
div ul li> p (background-color: # 00f;)
Esto afecta a los elementos a la AP que es un descendiente de Li, que es un hijo de ul que es un descendiente de div.
Compatibilidad con exploradores
Internet Explorer 6 e inferior (Windows) y 4.5 e inferiores (Macintosh) no son compatibles con este selector. Netscape 4 e inferiores no son compatibles con este selector.
¿Por qué utilizar CSS descendientes?
27 de Septiembre de 2010Cuando diseñamos un nuevo documento, siempre es una buena idea modelarlo, especialmente de objetos comunes como <h1> y <p>. De esta manera, incluso si sólo hay un tipo de <h1> en el documento podemos estar seguros de que no se verá afectado el cambio de estilos en el futuro si otro tipo de <h1> se añade.
Por ejemplo:
div # principal h1 (border-bottom: 5px sólidos # ccc;)
