Artículo Ofrecido al Azar

EFECTO TV EN PHOTOSHOP

El Efecto TV, es un efecto que últimamente he visto en muchos trabajos, no se si a modo de tendencia o no, pero aquí os dejo este recurso para que podais saber como llevarlo a cabo. Pinchar en la imagen para ver mejor el efecto. La idea es muy básica, para ello os dejo a continuación varios archivos: 1)...

Read More

EL MENU DESPLEGABLE DEFINITIVO

Posted by admin | Posted in CSS, HTML, JAVASCRIPT, MYSQL, PHP, PROGRAMACIÓN, RECURSOS, RECURSOS WEB, XML | Posted on 27-08-2010

0

El menú desplegable definitivo.

Hace algunas semanas compartimos con todos vosotros un post que os permitia descargar menus desplegables clonados de portales de referencia en internet. Sé que no es bueno copiar, pero os lo dejé para que vierais como estaban desarrollados y estructurado su código.

Ahora os dejo una website, donde podreis personalizar vuestro menú desplegable para vuestros proyectos en internet. Este es el recurso definitivo, tras muchas horas y días dedicados a encontrar algo interesante, flexible y que me permitiera modificar a mi antojo, en cuanto a diseño y estructura, un menú desplegable.

Lo diho os dejo el recurso y espero que sea de ayuda para todos.

Menus desplegables, la solución definitiva

Recurso ofrecido por  | Juan García Delicado
sugerencias @ webmaster@4cuarenta.com

GANAR DINERO FACIL…Leé esto!

Posted by admin | Posted in 3D STUDIO, ACCESIBLIDAD, ACTIONSCRIPT, ADOBE, ADOBE FLASH, ADSENSE, ADWORDS, ANALITICAS, APPLE, ARTE FINAL, BRANDING SOCIAL, COMUNICACIÓN, COREL DRAW, CSS, CURSO PHP, CURSO SEO, CURSOS DIRECTOS, DISEÑO GRÁFICO, DISEÑO WEB, DREAMWEAVER, EMPRENDEDORES, EMPRESAS, GOOGLE, HTML, ILLUSTRATOR, INDESIGN, JAVASCRIPT, JOOMLA, LEGAL, LOPD y LSSI-CE, MICROSOFT, MYSQL, NOTICIAS, PHOTOSHOP, PHP, PNL, POSICIONAMIENTO WEB, PROGRAMACIÓN, PROYECTOS, PUBLICACIONES WEB, RECURSOS, RECURSOS GRÁFICOS, RECURSOS WEB, SEM, SEO, TWITTER, USABILIDAD, VIDEO-RECURSOS, WEB 2.0, WEB PROFESIONAL, WORDPRESS, XML | Posted on 19-07-2010

Etiquetas: , , , , ,

0

GANAR DINERO ES FÁCIL, Leé Esto!

RECURSOS WEB : 8 MENÚS DESPLEGABLES

Posted by admin | Posted in ACCESIBLIDAD, CSS, HTML, JAVASCRIPT, PROGRAMACIÓN, RECURSOS, RECURSOS WEB, USABILIDAD, WEB PROFESIONAL | Posted on 19-06-2010

Etiquetas: , , , ,

0

RECURSOS WEB: 8 MENÚS DESPLEGABLES

Desde Flashmania.es os dejamos 8 diseños de menus para que los podais descargar tranquilamente desde casa y lo apliqueis a vuestros proyectos. Seguro que os son de bastante ayuda, adecuando el diseño al proyecto que os traeis entre manos.

MAS DE 30 PLANTILLAS HMTL PARA CORREOS ELECTRÓNICOS

Posted by admin | Posted in CSS, DISEÑO WEB, DREAMWEAVER, HTML, PROGRAMACIÓN, RECURSOS, RECURSOS WEB | Posted on 04-05-2009

Etiquetas: , , , ,

1

Paseando por internet, encontré esta web, donde comparten gratuitamente más de 30 plantillas html para enviar por correo. la verdad que he visto alguno diseños muy interesantes y que nos ayudaría a mejorar nuestra imagen de cara a clientes y proveedores.

recursos web tempaltes para correos electrónicos

recursos web tempaltes para correos electrónicos

Os dejo el link, y espero de corazon que le saqueis partido

http://www.campaignmonitor.com/templates/



RECURSOS WEB: APUNTES DE DISEÑO WEB

Posted by admin | Posted in ACTIONSCRIPT, ADOBE FLASH, CSS, DISEÑO WEB, DREAMWEAVER, HTML, JAVASCRIPT, MYSQL, PHP, PROGRAMACIÓN, XML | Posted on 17-11-2008

Etiquetas: , , , , , , , , , , , ,

0

RECURSOS WEB: APUNTES DE DISEÑO WEB.

PAra todos los que me visitaís pienso que sería bueno una introducción muy escueta y resumida de qué es esto de Internet, como comenzó y los distintos formatos de creación web que hay hasta la fecha. Sé que la teoría no suena nunca bien, pero creo que puede aportarnos cosas interesantes.

¿QUE ES INTERNET? Y ¿SUS INICIOS COMO FUERON?

internet para el ciudadano de a pie, les diré que no es más que un grupo de computadoras, ordenadores que estan conectadas entre sí intercambiando información. El termino servidor web, lo unico que hace es facilitar estos intercambios de información, ya que los encontraremos trabajando simepre, 24 hrs al dia, los 365 días del año.

Sus inicios, aunque se han datado en fechas al rededor de 1970, internet como tal, vino posterior a eso. Ocurrio como con casi todas las cosas un avance tecnológico en bases militares que poco despues adoptaron universidades y mas tarde pasó a dominio público. La primera conexion la realizaron 3 universidades al conectar e intercambiar información entre ellas. pero a nivel militar, ya se desarrollaba desde hacía algun tiempo.

¿QUÉ ES…..?

“HTML”… el html no es más que un lenguaje de creacion y diseño de páginas webs, html, o tambien reconocido como htm. La página principal de un proyecto web, siempre es index.html, a menos que se usen otras tecnologias.

PHP-XML-JAVASCRIPT….todos son lenguajes de programación y que sirven de complemento a nuestros proyectos realizados en HTML. El php, es un lenguaje de lado del servidor web es decir, es un lenguaje que se procesa en el servidor web, y a traves de nuestros exploradores web, lo que vemos, no es más que lo “procesado” por el servidor.PHP, comunica con el servidor y procesa todo lo que queramos, formularios, respaldos de datos, envio de mails, peticion de datos….etc.etc

XML, es un lenguaje parecido al html, se designa de igual manera, con etiquetas, pero que nosotros podemos escoger libremente, no tenemos que llamar a las etquetas de una determinada manera como ocurre en html. muy válido para almacenar datos, o facilitar información.

JAVASCRIPT.. el javascript es un lenguaje de programación para entornos web, que realiza cosas en local, es decir en el ordenador del usuario, ejemplos prácticos, podrian ser.. validacion de formularios, introducir calves, ventanas de advertencia, etc,etc…

ACTIONSCRIPT…. es el lengujae de programacion que usamos para programar en adobe Flash. Cuando programamos, tenemos que tener en cuenta que programamos de dos maneras, gráficamente, para conseguir un mejor ascpecto o lógicamente, hacer inteligentes las cosas hacemos.

CSS….. se denomina de esta manera a las hojas de estilo, atendiendo a la accesibilidad web, de todo proyecto web, separaremos 3 cosas siempre, por un lado , el contenido, los textos, imaganes, etc.. y por otro la forma/diseño, que tabularemos siempre con otro lenguaje de programación, el css.

MySQL…lenguaje de programacion que ejecuta rutinas para creacion, modificacion, borrado … de bases de datos. potentísimo lenguaje.

Detras de esto comprendemos más lo complejo que puede llegar a ser una pagina web. dominar sin problemas 4-5 lenguajes de programación para hacer una web.

HTML+CSS+JAVASCRIPT+PHP+MySQL = a una web normalita.

Recurso Ofrecido por Juan Garcia Delicado
www.flashmania.es sugerencias en: webmaster@4cuarenta.com


RECURSOS WEB: CSS PARA VARIOS EXPLORADORES

Posted by admin | Posted in ACCESIBLIDAD, CSS, DISEÑO WEB, DREAMWEAVER, HTML, PROGRAMACIÓN, RECURSOS, RECURSOS WEB, USABILIDAD, WEB PROFESIONAL | Posted on 17-10-2008

Etiquetas: , , , , , , , , , , ,

2

RECURSOS WEB: DISEÑAR PARA VARIOS EXPLORADORES (RECURSOS CSS)

css en distintos exploradores

css en distintos exploradores

Como bien es sabido por todos, cuando diseñamos una web no obtenemos los mismos resultados. Una web que se vé genialmente tabulada en firefox, la vemos en Internet Explorer (IE, en adelante), y nuestro diseño ni por asomo, roza la genialidad, si lo miramos en versiones anteriores, IE 6 ó anteriores, el caos se hace cada vez mayor.
El principal problema de Internet explorer es que como esta gente de Microsoft, hacen lo que le dan la gana, pensando que alguien algún dia le seguirá sus pasos, pues pasa esto. Ellos no atienden para nada a los consejos y recomendaciones, W3C. Sí, tal y como suena. No hacen caso a las especificaciones que desde el consorcio de la web, se estipulan para mostrar debidamente las paginas web. Uno de los exploradores más extables del mercado (FIREFOX) es de los pocos que cumplen casi en tu totalidad con dichas “recomendaciones”

BUENO PERO AL GRANO….¿COMO DISEÑO PARA VARIOS EXPLORADORES?

Serán 4 pasos muy sencillos:

1. Siempre Diseñaremos para el sistema más estable. En este caso, Firefox. Si se vé genial ahí lo que queremos mostrar pasaremos al siguiente paso.

2. Veremos la web en la version IE6 y localizaremos las reglas de estan dando lugar a mal interpretaciones en IE6.

3. Duplicaremos esa regla de css y la renombraremos de la siguiente manera

ANTES>>>>>>>>>>>>>>>>>>>>>>>>> DESPUES
#wrapper>>>>>>>>>>>>>>>>>>>> *html #wrapper
Es decir, le pondremos “*html” por delante (sin las comillas)

3.A y modificaremos los valores de esa propiedad hasta ajustarla a nuestras necesidades.

hasta aquí si esa web se abriera en firefox, leería del css la propiedad #wrapper, mientras que si la abrieramso con IE6, leeria la otra *html #wrapper. Ya tenemos la web para dos plataformas, la “excelencia” (firefox) y la “decadencia” (IE).

4. Vamos a más vamos a abrir la web en IE7, y zas se han movido cosas verdad? de igual manera que en el 2. localizaremos los selectores base que pensamos que dan problemas, los duplicamos y los renombramos de la siguiente manera:

ANTES>>>>>>>>>>>>>>>>>>>>>>>>>> DESPUES
#photo>>>>>>>>>> *:first-child+html #photo
Es decir, le pondremos “
*:first-child+html” por delante (sin las comillas)

Y ya tendremos arreglada la compatibilidad para FIREFOX, INTERNET EXPLORER VERSION 6 y 7, SAFARI, OPERA….entre otras. en un 90% de los casos sufragando las debilidades de IE6, se arreglan casi todas las de IE7. por lo que esta última regla se usa poquísimo…

PAra los que quieran saber mas de css, os dejo también este link.

CSS PARA TODOS

Recurso Ofrecido por Juan Garcia Delicado
www.flashmania.es sugerencias en: webmaster@4cuarenta.com

RECURSOS WEB: SCRIPTS LISTOS PARA USAR

Posted by admin | Posted in ACCESIBLIDAD, ACTIONSCRIPT, ADOBE FLASH, CSS, DISEÑO WEB, DREAMWEAVER, HTML, JAVASCRIPT, MYSQL, PHP, POSICIONAMIENTO WEB, PROGRAMACIÓN, RECURSOS, RECURSOS WEB, USABILIDAD, WEB 2.0, WEB PROFESIONAL, XML | Posted on 24-09-2008

Etiquetas: , , , , , , , , , , , ,

0

RECURSOS WEB: SCRIPTS LISTOS PARA USAR

Buenas de nuevo os dejo un nuevo recurso para que le hecheis un vistacillo, se trata de una pagina web, donde podremos encontrar miles de scripts listos y totalmente operativos para insertar en nuestros proyectos webs. Todos o casi todos son Open Source, aunqeu tambien aprovechan en esta web para ofrecernos en bandeja, los scripts comerciales.

NO TODO ESTA HECHO

Cuando comencé en mi andadura profesional del campo del diseño web, me dí cuenta de lo sencillo que podria ser implementar “cosas/scripts” que otros ya habian realizado, la idea suena acojonante, las cosas como son…. pero la realidad no es tan así. Tras muchas horas de investigación acabas por darte cuenta que lo que te ofrecen, o puedes obtener para trus proyectos webs, no es al 100% lo que de verdad necesitamos.

Son recursos, que están ahí pero no terminan de solucionarnos las cosas, casi todos necesitan una adaptación a nuestras necesidades y es ahí donde aparece nuestra capacidad profesional, de “meterle mano a tó” para conseguir lo que de verdad necesitamos. Todo sea por logar llevar a cabo el proyecto de nuestro cliente.¿o no?
No me enrollo más y ahí os dejo el link

Recurso Ofrecido por Juan Garcia Delicado
www.flashmania.es sugerencias en: webmaster@4cuarenta.com








CONTENIDO LÍQUIDO EN X-HTML

Posted by admin | Posted in CSS, DISEÑO WEB, DREAMWEAVER, HTML, PROGRAMACIÓN | Posted on 20-07-2008

Etiquetas: , , , , , , , , , , , ,

0

Umm que buenísimo recurso, de hecho yo lo uso en casi todos mis proyectos webs, ya que le dá otra presencia a nuestro proyecto.

Ya da lo mismo, que se vea la web que vamos a realizar en un 15 pulgadas, o en un 24. Este recurso permite que el contenedor o div, se ajuste totalmente al centro del monitor que sea, tanto verticalmente como horizontalmente.

Podreis ver un ejemplo en diseño web, haced más grande y más pequeña la ventana del explorador ¿hacia dónde se vá el contenido?

¿COMO SE HACE?

1) para empezar tenemos que crear un div

HTML:
  1. <div> y </div> al que ademas le añadiremos una etiqueta para
  2. controlarlo via CSS, es decir algo asi
  3. <div id="mi_etiqueta">
  4. lo que queramos meter dentro de ese div
  5. </div>

Después de eso iremos al asistente de CSS, y tendremos como ya sabemos 2 opciones para llevar a cabo el css:
a)incrustandolo en el propio docmento( html/xhtml) o
b) con un archivo externo.
Acostumbraros a hacerlo desde un archivo externo siempre, ya que las normas de accesibilidad, quieren siempre lo mismo separar, contenido de la web, de la parte de diseño. Nada con respecto al diseño debe de estar en un html/xhtml, en estos documentos solo encontraremos "etiquetas-tag"(h1,h2,p,div....) y texto plano.Los estilos , ya sabeis, a full con CSS.

bien el codigo/propiedades del css es el siguiente contenido_liquido

HTML:
  1. //esta propiedad body, lo que hace es decirle que el
  2. //cuerpo de la pagina no tenga ningún margen,
  3. //dreamweaver tiene un problema y es que
  4. //los campos vacios, sin valores, por defecto,
  5. //el valor no es cero por eso el margen lo pongo
  6. // a cero pixeles, porque si nos damos cuenta
  7. //al abrir un documento nuevo, no escribe en la
  8. //posición 0,0,sino en la 5,5 , porque los campos
  9. //margin estan vacios....pero no con valor cero.
  10. //no es necesario si no quereis...
  11.  
  12. body {
  13.     margin-top: 0px;
  14.     margin-right: 0px;
  15.     margin-bottom: 0px;
  16.     margin-left: 0px;
  17. }
  18.  
  19. //la etiqueta de mi div la llamé wrapper
  20. // le dí via css lo típico, su ancho y su alto (900x 600px)
  21. //un borde solido en una tonalidad gris, pa ver el efecto
  22. //las posiciones arriba, abajo izda y dcha al 50%
  23. //los margins top y bottom es el valor negativo de
  24. //la mitad de nuestro alto del div y los margin left y
  25. //right es el valor negativo de la mitad de nuestro ancho
  26. //del div
  27. //¿porque tienen esos valores?
  28. //con css, le estamos dando una cordenada,
  29. //de acuerdo al punto central, del ancho y del alto,
  30. //es desde donde css, centra el div en la ventana,
  31. //si fuera una de las esquinas nos volveriamos locos,
  32. //y necesitariamos varios divs más para centrarlo
  33. // (de locos, ya hice pruebas..)
  34. este seria el css de mi div wrapper
  35. #wrapper {
  36.  
  37.     width: 900px;
  38.     height: 600px;
  39.         border: 3px solid #CCCCCC;
  40.     background-color: #FFFFFF;
  41.     left: 50%;
  42.     top: 50%;
  43.     right: 50%;
  44.     bottom: 50%;
  45.     vertical-align: middle;
  46.     position: absolute;
  47.     margin-top: -300px;
  48.     margin-right: -450px;
  49.     margin-bottom: -300px;
  50.     margin-left: -450px;
  51. }

espero os haya sido de ayuda!
RECURSO OFRECIDO POR www.flashmania.es,
Elaborado por Juan Garcia - webmaster@4cuarenta.com Julio 2008

[/html]







PHP PARA FORMULARIO XHTML

Posted by admin | Posted in DISEÑO WEB, DREAMWEAVER, HTML, PHP, PROGRAMACIÓN | Posted on 14-07-2008

Etiquetas: , , , , , , , , , , , ,

0

Muchas veces realizamos formularios que dan muchos problemas, con este php, podreís configurar muy facilmente los formularios de envio.

¿COMO SE USA?

1) Generar en vuestro editor de paginas Webs (Dreamweaver), el formulario que deseis.

2) Comprobar que las etiquetas

HTML:
  1. <form> y </form>

, estan cerradas correctamente y la zona inferior del panel de propiedades, encontraremos un campo de acciones para el formulario, ahí introduciremos el nombre el archivo php. Tendremos en cuenta ademas, su posterior ruta en el servidor. Si lo ponemos el nombre directamente, el php y el Xhtml/Html, ambos estarán alojados en el mismo nivel.

3) Configurar el archivo PHP, abriendolo por ejemplo en Dreamweaver o en wordpad, básicamente cualquier editor de texto, sirvirá. Guardaremos los cambios.

4) Lo subimos al servidor, tanto el HTML/XHTML como el PHP y comprobamos que todo va correctamente accediendo a ellos desde nuestro navegador.
Me gustaría comentar algo y es que hago todo lo posible porque cualquier persona con minimos conocimientos de web, pueda seguir, sin problemas estos recursos que os facilito. La gente más avanzada, no tendrá problemas en poner en marcha estas cosas tan sencillitas. Cualquier duda o problema no duden en contactar. Saludos!

Descargar php

RECURSO OFRECIDO POR www.flashmania.es,
Elaborado por Juan Garcia - webmaster@4cuarenta.com Julio 2008






RECURSOS WEB: HACER UN SCROLL XHTML

Posted by admin | Posted in DISEÑO WEB, DREAMWEAVER, HTML, PROGRAMACIÓN | Posted on 13-07-2008

Etiquetas: , , ,

0

HACER UN SCROLL HTML

Juan Garcia www.flashmania.es

Primero de todo se tendrá que crear un div.
En css un div, no es más que una división que actua de igual manera que una celda, de una tabla.CSS, nos permite dar miles de configuraciones, borde, ancho, alto, imagen de fondo, etc..etc.. a los div´s y es por ese motívo por el que las tablas pasaron a la historia y aparecieron los divs.
Los divs se crean de igual manera que cualquier elemento de HTML, con etiquetas de este tipo

dentro de la primera etiqueta podemos introducir propiedades, tal y como vamos a hacer con este scroll:
HTML:
  1. <div style="border: 1px solid red; padding: 4px; overflow: auto; width: 200px; height: 450px;">tutexto</div>

Al revisar este codigo primeramente tenemos el div style que muestra width and height con valores en pixeles, ahí anotaremos las dimensiones que deseamos que tenga ese scroll(ancho y alto). y el comando overflow, marcandolo como automático.

En segundo punto encontramos es el padding y el borde con su color y acontinuacion abrimos las etiquetasy

introduciendo entre ellas el contenido del scroll y finalmente cerraremos el

RECURSO OFRECIDO POR www.flashmania.es,
Elaborado por Juan Garcia - webmaster@4cuarenta.com Julio 2008




22 consultas en 0,611 segundos.