tag:blogger.com,1999:blog-34420754284113981072024-03-05T00:00:52.781-08:00All4ElectroAnonymoushttp://www.blogger.com/profile/18337267941037056109noreply@blogger.comBlogger5125tag:blogger.com,1999:blog-3442075428411398107.post-3050578859633563592013-12-24T08:35:00.002-08:002013-12-24T08:35:23.716-08:00All4Electro - Resto de Secciones<div style="text-align: justify;">
Buenas, esta será mi última entrada en este foro sobre la creación de una página web en este caso All4Electro. Me limitare ha capturas de pantalla explicadas como he hecho anteriormente para comentar los aspectos a resaltar en cada una. Finalmente aunque parece que esto no ha quedado muy claro decir que en el pie de la página donde se incluye mi nombre se enlaza con este foro.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Mi página esta disponible en <a href="http://all4electro.host22.com/All4Electro">all4electro.host22.com/All4Electro</a>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<u><b>Noticias & Novedades:</b></u> Al ser una página de nueva creación esta sección no está muy llena aunque con las nuevas noticias que nos envíen los clientes la iremos rellenando con una estructura por filas o bien enlazándolas a los sitios oficiales.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqd5dFMMv1gzxnxsUiU_sAewmlSPqySD3U0_B32gxmIM3NN5w_pb9tUcs6Ji9ZrH5uXwoDVM6NnFM3wMLI723rRxAC_yKWCX-ikrOmjVRbt_pAYHrdda_LTDIbek1wDKyqdBfnI_GIjNmA/s1600/noticias.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqd5dFMMv1gzxnxsUiU_sAewmlSPqySD3U0_B32gxmIM3NN5w_pb9tUcs6Ji9ZrH5uXwoDVM6NnFM3wMLI723rRxAC_yKWCX-ikrOmjVRbt_pAYHrdda_LTDIbek1wDKyqdBfnI_GIjNmA/s640/noticias.png" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<u style="font-weight: bold;">TOP DJ:</u> Como se puede ver en la foto esta sección es puramente HTML5 + CSS3 de forma vistosa para enseñar a los clientes la información sobre el TOP 10 de los DJs.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7NVdp9nf4QqsHCcRtM6GfON7sHMo0DgyLbf-6CpV-KXHD-nWMoWdzV-qeqmC4eJlMZPGp2IBgbKzbdQGcl0Kdf0Gwp6dQPpx53L7BiAf63olgAKNgk6KAlO-zxqFksRIyhnLswjDck8gY/s1600/topdj.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7NVdp9nf4QqsHCcRtM6GfON7sHMo0DgyLbf-6CpV-KXHD-nWMoWdzV-qeqmC4eJlMZPGp2IBgbKzbdQGcl0Kdf0Gwp6dQPpx53L7BiAf63olgAKNgk6KAlO-zxqFksRIyhnLswjDck8gY/s640/topdj.png" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<u style="font-weight: bold;">Eventos:</u> En esta sección se muestra nuevamente el calendario de google y una breve descripción de los eventos mas próximos:</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbfTGLKYcCSEP1Gebjtok8yDUXJE4dprhbCx5kaGdRkdAGgqIfomkfemk2hmLtT10NNGkg51XNqDB55oyri9tVpY00fTT6xzHtXoAkzgdqqstOXSo5ZVGJiu34sgL6WKsdnB0DdPo95lDa/s1600/eventos.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="469" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbfTGLKYcCSEP1Gebjtok8yDUXJE4dprhbCx5kaGdRkdAGgqIfomkfemk2hmLtT10NNGkg51XNqDB55oyri9tVpY00fTT6xzHtXoAkzgdqqstOXSo5ZVGJiu34sgL6WKsdnB0DdPo95lDa/s640/eventos.png" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Esto es todo lo relacionado con mi página.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
ACLARACIONES:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Todas las páginas están validadas según la W3C HTML5 no obstante tanto la página principal como la de eventos debido al calendario y al reproductor de música no hacen que sean válidas.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Hemos usado Nivo Slider para el image slider</div>
<div style="text-align: justify;">
Hemos usado JQuery Music Player plugin para el reproductor de música.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
El resto del diseño es mío sin plantilla ninguna. El código de JSONP y uso de BBDD han sido usadas del ejemplo de DepartamentosBBDD visto en clase.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Un saludo, </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Daniel Revilla Twose.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Anonymoushttp://www.blogger.com/profile/18337267941037056109noreply@blogger.com0tag:blogger.com,1999:blog-3442075428411398107.post-2887519946266609452013-12-24T08:10:00.001-08:002013-12-24T08:16:13.653-08:00All4Electro - TopCanciones [HTML5 + PHP + JSONP + MySQL]<div style="text-align: justify;">
Buenas, sin duda alguna esta sección es la que más ha costado no por el contenido que desde luego es sencillo sino porque aquí hemos sintetizado todos los conocimientos adquiridos en la asignatura TEWC. Aquí hemos usado ya el servidor 000webhost.com para subir nuestra página y crear una base de datos a la cual nos hemos debido de conectar desde nuestra página para mostrar la información de la forma mas ordenada y estéticamente hablando "bonita". Para ellos hemos uso de todo lo aprendido hasta ahora.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Esto queda reflejado en la sección TopCanciones donde se muestran las listas de inspiración como son Máxima FM (de nivel nacional) o Digitally Imported (de nivel mundial). A continuación de este pequeño tributo a lo que para mi gusto son las mejores páginas para la música electrónica conectamos a la BBDD para que nos muestre el contenido que hay en ella en una tabla esto se realiza mediante HTML ("table") y mediante JSONP y PHP para la conexión a la BBDD. Para rellenar la BBDD se puede hacer del lado cliente como viene a continuación de la página mediante un formulario el cual se válida mediante PHP para saber si todos los campos están rellenados y a continuación introduce el elemento en la página web como se puede comprobar en el listado de la BBDD. También se pueden añadir elementos del lado servidor mediante PHPMyAdmin y MySQL a través de la página del servidor 000webhost.com que posee una interfaz más sencilla y visual.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<ul>
<li><u style="text-align: justify;">HTML:</u><span style="text-align: justify;"> Solo contiene una única novedad respecto a la anterior y es que para representar la información de la BBDD hemos hecho uso de las etiquetas propias de una tabla ("table"). Una vez más hemos usado un formulario con las etiquetas correspondiente a esto ("form"). Con el HTML y CSS se puede resumir en otorgar estilo y visualización uniforme a toda la página y mostrar la información de forma ordenada. Como podemos ver en la siguiente imagen:</span></li>
</ul>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKa7UU-OgyeSbpXzd-XbY8Tgn4GoR_b-anDEYq23gLRUF0RrAi8Eub8kEckrwgu1kLe-dWN4gAxAaTV5kJLSsgqX_SXcj37gc8qC6lVwhYf7UAs6Z5N-gTbTGvcCRN1Cq7WIvJDX5o70DW/s1600/topsongs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKa7UU-OgyeSbpXzd-XbY8Tgn4GoR_b-anDEYq23gLRUF0RrAi8Eub8kEckrwgu1kLe-dWN4gAxAaTV5kJLSsgqX_SXcj37gc8qC6lVwhYf7UAs6Z5N-gTbTGvcCRN1Cq7WIvJDX5o70DW/s640/topsongs.png" width="640" /></a></div>
<span style="text-align: justify;"><br /></span>
<br />
<ul>
<li style="text-align: justify;"><u>PHP:</u> Aquí hemos usado bastantes archivos PHP como por ejemplo aquel necesario para conectar con nuestra BBDD alojada en el servidor. También hemos usado para el formulario PHP como podemos ver en la siguientes imágenes:</li>
</ul>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3pztM1d1cliFRoAzQb_g3B9k-VDLorBH-UiPtas81Hqvcwy-ai0IL-jbf7sDrDRdy_ca3YiDkJQ37c1A-0XUnwE94EWsNXGocuW-SLVgwhyphenhyphenlmg1agJXQhtF7kFrgMvy0BP32YZKS5PMgO/s1600/enviarcancion.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3pztM1d1cliFRoAzQb_g3B9k-VDLorBH-UiPtas81Hqvcwy-ai0IL-jbf7sDrDRdy_ca3YiDkJQ37c1A-0XUnwE94EWsNXGocuW-SLVgwhyphenhyphenlmg1agJXQhtF7kFrgMvy0BP32YZKS5PMgO/s640/enviarcancion.PNG" width="640" /></a></div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<div style="text-align: justify;">
Este PHP ha sido insertado en el siguiente HTML análogamente como en la sección contáctanos para que muestre al usuario si le falta algún dato del formulario por rellenar o si su sugerencia ha sido correctamente introducida en la BBDD aquí también podemos ver MySQL (muy poquito). El resultado final es obviamente casi idéntico al de enviarMensaje.php:</div>
</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnwRVQAcHus42rk4QjSr03rJ92OSt-_e7NljJL7J85IEAr393xRne_3lr5ya9MW70FyoEHy_0dAnMlih96HuiB6Pn16dyXDyzGuOOvx0xQ8NjVpuIEpZuaM9UHb9NHp-FKz4W6xXv4fqCB/s1600/enviasugerencia.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="332" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnwRVQAcHus42rk4QjSr03rJ92OSt-_e7NljJL7J85IEAr393xRne_3lr5ya9MW70FyoEHy_0dAnMlih96HuiB6Pn16dyXDyzGuOOvx0xQ8NjVpuIEpZuaM9UHb9NHp-FKz4W6xXv4fqCB/s640/enviasugerencia.png" width="640" /></a></div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<ul>
<li style="text-align: justify;"><u>JSONP:</u> Esto es lo que hemos usado para mostrar la información de la BBDD gracias a JSONP nos resulta más fácil ordenar la información de la BBDD el código es el siguiente:</li>
</ul>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAreIJUz64L6AhChdCo6nawHQaciNQVpB_YlTV7Vjf0bCBCRH5ewZWCng_zRrwDRzUj05PjKd1dM9OIAjQ-7XcXGVJpHo-qLc58WdWp_0IUFK8-zEnWqHdqB_MWx7Yry-nkbUSEwaI2w88/s1600/jsonp.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="390" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAreIJUz64L6AhChdCo6nawHQaciNQVpB_YlTV7Vjf0bCBCRH5ewZWCng_zRrwDRzUj05PjKd1dM9OIAjQ-7XcXGVJpHo-qLc58WdWp_0IUFK8-zEnWqHdqB_MWx7Yry-nkbUSEwaI2w88/s640/jsonp.PNG" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi6srgJxEyDfdmIv_n4aINelpDzlg14-k1YVFFnQYPABeANg3lCZW93EC9rNkErD0N-v-hFPBMDpu4O-bbjGtf3VnVeoQANI7_uNMiuC-c8Ky2uPWkHlPc-ivdABNfX7IBu4fojcCtbEZ4/s1600/jsonpp.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="306" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi6srgJxEyDfdmIv_n4aINelpDzlg14-k1YVFFnQYPABeANg3lCZW93EC9rNkErD0N-v-hFPBMDpu4O-bbjGtf3VnVeoQANI7_uNMiuC-c8Ky2uPWkHlPc-ivdABNfX7IBu4fojcCtbEZ4/s640/jsonpp.PNG" width="640" /></a></div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<ul>
<li style="text-align: justify;"><u>MySQL:</u> Finalmente el manejo de la BBDD como ya dije al principio es a través de la página del servidor lo cual me ha simplificado completamente la tarea de crear la BBDD y definir todos sus campos esto se hace de forma muy sencilla gracias a la interfaz gráfica de servidor. Aunque en un futuro me gustaría profundizar sobre el uso de BBDD.</li>
</ul>
<div>
<div style="text-align: justify;">
<u style="font-weight: bold;">Conclusión:</u> Ha sido mi último reto en mis siguientes entradas a este BLOG comentaré las demás secciones por encima ya que ninguna incorporá ninguna novedad respecto a las anteriores quería felicitar a Carlos Ángel Iglesias por su trabajo impartiendo esta asignatura y sus transparencias y su infinita paciencia. Doy por concluida la página web.</div>
</div>
</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<br />
<span style="text-align: justify;"><br /></span>
<span style="text-align: justify;"><br /></span>Anonymoushttp://www.blogger.com/profile/18337267941037056109noreply@blogger.com0tag:blogger.com,1999:blog-3442075428411398107.post-19033835504718246542013-12-24T06:53:00.004-08:002013-12-24T06:53:57.038-08:00All4Electro - Contáctanos [HTML5 + PHP]<div style="text-align: justify;">
Buenas en esta sección he usado por primera vez PHP en mi página haciendo uso de una función muy útil de PHP como es la función mail la cual permite enviar correos electrónicos a la dirección indicada. Esto resulta muy útil de cara a la relación cliente-empresa puesto que de esta forma se puede mantener un contacto mas directo. Para ello hemos utilizado dos ficheros, el fichero contactanos.html y el enviaMensaje.php. En uno se encuentra el formulario (html) y en otro la función en sí de enviar el correo (php). Paso a comentar en más detalle la realización de esta sección.</div>
<div style="text-align: justify;">
<br /></div>
<br />
<ul>
<li style="text-align: justify;"><u>HTML</u>: Aquí se ha hecho uso de la etiqueta "form" la cual nos permite crear un formulario al cual se le ha dado un estilo también. Dentro de la etiqueta "form" se ha usado la etiqueta "legend" para dar título al formulario y a su vez se han ido poniendo pares "label" e "input" para los distintos campos del formulario. Finalmente este formulario se envía mediante un "button" el cual envía los campos rellenados por el usuario.</li>
</ul>
<div style="text-align: justify;">
El código usado para el formulario es el siguiente:</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha6L78WW9ND_E7hSwg2qeH8x1u5kOIhrRprwcL5is9sSOm60RLCG1pDjlXu7r4TY3lZ3HbE1Ul_SJ0fVv5Bp1ZS3oQQ5ClJM_2qdOrEAmXkJfGYnf983_J7wONwBizXI4GNDm5H8R2IDm6/s1600/form.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha6L78WW9ND_E7hSwg2qeH8x1u5kOIhrRprwcL5is9sSOm60RLCG1pDjlXu7r4TY3lZ3HbE1Ul_SJ0fVv5Bp1ZS3oQQ5ClJM_2qdOrEAmXkJfGYnf983_J7wONwBizXI4GNDm5H8R2IDm6/s640/form.PNG" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinHjSR4BIZNEl3ltxTjSNTnI23OF4-0XIgdUJHzKkccy9Ygg2VD7d-uIZx5_gaDKBV77bF-V70qTGMfgGOyUypDdkGtEAPz5sMHyCulDgxXeXax2OS4gkqsCE1E8rRP2poBTAmspfHQsEb/s1600/contactus.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="386" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinHjSR4BIZNEl3ltxTjSNTnI23OF4-0XIgdUJHzKkccy9Ygg2VD7d-uIZx5_gaDKBV77bF-V70qTGMfgGOyUypDdkGtEAPz5sMHyCulDgxXeXax2OS4gkqsCE1E8rRP2poBTAmspfHQsEb/s640/contactus.png" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Como se puede ver en la captura de pantalla el estilo usado da unirformidad e igualdad de aspecto a todas las secciones de la página.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<ul>
<li><u>PHP:</u> Aquí llega la "magia" con PHP revisamos que todos los mensaje hayan sido rellenados de cara a que se envie el mensaje correctamente para ello hemos recogido los campos rellenados por el usuario con el atributo "name" a través de PHP y al procesar que no estén vacíos se envia el mensaje y nos lleva a una nueva página donde se confirma el envio o se pide que se cumplimenten los campos vacios. El código PHP es el siguiente:</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPy3pSL5kZMsj5epLg26IDkqJl77kcxTKQkKJAeDU-K6hm_ClmqjYIeXQ5h8v-S2InvZtGtP6jaEgIWFCu25Z8bkpXgSJn8fuKep39ZRC9FqYAW8DofHSKYpuuTDY9A62u4KhE103GAlqZ/s1600/phpenviamensaje.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="306" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPy3pSL5kZMsj5epLg26IDkqJl77kcxTKQkKJAeDU-K6hm_ClmqjYIeXQ5h8v-S2InvZtGtP6jaEgIWFCu25Z8bkpXgSJn8fuKep39ZRC9FqYAW8DofHSKYpuuTDY9A62u4KhE103GAlqZ/s640/phpenviamensaje.PNG" width="640" /></a></div>
<div>
<br /></div>
</div>
<div style="text-align: justify;">
El resultado desde la página es el siguiente:</div>
<div style="text-align: justify;">
<br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYl10q4foJE8Q72kPoBBB_3XWEgUqXLxFt9eQzjDTmeaigp81SJI_0ueIno0b5DAfB0sHrg-tD7cQo3jEDc7xLfH5ryAUQ8QDmNWCDdKK5SoDko6I9yfMCuiYDT1Mk3I6FlxMxeykafM4V/s1600/enviamensaje.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYl10q4foJE8Q72kPoBBB_3XWEgUqXLxFt9eQzjDTmeaigp81SJI_0ueIno0b5DAfB0sHrg-tD7cQo3jEDc7xLfH5ryAUQ8QDmNWCDdKK5SoDko6I9yfMCuiYDT1Mk3I6FlxMxeykafM4V/s640/enviamensaje.png" width="640" /></a></div>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<u style="font-weight: bold;">Conclusión:</u> Este primer contacto con PHP ha sido muy fructífero pero a su vez ligero para la posterioridad aprenderé algo más de PHP ya por interés propio para profundizar conocimientos en otros lenguajes de programación puesto que para la página web está bien y queda elegante y formal. Una experiencia y unas funcionalidades increíbles.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Anonymoushttp://www.blogger.com/profile/18337267941037056109noreply@blogger.com0tag:blogger.com,1999:blog-3442075428411398107.post-5943132893878695222013-12-12T13:04:00.000-08:002013-12-24T06:18:23.794-08:00All4Electro - Homepage [HTML5 + CSS3 +JQuery]<div style="text-align: justify;">
Buenas tardes, a lo largo de esta entrada voy a comentar los aspectos sobre mi sitio web All4Electro relacionados con la estructura, estilo y distintas funcionalidades que he implementado. Después del boceto inicial vamos a centrarnos en la página de inicio (Hompage). Respecto a las demás páginas ésta será la que destaque sobre las demás por su estilo y mayor contenido en forma resumida y vistosa. Estos son los aspectos de Homepage:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><u>Homepage:</u></b></div>
<div style="text-align: justify;">
<br /></div>
<ul>
<li style="text-align: justify;"><u>HTML5:</u></li>
</ul>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
En cuanto al HTML de Homepage, esta validado por W3C como HTML5. Es una estructura basada en un header donde se contiene tanto el logo de la página como la imagen que la identifica, el menú de navegación y un conmutador de estilos (azul y rojo). Después de este vistoso header, nos encontramos con el resto del contenido de la página aquí tenemos dos filas de contenido.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
En la primera fila podemos encontrar los próximos eventos dentro de todos los que habrá (que se encontraran en la página de eventos), un Image Slider que van pasando fotos de forma automática con transiciones sobre las noticias más relevantes que han habido y finalmente a la derecha de esto los titulares de las noticias más relevantes (que se encontraran mas detallados en la página Noticias & Novedades). Esto se ha realizado a través de un diseño flotante (float).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
En la segunda fila a través de un iframe he podido colocar el calendario de google donde podremos ver los eventos del mes actual. Y tenemos un reproductor de música que permite tanto en formato .mp3 como .ogg (para una máxima compatibilidad entre navegadores) reproducir el TOP 5 de las listas más respetadas del momento.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Finalmente hemos colocado en el pie de la página iconos con las distintas redes sociales para que sea más fácil comunicarse con nosotros y publicar artículos que consideremos interesantes.</div>
<div style="text-align: justify;">
<br /></div>
<ul>
<li style="text-align: justify;"><u>CSS3:</u> </li>
</ul>
<div>
<div style="text-align: justify;">
En cuanto al estilo, la imagen del header resulta vistosa así como el logo que da la identidad a la página así como los colores empleados. Se ha cambiado la fuente a Electrolize de Google Fonts. Se ha hecho ambos estilos de 0 sin plantillas. Hemos hecho que la página quede centrada mediante margin auto. He usado un diseño flotante para que cada parte de la página no se sobreponga con otras y consiguiendo por tanto un diseño líquido.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Hemos usado una imagen de fondo que y colores de tal forma que la página no sea estridente y sea agradable al ojo humano así como colores que identifiquen a nuestra empresa. La alternancia entre un estilo y otro me ha resultado complicada puesto que el cambiar un menú horizontal a uno vertical no le daría la misma imagen resultando algo que desencaja fácilmente no obstante para notar diferencias se ha cambiado la imagen del header (donde la mesa de mezclas ha pasado a la izquierda) y el menú ahora tiene orientación derecha (float right).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Hemos añadido un icono a nuestra página web para que acompañe al título y sea representativo de nuestra empresa. Debido a que se han añadido plugins de JQuery como el Music Player y el iframe de Google esto produce que la página no esté validada para CSS3 según los estándares de W3C, no obstante si obviamos esto la página es 100% válida para CSS3.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<ul>
<li style="text-align: justify;"><u>JQuery:</u></li>
</ul>
</div>
<div style="text-align: justify;">
Hemos usado JQuery para varios motivos. Uno de ellos es para que al hacer la carga de cualquier sección cargue un HTML que diga que dicha sección se está en preparación antes de la carga de la página. También hemos usado un plugin muy útil como son las cookies. Al tener un conmutador de estilos para que nuestro navegador recuerde nuestro último estilo visitado cargue directamente al abrir nuevamente la página con dicho estilo.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Finalmente hemos usado dos plugins con JQuery. Uno de ellos es el Image Slider que va pasando fotos con transiciones que previamente introducimos nosotros. Cabe destacar que el CSS que incorpora dicho plugin no era válido según los estándares de CSS3 y el cual he modificado para que sí lo sea. Finalmente hemos podido subir un reproductor de música con JQuery donde se muestra el TOP 5 no obstante este reproductor incorpora un CSS el cual no está validad por W3C.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5PqP8tM_SZ2ZQSP3SaecfEdSGdBAEa0hAfMkojl_T8Aa6nHKtAYikxVWlsswfplQxNgMO7QtQH7XJdDucWA3vdpAMGGOPTzTjBgNSr4HYmpBtp2Wv-ERFTJczRqqpDzGKdrrYMaO7eOQw/s1600/HomePage.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="386" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5PqP8tM_SZ2ZQSP3SaecfEdSGdBAEa0hAfMkojl_T8Aa6nHKtAYikxVWlsswfplQxNgMO7QtQH7XJdDucWA3vdpAMGGOPTzTjBgNSr4HYmpBtp2Wv-ERFTJczRqqpDzGKdrrYMaO7eOQw/s640/HomePage.png" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Conclusión:</b> La página principal resulta vistosa y cumple con los propósitos que nos hemos marcado. Ahora le falta añadirle más funcionalidad del lado servidor como por ejemplo que se puedan enviar e-mails con críticas o sugerencias para la mejora de la web o una base de datos para que el cliente pueda incluir canciones las cuales a posteriori puedan ser votadas para llegar a entrar al TOP5. Las demás secciones están rellenadas de forma un tanto incompleta pero cumplen a su propósito de informar al usuario de las novedades, TOP DJ, canciones y eventos.</div>
<div style="text-align: justify;">
<br /></div>
Anonymoushttp://www.blogger.com/profile/18337267941037056109noreply@blogger.com0tag:blogger.com,1999:blog-3442075428411398107.post-76402168433272351462013-09-16T05:35:00.001-07:002013-12-18T00:40:45.923-08:00All4electro [Idea General]<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbrN9vgJA-sh-XX2mqxkGlhjLYgAo-YHNupdW4Gwhkv2e6LGp-_d95qAz_8Je3ArUZnl1wKg-BSLFvXiVeJMd-vtIKBoldI7SoKQgw_AnxpgbvlXfsZWa633Taedwo2uOygWoLu3KcaxbQ/s1600/fm20130307a4a.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbrN9vgJA-sh-XX2mqxkGlhjLYgAo-YHNupdW4Gwhkv2e6LGp-_d95qAz_8Je3ArUZnl1wKg-BSLFvXiVeJMd-vtIKBoldI7SoKQgw_AnxpgbvlXfsZWa633Taedwo2uOygWoLu3KcaxbQ/s320/fm20130307a4a.jpg" width="320" /></a></div>
<br />
<h2 style="text-align: center;">
<span style="font-size: large;">All4Electro</span></h2>
<div style="text-align: left;">
<div style="text-align: justify;">
Este Blog va dedicado al desarrollo de una página web sobre todo lo relacionado con la música electrónica, tendencias, DJs, TopDJs, éxitos, etc... A lo largo de este semestre pretendo ir realizando una página donde todo sea accesible y se pueda seguir un seguimiento de todas las nuevas tendencias que ofrece la música electrónica.</div>
<div style="text-align: justify;">
Esta web será ante todo de sencillo acceso y mostrará las nuevas tendencias, clubes, DJs así como poder votar por tus canciones y artistas favoritos y en definitiva una página web abierta al público para que de su opinión sobre todo lo relacionado con la música electrónica y todas sus variantes (trance, house...).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<u><span style="font-size: large;">Estructura de la página web:</span></u></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-size: large;"> </span> Mi idea a la hora de organizar la página es realizar un menú desde el cual ir cambiando las distintas secciones de mi página web. El inicio mostrará noticias sobre las novedades en música electrónica y también me gustaría incluir un calendario donde se pudieran incluir espectáculos próximos o eventos de clubes, etc... Así como el Top 5 o 10 de DJs y de canciones actuales. Básicamente mostrar información parcial de otras secciones en mi sección de inicio o incluso tener por ejemplo el calendario invariante independientemente de la sección en la que nos encontremos.</div>
<div style="text-align: justify;">
En cuanto a las secciones había pensado en las siguientes:</div>
<div style="text-align: justify;">
</div>
<ul><ul>
<li style="text-align: justify;">Inicio: Mencionada anteriormente. </li>
<li style="text-align: justify;">Noticias & Novedades: Artículos sobre nuevas tendencias y noticias de sus artistas y canciones favoritas.</li>
<li style="text-align: justify;">TOP DJ: Lista de los DJs que marcan tendencia así como una opción para poder votarles.</li>
<li style="text-align: justify;">TOP Canciones: Análogo al TOP DJ pero con canciones.</li>
<li style="text-align: justify;">Eventos: Calendario donde se incluyen los eventos o espectáculos próximos así como una breve descripción de ellos.</li>
</ul>
</ul>
<div style="text-align: justify;">
No obstante el proyecto inicial puede estar condicionado y se podrán producir modificaciones a lo largo del semestre. Posible añadido: redes sociales.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-size: large;"><u>Sitios Web de Inspiración:</u></span></div>
<div style="text-align: justify;">
<span style="font-size: large;"><u><br /></u></span></div>
<div style="text-align: justify;">
Me he inspirado en varias páginas web para coger ideas para cada una de mis secciones de los siguientes sitios web:</div>
<div style="text-align: justify;">
<ul><ul>
<li><a href="http://www.maxima.fm/">www.maxima.fm</a>: Menú con previsualización.<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQFzvkLvDFp-kPa7LyUPd_-EVGatLa9j4FEfBRpL3x1FfM5kR9n4_qRoEaEHQkB8Vz3g2VkK3slW36EEEoz_p6S9wmDJdh9yG_-wDtGrUPjDYjqDLeiUDMum1xl-aXQg2dbC2qZcVOW1B2/s1600/desplegable.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQFzvkLvDFp-kPa7LyUPd_-EVGatLa9j4FEfBRpL3x1FfM5kR9n4_qRoEaEHQkB8Vz3g2VkK3slW36EEEoz_p6S9wmDJdh9yG_-wDtGrUPjDYjqDLeiUDMum1xl-aXQg2dbC2qZcVOW1B2/s320/desplegable.png" width="320" /></a></div>
</li>
</ul>
</ul>
<ul><ul>
<li><a href="http://www.urbanfire.es/">www.urbanfire.es</a>: Colores y gradientes de color y bordes redondeados.</li>
</ul>
</ul>
<div>
<ul><ul>
<li><a href="http://www.djmag.com/">www.djmag.com</a>: Listas con los DJs y formas de votar a tus DJs favoritos.</li>
</ul>
</ul>
Además hay varias características que se irán incorporando a lo largo del curso.</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/18337267941037056109noreply@blogger.com0